Popover: V2 pre-release

pinterest · Jun 26, 2024 · 14c8bda · 14c8bda
1 parent a5a61c9
commit 14c8bda
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 200 deletions.
diff --git a/docs/docs-components/contexts/DocsExperimentProvider.tsx b/docs/docs-components/contexts/DocsExperimentProvider.tsx
@@ -9,7 +9,6 @@ import { useAppContext } from '../appContext';
  * */
 
 const enabledExperiments = {
-  Popover: ['web_gestalt_popover_v2', 'mweb_gestalt_popover_v2'],
   Tooltip: ['web_gestalt_tooltip_v2', 'mweb_gestalt_tooltip_v2'],
   Tokens: ['web_gestalt_visualRefresh', 'web_gestalt_visualRefresh'],
 } as const;

diff --git a/docs/examples/popover/variantScrollingContainers.tsx b/docs/examples/popover/variantScrollingContainers.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Box, ButtonLink, Flex, Layer, Popover, ScrollBoundaryContainer, Text } from 'gestalt';
+import { Box, ButtonLink, Flex, Popover, Text } from 'gestalt';
 
 export default function Example() {
   const [open, setOpen] = useState(false);
@@ -20,10 +20,14 @@ export default function Example() {
       padding={6}
       width="100%"
     >
-      <ScrollBoundaryContainer height={200}>
-        <Box ref={viewRef} color="default" padding={4} width={600}>
-          <Flex gap={{ column: 0, row: 4 }}>
-            <Box width={200}>
+      <Box
+        height={200}
+        overflow="auto"
+        position="relative" // this prevents Popover from overflowing the container
+      >
+        <Box ref={viewRef} color="default" padding={4} width={600} position="relative">
+          <Flex gap={{ column: 0, row: 4 }} alignItems="center">
+            <Box width={220}>
               <Text>
                 You need to add your data source URL to Pinterest so we can access your data source
                 file and create Pins for your products. Before you do this, make sure you have
@@ -45,25 +49,23 @@ export default function Example() {
               target="blank"
               text="Help"
             />
-
-            {open && (
-              <Layer>
-                <Popover
-                  anchor={anchorRef.current}
-                  idealDirection="right"
-                  onDismiss={() => {}}
-                  positionRelativeToAnchor={false}
-                  size="xs"
-                >
-                  <Box alignItems="center" display="flex" height={100} justifyContent="center">
-                    <Text align="center">Content</Text>
-                  </Box>
-                </Popover>
-              </Layer>
-            )}
           </Flex>
+
+          {open && (
+            <Popover
+              anchor={anchorRef.current}
+              idealDirection="right"
+              onDismiss={() => {}}
+              disablePortal={true}
+              size="xs"
+            >
+              <Box alignItems="center" display="flex" height={100} justifyContent="center">
+                <Text align="center">Content</Text>
+              </Box>
+            </Popover>
+          )}
         </Box>
-      </ScrollBoundaryContainer>
+      </Box>
     </Box>
   );
 }
diff --git a/docs/pages/web/popover.tsx b/docs/pages/web/popover.tsx
@@ -20,17 +20,7 @@ import variantVisibility from '../../examples/popover/variantVisibility';
 export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
   return (
     <Page title={generatedDocGen?.displayName}>
-      <PageHeader
-        bannerSlimExperiment={
-          <BannerSlimExperiment
-            componentName="Popover"
-            description="fix and improve component behavior. No visual updates"
-            pullRequest={3244}
-          />
-        }
-        description={generatedDocGen?.description}
-        name={generatedDocGen?.displayName}
-      >
+      <PageHeader description={generatedDocGen?.description} name={generatedDocGen?.displayName}>
         <SandpackExample code={main} hideEditor name="Main popover example" previewHeight={600} />
       </PageHeader>
       <GeneratedPropTable generatedDocGen={generatedDocGen} />
@@ -165,9 +155,9 @@ Popover calculates its position based on the bounding box of the \`anchor\`. The
 
         <MainSection.Subsection
           description={`
-Popover is typically used within [Layer](/web/layer). Layer renders Popover outside the DOM hierarchy of the parent allowing it to overlay surrounding content. Popover calculates its position based on the bounding box of the \`anchor\`. Within Layer, Popover no longer shares a relative root with the \`anchor\` and requires \`positionRelativeToAnchor=false\` to properly calculate its position relative to the anchor element.
+Popover is typically used within [Layer](/web/layer). Layer renders Popover outside the DOM hierarchy of the parent allowing it to overlay surrounding content. Popover calculates its position based on the bounding box of the \`anchor\`. Within Layer, Popover no longer shares a relative root with the \`anchor\` and requires \`disablePortal=true\` to disable its internal Layer.
 
-Using \`Layer\` with Popover eliminates the need to use \`z-index\` to solve stacking context conflicts. Popovers within Modals and OverlayPanels with z-indexes don't require \`zIndex\` in \`Layer\` thanks to the built-in ScrollBoundaryContainer.
+Using \`Layer\` with Popover eliminates the need to use \`z-index\` to solve stacking context conflicts. Popovers within Modals and OverlayPanels with z-indexes don't require \`zIndex\` in \`Layer\`.
 `}
           title="With Layer"
         >
@@ -206,7 +196,15 @@ Adjust the \`idealDirection\` as necessary to ensure the visibility of Popover a
 
         <MainSection.Subsection
           description={`
-[ScrollBoundaryContainer](/web/utilities/scrollboundarycontainer) is needed for proper positioning when Popover is anchored to an element that is located within a scrolling container. The use of ScrollBoundaryContainer ensures Popover remains attached to its anchor when scrolling.
+Popover always remains attached to its anchor when scrolling. However Popover may float outside of the scrolling container without adjusting itself (**shift / flip**) when reached to the edges if:
+ - Popover is rendered through portal using
+   - \`disablePortal={true}\` prop
+   - **[Layer](/web/layer)** component
+ - the scrolling container is not positioned relatively (\`position: relative\`)
+
+For some use cases that can be the indeneded behavior.
+
+If Popover has to respect the edges of its scrolling container, the scrolling has to have position CSS rule set to \`relative\`. Popover's \`disablePortal\` prop is by default \`true\`. That's why in this case should not be set to \`false\`.
 `}
           title="Within scrolling containers"
         >

diff --git a/packages/gestalt/src/Popover.jsdom.test.tsx b/packages/gestalt/src/Popover.jsdom.test.tsx
@@ -1,12 +1,11 @@
 import PopoverEducational from './PopoverEducational';
 import Text from './Text';
-import renderWithExperiment from './utils/testing/renderWithExperiment';
+import { render } from '@testing-library/react';
 
 describe('PopoverEducational', () => {
   it('renders correctly', () => {
     const element = document.createElement('div');
-    const { container } = renderWithExperiment(
-      'web_gestalt_popover_v2_popovereducational',
+    const { container } = render(
       <PopoverEducational
         accessibilityLabel="text"
         anchor={element}
@@ -21,8 +20,7 @@ describe('PopoverEducational', () => {
 
   it('renders correctly with custom children', () => {
     const element = document.createElement('div');
-    const { container } = renderWithExperiment(
-      'web_gestalt_popover_v2_popovereducational',
+    const { container } = render(
       <PopoverEducational accessibilityLabel="text" anchor={element} onDismiss={jest.fn()}>
         <Text>Custom children</Text>
       </PopoverEducational>,
@@ -32,8 +30,7 @@ describe('PopoverEducational', () => {
   });
 
   it('does not render when the anchor is null', () => {
-    const { container } = renderWithExperiment(
-      'web_gestalt_popover_v2_popovereducational',
+    const { container } = render(
       <PopoverEducational
         accessibilityLabel="text"
         anchor={null}

diff --git a/packages/gestalt/src/Popover.tsx b/packages/gestalt/src/Popover.tsx
@@ -1,8 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { Overflow } from './boxTypes';
 import InternalPopover from './Popover/InternalPopover';
-import LegacyInternalPopover from './Popover/LegacyInternalPopover';
-import useInExperiment from './useInExperiment';
 
 type Color = 'deprecatedBlue' | 'white' | 'darkGray';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'flexible' | number;
@@ -81,8 +79,6 @@ type Props = {
    * *EXPERIMENTAL:* Whether to hide Popover when reference element gets out of viewport.
    */
   hideWhenReferenceHidden?: boolean;
-  // This property can be set when `ScrollBoundaryContainer` is set to `overflow="visible"` but therefore limits the height of the Popover-based component. Some cases require
-  __dangerouslySetMaxHeight?: '30vh';
   // Callback fired when Popover is correctly positioned after it's mounted.
   __onPositioned?: () => void;
   // Controls overflow property of Popover
@@ -117,40 +113,9 @@ export default function Popover({
   size = 'sm',
   scrollBoundary,
   hideWhenReferenceHidden = true,
-  __dangerouslySetMaxHeight,
   __onPositioned,
   __overflow,
 }: Props): null | ReactElement {
-  const isInExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_popover_v2',
-    mwebExperimentName: 'mweb_gestalt_popover_v2',
-  });
-
-  if (!isInExperiment) {
-    return (
-      <LegacyInternalPopover
-        __dangerouslySetMaxHeight={__dangerouslySetMaxHeight}
-        accessibilityDismissButtonLabel={accessibilityDismissButtonLabel}
-        accessibilityLabel={accessibilityLabel}
-        anchor={anchor}
-        color={color === 'deprecatedBlue' ? 'blue' : color}
-        id={id}
-        idealDirection={idealDirection}
-        onDismiss={onDismiss}
-        onKeyDown={onKeyDown}
-        overflow={__overflow}
-        positionRelativeToAnchor={positionRelativeToAnchor}
-        role={role}
-        shouldFocus={shouldFocus}
-        showCaret={_deprecatedShowCaret}
-        showDismissButton={showDismissButton}
-        size={size}
-      >
-        {children}
-      </LegacyInternalPopover>
-    );
-  }
-
   return (
     <InternalPopover
       accessibilityDismissButtonLabel={accessibilityDismissButtonLabel}

diff --git a/packages/gestalt/src/Popover/LegacyInternalPopover.tsx b/packages/gestalt/src/Popover/LegacyInternalPopover.tsx
diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -7,13 +7,7 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
     data-floating-ui-inert=""
   />
   <div
-    aria-hidden="true"
     class=""
-    data-floating-ui-inert=""
-  />
-  <div
-    data-floating-ui-portal=""
-    id=":r2:"
   >
     <div>
       <span
@@ -568,13 +562,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
     data-floating-ui-inert=""
   />
   <div
-    aria-hidden="true"
     class=""
-    data-floating-ui-inert=""
-  />
-  <div
-    data-floating-ui-portal=""
-    id=":r0:"
   >
     <div>
       <span