feat(popover): add inset prop to popover

adevinta · Nov 21, 2023 · a3482e4 · a3482e4
1 parent 2d3954c
commit a3482e4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/packages/components/popover/src/Popover.doc.mdx b/packages/components/popover/src/Popover.doc.mdx
@@ -76,6 +76,12 @@ The content is the popover itself.
 
 <Canvas of={stories.Default} />
 
+### Inset
+
+When set to `true`, this option will remove the internal padding of the `Popover.Content` component. This allows you to have an image or any content that occupies the full width, for example.
+
+<Canvas of={stories.Inset} />
+
 ### Uncontrolled
 
 By default, `Popover` doesn't need external state to open/close itself.

diff --git a/packages/components/popover/src/Popover.stories.tsx b/packages/components/popover/src/Popover.stories.tsx
@@ -51,6 +51,25 @@ export const Default: StoryFn = _args => {
   )
 }
 
+export const Inset: StoryFn = _args => {
+  return (
+    <ShowcaseContainer>
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button>Trigger popover</Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content inset>
+            <img src="https://placehold.co/300x200/white/grey" alt="" />
+            <Popover.Arrow />
+            <Popover.CloseButton aria-label="Close the popover" />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover>
+    </ShowcaseContainer>
+  )
+}
+
 export const Uncontrolled: StoryFn = () => {
   return (
     <ShowcaseContainer>

diff --git a/packages/components/popover/src/Popover.test.tsx b/packages/components/popover/src/Popover.test.tsx
@@ -23,6 +23,7 @@ describe('Popover', () => {
   beforeAll(() => {
     mockResizeObserver()
   })
+
   describe('opening', () => {
     it('should open popover on click', async () => {
       const user = userEvent.setup()
@@ -351,4 +352,19 @@ describe('Popover', () => {
     expect(within(originalContainer).queryByText('Popover content')).not.toBeInTheDocument()
     expect(screen.getByText('Popover content')).toBeInTheDocument()
   })
+
+  it('should handle the inset prop', async () => {
+    render(
+      <Popover open>
+        <Popover.Trigger asChild>
+          <button type="button">Click me</button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content inset>Popover content</Popover.Content>
+        </Popover.Portal>
+      </Popover>
+    )
+
+    expect(screen.getByText(/Popover content/i)).not.toHaveClass('p-lg')
+  })
 })
diff --git a/packages/components/popover/src/PopoverContent.styles.ts b/packages/components/popover/src/PopoverContent.styles.ts
@@ -4,7 +4,6 @@ export const styles = cva(
   [
     'z-popover',
     'rounded-md',
-    'p-lg',
     'bg-surface text-on-surface',
     'shadow',
     'focus-visible:outline-none focus-visible:u-ring',
@@ -24,11 +23,23 @@ export const styles = cva(
       hasCloseButton: {
         true: 'pr-[40px]',
       },
+      inset: {
+        true: 'overflow-hidden',
+        false: 'p-lg',
+      },
     },
+    compoundVariants: [
+      {
+        hasCloseButton: true,
+        inset: true,
+        class: 'pr-none',
+      },
+    ],
     defaultVariants: {
       matchTriggerWidth: false,
       enforceBoundaries: false,
       hasCloseButton: false,
+      inset: false,
     },
   }
 )

diff --git a/packages/components/popover/src/PopoverContent.tsx b/packages/components/popover/src/PopoverContent.tsx
@@ -25,6 +25,7 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(
       side = 'bottom',
       sideOffset = 8,
       sticky = 'partial',
+      inset = false,
       ...rest
     },
     ref
@@ -38,6 +39,7 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(
           enforceBoundaries: !!collisionBoundary,
           matchTriggerWidth,
           hasCloseButton,
+          inset,
           className,
         })}
         data-spark-component="popover-content"