diff --git a/docs/docs-components/contexts/DocsExperimentProvider.tsx b/docs/docs-components/contexts/DocsExperimentProvider.tsx
index 955ebb7f46..23377db52c 100644
--- 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
index 7e28550f29..641ca989a2 100644
--- 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%"
>
-
-
-
-
+
+
+
+
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 && (
-
- {}}
- positionRelativeToAnchor={false}
- size="xs"
- >
-
- Content
-
-
-
- )}
+
+ {open && (
+ {}}
+ disablePortal={true}
+ size="xs"
+ >
+
+ Content
+
+
+ )}
-
+
);
}
diff --git a/docs/pages/web/popover.tsx b/docs/pages/web/popover.tsx
index 8c1e626003..51dd25cce2 100644
--- 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 (
-
- }
- description={generatedDocGen?.description}
- name={generatedDocGen?.displayName}
- >
+
@@ -165,9 +155,9 @@ Popover calculates its position based on the bounding box of the \`anchor\`. The
@@ -206,7 +196,15 @@ Adjust the \`idealDirection\` as necessary to ensure the visibility of Popover a
diff --git a/packages/gestalt/src/Popover.jsdom.test.tsx b/packages/gestalt/src/Popover.jsdom.test.tsx
index 4e69913536..b5e68dbab7 100644
--- 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(
{
it('renders correctly with custom children', () => {
const element = document.createElement('div');
- const { container } = renderWithExperiment(
- 'web_gestalt_popover_v2_popovereducational',
+ const { container } = render(
Custom children
,
@@ -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(
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 (
-
- {children}
-
- );
- }
-
return (
}) => void;
- id?: string;
- idealDirection?: 'up' | 'right' | 'down' | 'left' | 'forceDown';
- onDismiss: () => void;
- positionRelativeToAnchor?: boolean;
- role?: Role;
- shouldFocus?: boolean;
- showCaret?: boolean;
- showDismissButton?: boolean;
- size?: Size;
- __dangerouslySetMaxHeight?: '30vh';
- zIndex?: Indexable;
- overflow?: Extract;
-};
-
-export default function InternalPopover({
- accessibilityLabel,
- accessibilityDismissButtonLabel,
- anchor,
- children,
- showDismissButton,
- onKeyDown,
- id,
- idealDirection,
- onDismiss,
- positionRelativeToAnchor = false,
- color = 'white',
- role,
- shouldFocus,
- showCaret,
- size = 'sm',
- __dangerouslySetMaxHeight,
- zIndex,
- overflow,
-}: Props): null | ReactNode {
- const { accessibilityDismissButtonLabel: accessibilityDismissButtonLabelDefault } =
- useDefaultLabelContext('Popover');
-
- const dismissButtonRef = useRef(null);
-
- useEffect(() => {
- dismissButtonRef.current?.focus();
- }, []);
-
- if (!anchor) {
- return null;
- }
-
- return (
-
- {showDismissButton ? (
-
-
- ' is not assignable to type 'LegacyRef | undefined'.
- ref={dismissButtonRef}
- accessibilityLabel={
- accessibilityDismissButtonLabel ?? accessibilityDismissButtonLabelDefault
- }
- iconColor={color === 'white' ? 'darkGray' : 'white'}
- onClick={onDismiss}
- size="xs"
- />
-
- {children}
-
- ) : (
- children
- )}
-
- );
-}
diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
index 2825cf524d..7e5acba5a0 100644
--- 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=""
/>
-