mc

Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr>

Author: gamegee

libs/ui-react/src/lib/Components/Popover/Popover.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import * as React from 'react';
+import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
+import { Tag } from '../Tag';
 import {
   Popover,
   PopoverTrigger,
@@ -28,19 +30,46 @@ export default meta;
 
 type Story = StoryObj<typeof Popover>;
 
+const DefaultContent = () => {
+  return (
+    <div className='flex flex-col gap-24'>
+      <div className='flex items-center gap-12'>
+        <Avatar
+          size='lg'
+          src='https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+        />
+        <div>
+          <div className='heading-4-semi-bold text-base'>John Doe</div>
+          <Tag label='Status: Active' appearance='success' />
+        </div>
+      </div>
+
+      <div>
+        <p className='heading-4-semi-bold text-base'>Notifications</p>
+        <p className='body-2 text-muted'>
+          You have 10 notifications in your account
+        </p>
+      </div>
+      <div className='flex gap-12'>
+        <Button size='sm' appearance='gray'>
+          View all
+        </Button>
+        <Button size='sm' appearance='gray'>
+          Settings
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 export const Base: Story = {
   render: (args: PopoverProps) => (
     <Popover {...args}>
       <PopoverTrigger>
-        <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-          Open Popover
-        </button>
+        <Button appearance='gray'>Open Popover</Button>
       </PopoverTrigger>
       <PopoverContent>
-        <div className='flex flex-col gap-8'>
-          <p className='heading-4-semi-bold text-base'>Notifications</p>
-          <p className='body-2 text-muted'>You are all caught up. Good job!</p>
-        </div>
+        <DefaultContent />
       </PopoverContent>
     </Popover>
   ),
@@ -51,63 +80,69 @@ export const WidthShowcase: Story = {
     <div className='flex items-center gap-16'>
       <Popover width='hug'>
         <PopoverTrigger>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            Hug (default)
-          </button>
+          <Button appearance='gray'>Hug (default)</Button>
         </PopoverTrigger>
         <PopoverContent>
-          <p className='body-2 text-base'>Short content</p>
+          <p className='body-2 text-base'>Hug width</p>
         </PopoverContent>
       </Popover>
 
       <Popover width='fixed'>
         <PopoverTrigger>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            Fixed (400px)
-          </button>
+          <Button appearance='gray'>Fixed (400px)</Button>
         </PopoverTrigger>
         <PopoverContent>
-          <p className='body-2 text-base'>
-            This panel is always 400px wide regardless of content.
-          </p>
+          <p className='body-2 text-base'>Fixed width</p>
         </PopoverContent>
       </Popover>
     </div>
   ),
 };
 
+export const PositionShowcase: Story = {
+  render: () => {
+    const side = ['top', 'bottom', 'left', 'right'] as const;
+    const align = ['start', 'center', 'end'] as const;
+
+    return (
+      <div className='flex flex-col items-center gap-16'>
+        {align.map((align) => (
+          <div key={align} className='flex items-center gap-16'>
+            {side.map((side) => (
+              <Popover key={side} side={side} overlay={false} align={align}>
+                <PopoverTrigger>
+                  <Button appearance='gray'>{`${side}-${align}`}</Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <DefaultContent />
+                </PopoverContent>
+              </Popover>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
 export const WithOverlay: Story = {
   render: () => (
     <div className='flex items-center gap-16'>
-      <Popover overlay>
+      <Popover overlay width='fixed'>
         <PopoverTrigger>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            With Overlay (default)
-          </button>
+          <Button appearance='gray'>With Overlay (default)</Button>
         </PopoverTrigger>
         <PopoverContent>
-          <div className='flex flex-col gap-8'>
-            <p className='heading-4-semi-bold text-base'>Modal Popover</p>
-            <p className='body-2 text-muted'>
-              A backdrop overlay is shown and outside interaction is blocked.
-            </p>
-          </div>
+          <DefaultContent />
         </PopoverContent>
       </Popover>
 
-      <Popover overlay={false}>
+      <Popover overlay={false} width='fixed'>
         <PopoverTrigger>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            Without Overlay
-          </button>
+          <Button appearance='gray'>Without Overlay</Button>
         </PopoverTrigger>
         <PopoverContent>
-          <div className='flex flex-col gap-8'>
-            <p className='heading-4-semi-bold text-base'>Non-modal Popover</p>
-            <p className='body-2 text-muted'>
-              No overlay. You can interact with elements behind this popover.
-            </p>
-          </div>
+          <DefaultContent />
         </PopoverContent>
       </Popover>
     </div>
@@ -125,16 +160,11 @@ export const Controlled: Story = {
           onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
         >
           <PopoverTrigger>
-            <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-              {open ? 'Close' : 'Open'} Popover
-            </button>
+            <Button appearance='gray'>{open ? 'Close' : 'Open'} Popover</Button>
           </PopoverTrigger>
           <PopoverContent>
-            <div className='flex flex-col gap-8'>
-              <p className='heading-4-semi-bold text-base'>Controlled</p>
-              <p className='body-2 text-muted'>
-                Open state is managed externally.
-              </p>
+            <div className='flex flex-col gap-16'>
+              <DefaultContent />
               <Button
                 size='sm'
                 appearance='gray'
@@ -154,15 +184,10 @@ export const Controlled: Story = {
 };
 
 export const WithRenderProp: Story = {
-  name: 'With Render Prop (Custom Trigger)',
   render: () => (
     <Popover>
       <PopoverTrigger
-        render={
-          <Button size='md' appearance='gray'>
-            Custom Trigger
-          </Button>
-        }
+        render={<Button appearance='gray'>Custom Trigger</Button>}
       />
       <PopoverContent>
         <div className='flex flex-col gap-8'>
@@ -183,15 +208,11 @@ export const DetachedTrigger: Story = {
     return (
       <div className='flex items-center gap-16'>
         <PopoverTrigger handle={handle} payload={{ label: 'Button A' }}>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            Trigger A
-          </button>
+          <Button appearance='gray'>Trigger A</Button>
         </PopoverTrigger>
 
         <PopoverTrigger handle={handle} payload={{ label: 'Button B' }}>
-          <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-            Trigger B
-          </button>
+          <Button appearance='gray'>Trigger B</Button>
         </PopoverTrigger>
 
         <Popover handle={handle}>
@@ -212,22 +233,3 @@ export const DetachedTrigger: Story = {
     );
   },
 };
-
-export const PositionShowcase: Story = {
-  render: () => (
-    <div className='flex items-center gap-16'>
-      {(['top', 'bottom', 'left', 'right'] as const).map((side) => (
-        <Popover key={side} side={side} overlay={false}>
-          <PopoverTrigger>
-            <button className='body-2-semi-bold rounded-sm bg-muted px-16 py-8'>
-              {side}
-            </button>
-          </PopoverTrigger>
-          <PopoverContent>
-            <p className='body-2 text-base'>Side: {side}</p>
-          </PopoverContent>
-        </Popover>
-      ))}
-    </div>
-  ),
-};

libs/ui-react/src/lib/Components/Popover/Popover.tsx

@@ -1,5 +1,5 @@
-import { cn, createSafeContext } from '@ledgerhq/lumen-utils-shared';
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { cn, createSafeContext } from '@ledgerhq/lumen-utils-shared';
 import { cva } from 'class-variance-authority';
 import type {
   PopoverProps,
@@ -13,10 +13,10 @@ const [PopoverContextProvider, usePopoverContext] =
 
 const popupVariants = cva(
   [
-    'z-menu overflow-hidden rounded-md bg-canvas-sheet p-16',
+    'overflow-hidden rounded-md bg-canvas-sheet p-16',
     'shadow-sm',
-    'data-[state=open]:animate-fade-in',
-    'data-[state=closed]:animate-fade-out',
+    'data-open:animate-fade-in data-open:duration-100!',
+    'data-closed:animate-fade-out data-closed:duration-100!',
   ],
   {
     variants: {
@@ -32,9 +32,9 @@ const popupVariants = cva(
 );
 
 const overlayStyles = cn(
-  'fixed inset-0 z-dialog-overlay bg-canvas-overlay backdrop-blur-sm',
-  'data-[state=open]:animate-fade-in',
-  'data-[state=closed]:animate-fade-out',
+  'fixed inset-0 z-dialog-overlay bg-canvas-overlay',
+  'data-open:animate-fade-in data-open:duration-100!',
+  'data-closed:animate-fade-out',
 );
 
 /**
@@ -63,13 +63,10 @@ function Popover<Payload = unknown>({
   open,
   defaultOpen,
   onOpenChange,
-  overlay = true,
+  overlay = false,
   side = 'bottom',
-  sideOffset = 4,
+  sideOffset = 8,
   align = 'start',
-  alignOffset = 0,
-  collisionPadding,
-  collisionBoundary,
   width = 'hug',
   handle,
   children,
@@ -81,14 +78,11 @@ function Popover<Payload = unknown>({
         side,
         sideOffset,
         align,
-        alignOffset,
-        collisionPadding,
-        collisionBoundary,
         width,
       }}
     >
       <PopoverPrimitive.Root
-        data-slot="popover"
+        data-slot='popover'
         open={open}
         defaultOpen={defaultOpen}
         onOpenChange={onOpenChange}
@@ -107,15 +101,6 @@ function Popover<Payload = unknown>({
  * Use the `render` prop to compose with a custom component.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/components-popover-overview--docs Storybook}
- *
- * @example
- * <PopoverTrigger>
- *   <button>Open popover</button>
- * </PopoverTrigger>
- *
- * @example
- * // With render prop for custom trigger
- * <PopoverTrigger render={<IconButton icon={SettingsIcon} />} />
  */
 const PopoverTrigger = <Payload,>({
   handle,
@@ -126,7 +111,7 @@ const PopoverTrigger = <Payload,>({
   ...props
 }: PopoverTriggerProps<Payload>) => (
   <PopoverPrimitive.Trigger
-    data-slot="popover-trigger"
+    data-slot='popover-trigger'
     handle={handle}
     payload={payload}
     render={render}
@@ -143,29 +128,9 @@ PopoverTrigger.displayName = 'PopoverTrigger';
  * optional Backdrop, Positioner, and Popup.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/components-popover-overview--docs Storybook}
- *
- * @example
- * <PopoverContent>
- *   <p>Popover content here</p>
- * </PopoverContent>
- *
- * @example
- * // With custom className
- * <PopoverContent className="min-w-320">
- *   <p>Wide content</p>
- * </PopoverContent>
  */
 function PopoverContent({ className, children }: PopoverContentProps) {
-  const {
-    overlay,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    collisionPadding,
-    collisionBoundary,
-    width,
-  } = usePopoverContext({
+  const { overlay, side, sideOffset, align, width } = usePopoverContext({
     consumerName: 'PopoverContent',
     contextRequired: true,
   });
@@ -174,21 +139,19 @@ function PopoverContent({ className, children }: PopoverContentProps) {
     <PopoverPrimitive.Portal>
       {overlay && (
         <PopoverPrimitive.Backdrop
-          data-slot="popover-overlay"
+          data-slot='popover-overlay'
           className={overlayStyles}
         />
       )}
       <PopoverPrimitive.Positioner
-        data-slot="popover-positioner"
+        data-slot='popover-positioner'
+        className='z-menu'
         side={side}
         sideOffset={sideOffset}
         align={align}
-        alignOffset={alignOffset}
-        collisionPadding={collisionPadding}
-        collisionBoundary={collisionBoundary}
       >
         <PopoverPrimitive.Popup
-          data-slot="popover-content"
+          data-slot='popover-content'
           className={cn(popupVariants({ width }), className)}
         >
           {children}