Dropdown: Remove experiment for alpha release (#3602)

pinterest · May 29, 2024 · 2c1e01e · 2c1e01e
1 parent c9734a0
commit 2c1e01e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 26 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 = {
-  Dropdown: ['web_gestalt_popover_v2_dropdown', 'mweb_gestalt_popover_v2_dropdown'],
   Popover: ['web_gestalt_popover_v2', 'mweb_gestalt_popover_v2'],
   Tooltip: ['web_gestalt_tooltip_v2', 'mweb_gestalt_tooltip_v2'],
 } as const;
@@ -32,7 +31,7 @@ function buildExperimentsObj(experiments: ReadonlyArray<string>) {
 export function useDocsExperiments(): Record<string, Experiment> {
   const { experiments } = useAppContext();
 
-  // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly Dropdown: readonly ["web_gestalt_popover_v2_dropdown", "mweb_gestalt_popover_v2_dropdown"]; readonly Popover: readonly ["web_gestalt_popover_v2", "mweb_gestalt_popover_v2"]; readonly Tooltip: readonly [...]; }'.
+  // @ts-expect-error - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly Dropdown: readonly Popover: readonly ["web_gestalt_popover_v2", "mweb_gestalt_popover_v2"]; readonly Tooltip: readonly [...]; }'.
   return buildExperimentsObj(!experiments ? [] : enabledExperiments[experiments] ?? []);
 }
 

diff --git a/docs/pages/web/dropdown.tsx b/docs/pages/web/dropdown.tsx
@@ -1,6 +1,5 @@
 import { BannerSlim } from 'gestalt';
 import AccessibilitySection from '../../docs-components/AccessibilitySection';
-import { BannerSlimExperiment } from '../../docs-components/BannerSlimExperiment';
 import { DocGen, multipleDocGen } from '../../docs-components/docgen';
 import GeneratedPropTable from '../../docs-components/GeneratedPropTable';
 import LocalizationSection from '../../docs-components/LocalizationSection';
@@ -38,13 +37,6 @@ export default function ComponentPage({
   return (
     <Page title={generatedDocGen.Dropdown?.displayName}>
       <PageHeader
-        bannerSlimExperiment={
-          <BannerSlimExperiment
-            componentName="Dropdown"
-            description="fix and improve underlying Popover component behavior. No visual updates"
-            pullRequest={3244}
-          />
-        }
         description={generatedDocGen?.Dropdown.description}
         name={generatedDocGen?.Dropdown.displayName}
       >

diff --git a/packages/gestalt/src/Dropdown.tsx b/packages/gestalt/src/Dropdown.tsx
@@ -9,9 +9,8 @@ import DropdownLink from './DropdownLink';
 import DropdownSection from './DropdownSection';
 import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from './keyCodes';
 import Layer from './Layer';
-import Popover from './Popover';
+import InternalPopover from './Popover/InternalPopover';
 import PartialPage from './SheetMobile/PartialPage';
-import useInExperiment from './useInExperiment';
 import { DirectionOptionType } from './utils/keyboardNavigation';
 import { Indexable } from './zIndex';
 
@@ -168,11 +167,6 @@ export default function Dropdown({
   mobileOnAnimationEnd,
   disableMobileUI = false,
 }: Props) {
-  const isInExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_popover_v2_dropdown',
-    mwebExperimentName: 'mweb_gestalt_popover_v2_dropdown',
-  });
-
   const [isPopoverPositioned, setIsPopoverPositioned] = useState(false);
   const deviceType = useDeviceType();
   const isMobile = deviceType === 'mobile';
@@ -188,7 +182,7 @@ export default function Dropdown({
   let selectedElement;
   const setOptionRef = (optionRef?: HTMLElement | null) => {
     // Prevent focusing on element until Popover is correctly positioned
-    if (isInExperiment && !isPopoverPositioned) return;
+    if (!isPopoverPositioned) return;
 
     selectedElement = optionRef;
     const linkElement = selectedElement?.getElementsByTagName('a')[0];
@@ -288,21 +282,19 @@ export default function Dropdown({
 
   const dropdown = (
     // @ts-expect-error - TS2786 - 'Popover' cannot be used as a JSX component.
-    <Popover
-      __dangerouslySetMaxHeight={maxHeight}
-      __experimentalPopover={isInExperiment}
-      __onPositioned={() => setIsPopoverPositioned(true)}
+    <InternalPopover
       accessibilityLabel="Dropdown"
       anchor={anchor}
       color="white"
-      disablePortal
+      disablePortal={isWithinFixedContainer}
       id={id}
       idealDirection={idealDirection}
       onDismiss={onDismiss}
       onKeyDown={onKeyDown}
-      positionRelativeToAnchor={isWithinFixedContainer}
+      onPositioned={() => setIsPopoverPositioned(true)}
       role="menu"
-      shouldFocus={false}
+      shouldFocus
+      showCaret={false}
       size="xl"
     >
       <Box
@@ -321,7 +313,7 @@ export default function Dropdown({
           {renderChildrenWithIndex(dropdownChildrenArray)}
         </DropdownContextProvider>
       </Box>
-    </Popover>
+    </InternalPopover>
   );
 
   // @ts-expect-error - TS2786 - 'Layer' cannot be used as a JSX component.

diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -7,7 +7,13 @@ 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
@@ -562,7 +568,13 @@ 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