IconButton: VR Certification Fixes

docs/examples/iconbutton/enabled.tsx

@@ -5,35 +5,35 @@ export default function Example() {
     <Flex alignItems="center" gap={8} height="100%" justifyContent="center" width="100%" wrap>
       <IconButton accessibilityLabel="Share" bgColor="gray" icon="share" label="gray" size="xl" />
       <IconButton
-        accessibilityLabel="Share"
+        accessibilityLabel="lightGray"
         bgColor="lightGray"
         icon="share"
         label="lightGray"
         size="xl"
       />
       <IconButton accessibilityLabel="Share" bgColor="red" icon="share" label="red" size="xl" />
       <IconButton
-        accessibilityLabel="Share"
+        accessibilityLabel="transparent"
         bgColor="transparent"
         icon="share"
-        label="red"
+        label="transparent"
         size="xl"
       />
       <IconButton
-        accessibilityLabel="Share"
+        accessibilityLabel="transparentDarkGray"
         bgColor="transparentDarkGray"
         icon="share"
         label="transparentDarkGray"
         size="xl"
       />
       <IconButton
-        accessibilityLabel="Share"
+        accessibilityLabel="washLight"
         bgColor="washLight"
         icon="share"
         label="washLight"
         size="xl"
       />
-      <IconButton accessibilityLabel="Share" bgColor="white" icon="share" label="white" size="xl" />
+      <IconButton accessibilityLabel="white" bgColor="white" icon="share" label="white" size="xl" />
     </Flex>
   );
 }

packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json

@@ -416,7 +416,12 @@
             "value": "#1f1f1f"
           },
           "disabled": {
-            "value": "{color.background.secondary.base.value}"
+            "default": {
+              "value": "{color.background.secondary.base.value}"
+            },
+            "selected": {
+              "value": "{color.background.secondary.base.value}"
+            }
           }
         }
       },

packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json

@@ -283,18 +283,25 @@
           }
         }
       },
-      "semitransparentdark": {
-        "default": {
-          "value": "{sema.color.background.wash.dark.value}"
-        },
-        "hover": {
-          "value": "{sema.color.hover.background.wash.dark.value}"
-        },
-        "active": {
-          "value": "{sema.color.pressed.background.wash.dark.value}"
-        },
-        "disabled": {
-          "value": "#00000064"
+      "iconbutton": {
+        "semitransparentdark": {
+          "default": {
+            "value": "{sema.color.background.wash.dark.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.wash.dark.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.wash.dark.value}"
+          },
+          "disabled": {
+            "default": {
+              "value": "#00000064"
+            },
+            "selected": {
+              "value": "{sema.color.background.disabled.value}"
+            }
+          }
         }
       },
       "switch": {

packages/gestalt/src/IconButton/InternalIconButton.css

@@ -31,6 +31,10 @@
   opacity: 0.5;
 }
 
+.disabledVr {
+  cursor: default;
+}
+
 .activeText div {
   /* Ensure the disabled color is used */
   /* stylelint-disable-next-line declaration-no-important */

packages/gestalt/src/IconButton/InternalIconButton.tsx

@@ -8,6 +8,7 @@ import touchableStyles from '../TapArea.css';
 import TextUI from '../TextUI';
 import Tooltip from '../Tooltip';
 import useFocusVisible from '../useFocusVisible';
+import useInExperiment from '../useInExperiment';
 import useTapFeedback from '../useTapFeedback';
 import { Indexable } from '../zIndex';
 
@@ -86,6 +87,10 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
   // that renders <IconButton ref={inputRef} /> to call inputRef.current.focus()
   // @ts-expect-error - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLButtonElement'.
   useImperativeHandle(ref, () => innerRef.current);
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
 
   const {
     compressStyle,
@@ -121,7 +126,8 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
   });
 
   const divStyles = classnames(styles.button, touchableStyles.tapTransition, {
-    [styles.disabled]: disabled,
+    [styles.disabled]: disabled && !isInVRExperiment,
+    [styles.disabledVr]: disabled && isInVRExperiment,
     [styles.enabled]: !disabled,
     [touchableStyles.tapCompress]: !disabled && isTapping,
   });
@@ -172,6 +178,7 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
           active={!disabled && isActive}
           bgColor={bgColor}
           dangerouslySetSvgPath={dangerouslySetSvgPath}
+          disabled={disabled}
           focusColor={focusColor}
           focused={!disabled && isFocusVisible && isFocused}
           hovered={!disabled && isHovered}

packages/gestalt/src/Pog.css

@@ -28,6 +28,10 @@
   border-radius: var(--rounding-400);
 }
 
+.rounding500 {
+  border-radius: var(--rounding-500);
+}
+
 .roundingCircle {
   border-radius: var(--rounding-circle);
 }
@@ -75,6 +79,10 @@
 
 /* COLORS */
 
+.semitransparent svg {
+  opacity: 0.4;
+}
+
 .red {
   background-color: var(--color-background-button-primary-default);
 }
@@ -208,7 +216,13 @@
 
 .transparentDarkGray.disabled {
   background-color: var(
-    --color-background-iconbutton-semitransparentdark-disabled
+    --color-background-iconbutton-semitransparentdark-disabled-default
+  );
+}
+
+.transparentDarkGray.disabled.selected {
+  background-color: var(
+    --color-background-iconbutton-semitransparentdark-disabled-selected
   );
 }
 

packages/gestalt/src/Pog.tsx

@@ -65,7 +65,7 @@ type Props = {
   /**
    * See the [rounding](https://gestalt.pinterest.systems/web/pog#Rounding) variant for more info.
    */
-  rounding?: '0' | '100' | '200' | '300' | '400' | 'circle';
+  rounding?: '0' | '100' | '200' | '300' | '400' | '500' | 'circle';
   /**
    * Indicate if Pog is in a selected state. See [States](https://gestalt.pinterest.systems/web/pog#States) for more details.
    */
@@ -111,7 +111,7 @@ export default function Pog({
         xs: 6,
         sm: 6,
         md: 10,
-        lg: 14,
+        lg: 12,
         xl: 20,
       }
     : {
@@ -138,6 +138,7 @@ export default function Pog({
     light: 'light',
     red: 'error',
     white: 'inverse',
+    disabled: 'disabled',
   } as const;
 
   const defaultIconButtonIconColors = {
@@ -169,6 +170,7 @@ export default function Pog({
     [styles.rounding200]: rounding === '200',
     [styles.rounding300]: rounding === '300',
     [styles.rounding400]: rounding === '400',
+    [styles.rounding500]: rounding === '500',
     [styles.roundingCircle]: !rounding || rounding === 'circle',
     [styles[bgColor]]: !selected,
     [styles.selected]: selected,
@@ -177,12 +179,13 @@ export default function Pog({
     [styles.hovered]: hovered && !focused && !active,
   });
 
-  const vrClasses = classnames(styles.pog, styles[size], {
+  const vrClasses = classnames(styles.pog, styles[size as keyof typeof styles], {
     [styles.rounding0]: rounding === '0',
     [styles.rounding100]: (!rounding && size === 'xs') || rounding === '100',
     [styles.rounding200]: (!rounding && size === 'sm') || rounding === '200',
     [styles.rounding300]: (!rounding && size === 'md') || rounding === '300',
-    [styles.rounding400]: (!rounding && (size === 'lg' || size === 'xl')) || rounding === '400',
+    [styles.rounding400]: (!rounding && size === 'lg') || rounding === '400',
+    [styles.rounding500]: (!rounding && size === 'xl') || rounding === '500',
     [styles.roundingCircle]: rounding === 'circle',
     [styles[bgColor]]: !selected,
     [styles.disabled]: disabled && !selected,
@@ -198,13 +201,33 @@ export default function Pog({
     [styles.darkInnerFocus]:
       focused && (bgColor === 'washLight' || focusColor === 'darkBackground'),
     [styles.hovered]: hovered && !active,
+    // Opacity of 40% should only apply to disabled unselected states, when the icon is white or light
+    [styles.semitransparent]:
+      (bgColor === 'transparentDarkGray' ||
+        bgColor === 'transparent' ||
+        bgColor === 'transparentDarkBackground' ||
+        bgColor === 'washLight') &&
+      (color === 'white' || color === 'light') &&
+      disabled &&
+      !selected,
   });
 
   return (
     <div className={isInVRExperiment ? vrClasses : classes} style={inlineStyle}>
       <Icon
         accessibilityLabel={accessibilityLabel || ''}
-        color={OLD_TO_NEW_COLOR_MAP[color]}
+        color={
+          isInVRExperiment &&
+          // Disabled icons should always use the disabled token, except for washLight and transparentDarkGray with white or light icons when unselected
+          disabled &&
+          !(
+            !selected &&
+            (bgColor === 'washLight' || bgColor === 'transparentDarkGray') &&
+            (color === 'white' || color === 'light')
+          )
+            ? 'disabled'
+            : OLD_TO_NEW_COLOR_MAP[color]
+        }
         dangerouslySetSvgPath={dangerouslySetSvgPath}
         icon={icon}
         size={iconSizeInPx}

packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap

@@ -777,7 +777,8 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
   --color-background-iconbutton-semitransparentdark-default: rgba(51, 51, 51, 0.8);
   --color-background-iconbutton-semitransparentdark-hover: #121212;
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
-  --color-background-iconbutton-semitransparentdark-disabled: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -1294,7 +1295,8 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
   --color-background-iconbutton-semitransparentdark-default: rgba(51, 51, 51, 0.8);
   --color-background-iconbutton-semitransparentdark-hover: #121212;
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
-  --color-background-iconbutton-semitransparentdark-disabled: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -1811,7 +1813,8 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
   --color-background-iconbutton-semitransparentdark-default: rgba(51, 51, 51, 0.8);
   --color-background-iconbutton-semitransparentdark-hover: #121212;
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
-  --color-background-iconbutton-semitransparentdark-disabled: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
+  --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -4367,10 +4370,11 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -5361,10 +5365,11 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -6355,10 +6360,11 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -7349,10 +7355,11 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -8343,10 +8350,11 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -9337,10 +9345,11 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-background-datepicker-button-selected-default: #000000;
   --color-background-datepicker-button-selected-hover: #242423;
   --color-background-datepicker-button-selected-active: #393937;
-  --color-background-semitransparentdark-default: rgba(0, 0, 0, 0.8);
-  --color-background-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
-  --color-background-semitransparentdark-active: rgba(57, 57, 55, 0.9);
-  --color-background-semitransparentdark-disabled: rgba(0, 0, 0, 0.39);
+  --color-background-iconbutton-semitransparentdark-default: rgba(0, 0, 0, 0.8);
+  --color-background-iconbutton-semitransparentdark-hover: rgba(36, 36, 35, 0.85);
+  --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: #e8e7e1;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;