From c5ab3515e1bfe8eafde89ec308547b6d34e0b44d Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Mon, 12 Aug 2024 13:19:34 -0500
Subject: [PATCH] feat(Popover): update theming to 2.0 (#2031)

- update prop values
- update stories and snapshots
---
 src/components/Popover/Popover.module.css     | 112 ----------------
 src/components/Popover/Popover.stories.tsx    |  48 +++----
 src/components/Popover/Popover.tsx            |   5 +-
 .../__snapshots__/Popover.test.tsx.snap       | 122 +-----------------
 .../PopoverContainer/PopoverContainer.tsx     |   5 -
 5 files changed, 20 insertions(+), 272 deletions(-)
 delete mode 100644 src/components/Popover/Popover.module.css

diff --git a/src/components/Popover/Popover.module.css b/src/components/Popover/Popover.module.css
deleted file mode 100644
index 0d95e840e..000000000
--- a/src/components/Popover/Popover.module.css
+++ /dev/null
@@ -1,112 +0,0 @@
-/*------------------------------------*\
-    # POPOVER CONTENT
-\*------------------------------------*/
-
-/**
- * Decorative arrow pointing the Popover to the trigger element.
- */
-.popover-content__arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-/**
- * Arrow directions, made into mixins for brevity in use.
- */
-@define-mixin down-arrow {
-  bottom: -0.25rem;
-
-  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
-  border-top-color: var(--eds-theme-color-background-neutral-default);
-  border-bottom: none;
-}
-@define-mixin up-arrow {
-  top: -0.25rem;
-
-  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
-  border-bottom-color: var(--eds-theme-color-background-neutral-default);
-  border-top: none;
-}
-@define-mixin left-arrow {
-  left: -0.25rem;
-
-  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
-  border-right-color: var(--eds-theme-color-background-neutral-default);
-  border-left: none;
-}
-@define-mixin right-arrow {
-  right: -0.25rem;
-
-  border: calc(var(--eds-size-half) / 16 * 1rem) solid transparent;
-  border-left-color: var(--eds-theme-color-background-neutral-default);
-  border-right: none;
-}
-
-/**
- * Arrow placement according to popover placement.
- */
-:where([data-popper-placement='top-start'] > .popover-content__arrow) {
-  left: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin down-arrow;
-}
-:where([data-popper-placement='top-end'] > .popover-content__arrow) {
-  right: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin down-arrow;
-}
-:where([data-popper-placement='bottom-start'] > .popover-content__arrow) {
-  left: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin up-arrow;
-}
-:where([data-popper-placement='bottom-end'] > .popover-content__arrow) {
-  right: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin up-arrow;
-}
-:where([data-popper-placement='right-start'] > .popover-content__arrow) {
-  top: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin left-arrow;
-}
-:where([data-popper-placement='right-end'] > .popover-content__arrow) {
-  bottom: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin left-arrow;
-}
-:where([data-popper-placement='left-start'] > .popover-content__arrow) {
-  top: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin right-arrow;
-}
-:where([data-popper-placement='left-end'] > .popover-content__arrow) {
-  bottom: calc(var(--eds-size-2) / 16 * 1rem);
-
-  @mixin right-arrow;
-}
-
-:where([data-popper-placement='top'] > .popover-content__arrow) {
-  left: 50%;
-
-  @mixin down-arrow;
-}
-
-:where([data-popper-placement='bottom'] > .popover-content__arrow) {
-  left: 50%;
-
-  @mixin up-arrow;
-}
-
-:where([data-popper-placement='right'] > .popover-content__arrow) {
-  top: 50%;
-
-  @mixin left-arrow;
-}
-
-:where([data-popper-placement='left'] > .popover-content__arrow) {
-  top: 50%;
-
-  @mixin right-arrow;
-}
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
index 86250a638..ba8b0c6fa 100644
--- 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
index 150fe56a6..dc058256f 100644
--- 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,7 +128,6 @@ const PopoverContent = ({
     style: popperStyles,
   };
 
-  const componentClassName = clsx(styles['popover-content'], className);
   if (typeof document !== 'undefined') {
     return (
       <>
@@ -138,7 +135,7 @@ const PopoverContent = ({
           <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
index 0e94e57a7..82c8ad1f3 100644
--- 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
index ba16aadfc..874b34288 100644
--- 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'