feat(Popover): update theming to 2.0 (#2031)

- update prop values - update stories and snapshots
chanzuckerberg · Aug 12, 2024 · c5ab351 · c5ab351
1 parent cbe3b68
commit c5ab351
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 272 deletions.
diff --git a/src/components/Popover/Popover.module.css b/src/components/Popover/Popover.module.css
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -5,9 +5,6 @@ import React from 'react';
 import { Popover } from './Popover';
 import type { PopoverProps } from './Popover';
 import Button from '../Button';
-import Hr from '../Hr';
-
-// Fix row showing for children
 
 export default {
   title: 'Components/Popover',
@@ -71,6 +68,22 @@ export default {
 type Story = StoryObj<PopoverProps>;
 
 export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Popover>
+  <Popover.Button as={Button} data-testid="popover-trigger-button">
+    Open Popover
+  </Popover.Button>
+  <Popover.Content data-testid="popover-content">
+    <div className="fpo m-2 p-6">Popover Content goes here</div>
+  </Popover.Content>
+</Popover>
+        `,
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     // We want to test visual regression for the Popover.Content as well as the button,
     // but don't want the drawer open initally outside Chromatic.
@@ -142,34 +155,6 @@ export const BottomEnd: Story = {
   ...Default,
 };
 
-export const RightStart: Story = {
-  args: {
-    placement: 'right-start',
-  },
-  ...Default,
-};
-
-export const RightEnd: Story = {
-  args: {
-    placement: 'right-end',
-  },
-  ...Default,
-};
-
-export const LeftStart: Story = {
-  args: {
-    placement: 'left-start',
-  },
-  ...Default,
-};
-
-export const LeftEnd: Story = {
-  args: {
-    placement: 'left-end',
-  },
-  ...Default,
-};
-
 /**
  * The trigger for `Popover` can receive focus, by convention.
  */
@@ -192,7 +177,6 @@ export const FocusClickableElement: Story = {
         <Popover.Content data-testid="popover-content" focus>
           <div className="fpo m-2 p-6">
             Popover Content goes here
-            <Hr />
             <Button>Focus on me upon open</Button>
           </div>
         </Popover.Content>

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -1,5 +1,4 @@
 import { Popover as HeadlessPopover } from '@headlessui/react';
-import clsx from 'clsx';
 import React, { useState, createContext, useContext } from 'react';
 import type { ReactNode, RefObject } from 'react';
 import { createPortal } from 'react-dom';
@@ -11,7 +10,6 @@ import type {
 } from '../PopoverContainer';
 import { defaultPopoverModifiers } from '../PopoverContainer';
 import PopoverContainer from '../PopoverContainer';
-import styles from './Popover.module.css';
 
 export type PopoverProps = ExtractProps<typeof HeadlessPopover> &
   PopoverOptions & {
@@ -130,15 +128,14 @@ const PopoverContent = ({
     style: popperStyles,
   };
 
-  const componentClassName = clsx(styles['popover-content'], className);
   if (typeof document !== 'undefined') {
     return (
       <>
         {createPortal(
           <HeadlessPopover.Panel
             {...allProps}
             as="article"
-            className={componentClassName}
+            className={className}
           >
             <PopoverContainer className={bodyClassName}>
               {children as ReactNode}

diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -121,12 +121,12 @@ exports[`<Popover /> FocusClickableElement story renders snapshot 1`] = `
   data-headlessui-state="open"
 >
   <button
-    aria-controls="headlessui-popover-panel-:r23:"
+    aria-controls="headlessui-popover-panel-:r1f:"
     aria-expanded="true"
     class="button button--layout-none button--primary button--lg button--variant-default"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
-    id="headlessui-popover-button-:r21:"
+    id="headlessui-popover-button-:r1d:"
     type="button"
   >
     <span
@@ -138,7 +138,7 @@ exports[`<Popover /> FocusClickableElement story renders snapshot 1`] = `
   <button
     aria-hidden="true"
     data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r22:"
+    id="headlessui-focus-sentinel-:r1e:"
     style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
     type="button"
   />
@@ -174,64 +174,6 @@ exports[`<Popover /> Left story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Popover /> LeftEnd story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:r1u:"
-    aria-expanded="true"
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    data-headlessui-state="open"
-    data-testid="popover-trigger-button"
-    id="headlessui-popover-button-:r1s:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Open Popover
-    </span>
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r1t:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
-exports[`<Popover /> LeftStart story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:r1p:"
-    aria-expanded="true"
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    data-headlessui-state="open"
-    data-testid="popover-trigger-button"
-    id="headlessui-popover-button-:r1n:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Open Popover
-    </span>
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r1o:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
 exports[`<Popover /> Right story renders snapshot 1`] = `
 <div
   data-headlessui-state="open"
@@ -261,64 +203,6 @@ exports[`<Popover /> Right story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Popover /> RightEnd story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:r1k:"
-    aria-expanded="true"
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    data-headlessui-state="open"
-    data-testid="popover-trigger-button"
-    id="headlessui-popover-button-:r1i:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Open Popover
-    </span>
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r1j:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
-exports[`<Popover /> RightStart story renders snapshot 1`] = `
-<div
-  data-headlessui-state="open"
->
-  <button
-    aria-controls="headlessui-popover-panel-:r1f:"
-    aria-expanded="true"
-    class="button button--layout-none button--primary button--lg button--variant-default"
-    data-headlessui-state="open"
-    data-testid="popover-trigger-button"
-    id="headlessui-popover-button-:r1d:"
-    type="button"
-  >
-    <span
-      class="button__text"
-    >
-      Open Popover
-    </span>
-  </button>
-  <button
-    aria-hidden="true"
-    data-headlessui-focus-guard="true"
-    id="headlessui-focus-sentinel-:r1e:"
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
-    type="button"
-  />
-</div>
-`;
-
 exports[`<Popover /> Top story renders snapshot 1`] = `
 <div
   data-headlessui-state="open"

diff --git a/src/components/PopoverContainer/PopoverContainer.tsx b/src/components/PopoverContainer/PopoverContainer.tsx
@@ -53,7 +53,6 @@ export const defaultPopoverModifiers: Options['modifiers'] = [
 ];
 
 export type PopoverOptions = {
-  // TODO: switch to PopperJS's full placement type
   /**
    * Popover placement options relative to the trigger element.
    */
@@ -62,10 +61,6 @@ export type PopoverOptions = {
     | 'top-end'
     | 'bottom-start'
     | 'bottom-end'
-    | 'right-start'
-    | 'right-end'
-    | 'left-start'
-    | 'left-end'
     | 'top'
     | 'bottom'
     | 'left'