Add support for aligned popover placements (start/end variants)

[JSv4]

Summary

Extended the Popover component to support 12 placement options instead of 4, adding start and end alignment variants for each cardinal direction. This allows for more flexible positioning of popovers relative to their trigger elements.

Key Changes

• Type Definition: Updated PopoverPlacement type to include all 12 variants:

  • top, top-start, top-end
  • bottom, bottom-start, bottom-end
  • left, left-start, left-end
  • right, right-start, right-end

• Position Calculation Logic: Extended the positioning algorithm in Popover.tsx to handle all new placement variants:

  • Start variants align with the trigger's start edge
  • End variants align with the trigger's end edge
  • Center variants (original behavior) remain unchanged

• CSS Transforms: Added corresponding CSS transform rules in Popover.styles.ts for proper alignment of each placement variant

• Storybook:

  • Updated the placement control options to include all 12 variants
  • Added a new BottomEnd story demonstrating a practical use case (user menu dropdown)

Implementation Details

The positioning logic uses the trigger element's bounding rectangle to calculate coordinates:

• For horizontal placements (left/right): start uses top, center uses top + height/2, end uses bottom
• For vertical placements (top/bottom): start uses left, center uses left + width/2, end uses right
• CSS transforms are applied to align the popover content appropriately relative to the calculated position

https://claude.ai/code/session_01SZorT2y1tzv2yNKtZ7fbt6