Popover, PopoverEducational: VR adjusments (#3902)

pinterest · Dec 3, 2024 · 969f891 · 969f891
1 parent d818781
commit 969f891
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 14 deletions.
diff --git a/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap b/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json
@@ -336,6 +336,14 @@
           }
         }
       },
+      "popover": {
+        "primary": {
+          "value": "{sema.color.background.elevation.value}"
+        },
+        "education": {
+          "value": "{sema.color.background.education.value}"
+        }
+      },
       "searchguide": {
         "default": {
           "01": {
@@ -538,6 +546,14 @@
       "indicator": {
         "value": "{sema.color.border.inverse.value}"
       },
+      "popover": {
+        "primary": {
+          "value": "{sema.color.background.elevation.value}"
+        },
+        "education": {
+          "value": "{sema.color.background.education.value}"
+        }
+      },
       "switch": {
         "focus": {
           "inner": {

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
@@ -321,6 +321,14 @@
       "indicator": {
         "value": "{sema.color.background.primary.value}"
       },
+      "popover": {
+        "primary": {
+          "value": "{sema.color.background.elevation.value}"
+        },
+        "education": {
+          "value": "{sema.color.background.education.value}"
+        }
+      },
       "switch": {
         "default": {
           "unselected": {
@@ -523,6 +531,17 @@
       "indicator": {
         "value": "{sema.color.border.inverse.value}"
       },
+      "popover": {
+        "primary": {
+          "value": "#fff"
+        },
+        "secondary": {
+          "value": "#111"
+        },
+        "education": {
+          "value": "{sema.color.background.education.value}"
+        }
+      },
       "switch": {
         "default": {
           "unselected": {

diff --git a/packages/gestalt/src/Popover/InternalPopover.tsx b/packages/gestalt/src/Popover/InternalPopover.tsx
@@ -1,10 +1,12 @@
-import { ReactNode, useRef } from 'react';
+import { ReactNode } from 'react';
 import Controller from './Controller';
 import Box from '../Box';
 import { Overflow } from '../boxTypes';
 import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';
 import Flex from '../Flex';
+import InternalIconCompactButton from '../IconButton/InternalIconCompactButton';
 import InternalDismissButton from '../sharedSubcomponents/InternalDismissButton';
+import useInExperiment from '../useInExperiment';
 
 type Color = 'blue' | 'white' | 'darkGray';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'flexible' | number;
@@ -60,7 +62,10 @@ export default function InternalPopover({
   const { accessibilityDismissButtonLabel: accessibilityDismissButtonLabelDefault } =
     useDefaultLabelContext('Popover');
 
-  const dismissButtonRef = useRef<null | HTMLButtonElement>(null);
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
 
   if (!anchor) {
     return null;
@@ -92,15 +97,26 @@ export default function InternalPopover({
       {showDismissButton && (
         <Flex direction="column">
           <Box alignSelf="end" padding={2}>
-            <InternalDismissButton
-              ref={dismissButtonRef}
-              accessibilityLabel={
-                accessibilityDismissButtonLabel ?? accessibilityDismissButtonLabelDefault
-              }
-              iconColor={color === 'white' ? 'darkGray' : 'white'}
-              onClick={onDismiss}
-              size="xs"
-            />
+            {isInVRExperiment ? (
+              <InternalIconCompactButton
+                accessibilityLabel={
+                  accessibilityDismissButtonLabel ?? accessibilityDismissButtonLabelDefault
+                }
+                icon="compact-cancel"
+                iconColor="darkGray"
+                onClick={onDismiss}
+                size="sm"
+              />
+            ) : (
+              <InternalDismissButton
+                accessibilityLabel={
+                  accessibilityDismissButtonLabel ?? accessibilityDismissButtonLabelDefault
+                }
+                iconColor={color === 'white' ? 'darkGray' : 'white'}
+                onClick={onDismiss}
+                size="xs"
+              />
+            )}
           </Box>
         </Flex>
       )}

diff --git a/packages/gestalt/src/PopoverEducational.tsx b/packages/gestalt/src/PopoverEducational.tsx
@@ -6,6 +6,7 @@ import Flex from './Flex';
 import InternalPopover from './Popover/InternalPopover';
 import styles from './PopoverEducational.css';
 import Text from './Text';
+import useInExperiment from './useInExperiment';
 import { Indexable } from './zIndex';
 
 type Size = 'sm' | 'flexible';
@@ -38,6 +39,7 @@ function PrimaryAction(props: PrimaryActionType) {
       <ButtonLink
         accessibilityLabel={props.accessibilityLabel}
         color="white"
+        focusColor="darkBackground"
         fullWidth={false}
         href={props.href}
         onClick={props.onClick}
@@ -50,6 +52,7 @@ function PrimaryAction(props: PrimaryActionType) {
   return (
     <Button
       accessibilityLabel={props.accessibilityLabel}
+      backgroundContext="dark"
       color="white"
       fullWidth={false}
       onClick={props.onClick}
@@ -143,6 +146,11 @@ export default function PopoverEducational({
   zIndex,
   _experimentalVariant,
 }: Props) {
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   if (!anchor) {
     return null;
   }
@@ -184,7 +192,7 @@ export default function PopoverEducational({
         {children ??
           (message ? (
             <Box padding={4} tabIndex={0}>
-              <Flex direction="column" gap={3}>
+              <Flex direction="column" gap={isInVRExperiment ? 4 : 3}>
                 {textElement}
                 {primaryAction ? (
                   <Flex.Item alignSelf="end" flex="grow">

diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
@@ -3417,6 +3417,8 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #2e2e2d;
+  --color-background-popover-primary: #2e2e2d;
+  --color-background-popover-education: #7cbede;
   --color-background-searchguide-default-10: #6d4270;
   --color-background-searchguide-default-11: #000000;
   --color-background-searchguide-default-01: #007db8;
@@ -3477,6 +3479,8 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --color-border-checkbox-unchecked-error: #ff9494;
   --color-border-checkbox-unchecked-hover: #b2b0ae;
   --color-border-indicator: #000000;
+  --color-border-popover-primary: #2e2e2d;
+  --color-border-popover-education: #7cbede;
   --color-border-switch-focus-inner: #000000;
   --color-border-switch-focus-outer: #c5eaf7;
   --elevation-floating: 0px 4px 16px 0px rgba(0,0,0,0.2), 0px 1px 4px 0px rgba(0,0,0,0.2);
@@ -4421,6 +4425,8 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -4481,6 +4487,9 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -5426,6 +5435,8 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -5486,6 +5497,9 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -6431,6 +6445,8 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -6491,6 +6507,9 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -7436,6 +7455,8 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -7496,6 +7517,9 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -8441,6 +8465,8 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -8501,6 +8527,9 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -9446,6 +9475,8 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
   --color-background-indicator: #e60023;
+  --color-background-popover-primary: #ffffff;
+  --color-background-popover-education: #007db8;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -9506,6 +9537,9 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
   --color-border-indicator: #ffffff;
+  --color-border-popover-primary: #ffffff;
+  --color-border-popover-secondary: #111111;
+  --color-border-popover-education: #007db8;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;