Internal: refactor experimental theme consumption (#4056)

Author: AlbertCarreras

docs/docs-components/DocsVisualRefreshTypographyStyle.tsx

@@ -1,14 +1,11 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable gestalt/only-valid-tokens */
-import { useDangerouslyInGestaltExperiment } from 'gestalt';
+import { useExperimentalTheme } from 'gestalt';
 
 export default function DocsVisualRefreshTypographyStyle() {
-  const isInExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
 
-  return isInExperiment ? (
+  return theme.MAIN ? (
     <style
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{

docs/docs-components/Header.tsx

@@ -12,7 +12,7 @@ import {
   Sticky,
   Tabs,
   Text,
-  useDangerouslyInGestaltExperiment,
+  useExperimentalTheme,
 } from 'gestalt';
 import { useAppContext } from './appContext';
 import trackButtonClick from './buttons/trackButtonClick';
@@ -39,23 +39,14 @@ function getTabs(componentPlatform: 'web' | 'android' | 'ios') {
 }
 
 function Header() {
+  const theme = useExperimentalTheme();
   const router = useRouter();
   const { isSidebarOpen, setIsSidebarOpen, componentPlatformFilteredBy } = useNavigationContext();
   const [isMobileSearchExpandedOpen, setMobileSearchExpanded] = useState(false);
   const [showVRToggle, setShowVRToggle] = useState(false);
 
   const searchAnchorRef = useRef<null | HTMLButtonElement | HTMLAnchorElement>(null);
 
-  const isInVRExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
-
-  const isInCalico01Experiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_calico01',
-    mwebExperimentName: 'web_gestalt_calico01',
-  });
-
   const { setExperiments, experiments } = useAppContext();
 
   const mainNavigationTabs = useMemo(
@@ -90,8 +81,8 @@ function Header() {
   );
 
   useEffect(() => {
-    if (isInVRExperiment || isInCalico01Experiment) setShowVRToggle(true);
-  }, [isInVRExperiment, isInCalico01Experiment]);
+    if (theme.MAIN) setShowVRToggle(true);
+  }, [theme]);
 
   useEffect(() => {
     const isDeployPreviewEnvironment =

docs/docs-components/contexts/DocsExperimentProvider.tsx

@@ -10,12 +10,7 @@ import { useAppContext } from '../appContext';
 
 const enabledExperiments = {
   VR01Tokens: ['web_gestalt_visualrefresh', 'web_gestalt_visualrefresh'],
-  CA01Tokens: [
-    'web_gestalt_calico01',
-    'web_gestalt_calico01',
-    'web_gestalt_visualrefresh',
-    'web_gestalt_visualrefresh',
-  ],
+  CA01Tokens: ['web_gestalt_calico01', 'web_gestalt_calico01'],
 } as const;
 
 type ExperimentKey = keyof typeof enabledExperiments;

packages/gestalt-charts/src/ChartGraph/BarLabel.tsx

@@ -1,4 +1,4 @@
-import { useDangerouslyInGestaltExperiment } from 'gestalt';
+import { useExperimentalTheme } from 'gestalt';
 import { TOKEN_COLOR_ICON_INFO, TOKEN_COLOR_TEXT_DEFAULT } from 'gestalt-design-tokens';
 import InlineStyle from './InlineStyle';
 
@@ -19,18 +19,15 @@ function BarLabel({
   width: number;
   height: number;
 }) {
-  const isInVRExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
 
   let dPath;
   let VRdPathVR;
 
   if (icon === 'ribbon') {
-    VRdPathVR =
-      'M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6m7.96 1.21a9 9 0 1 0-15.91 0L2.32 19.6a2.27 2.27 0 0 0 2.91 2.74l1.76-.6 1.07 1.3a2.26 2.26 0 0 0 3.92-.84l.01-.04.01.04a2.26 2.26 0 0 0 3.92.85l1.07-1.3 1.76.59a2.27 2.27 0 0 0 2.9-2.74zm-2.35 2.83.8 3.02-2.41-.8-1.47 1.77-.6-2.24q2.07-.46 3.68-1.75m-7.55 1.75-.6 2.24L8 18.25l-2.42.8.81-3.01a9 9 0 0 0 3.67 1.75M6 9a6 6 0 1 1 12 0A6 6 0 0 1 6 9';
     dPath =
+      'M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6m7.96 1.21a9 9 0 1 0-15.91 0L2.32 19.6a2.27 2.27 0 0 0 2.91 2.74l1.76-.6 1.07 1.3a2.26 2.26 0 0 0 3.92-.84l.01-.04.01.04a2.26 2.26 0 0 0 3.92.85l1.07-1.3 1.76.59a2.27 2.27 0 0 0 2.9-2.74zm-2.35 2.83.8 3.02-2.41-.8-1.47 1.77-.6-2.24q2.07-.46 3.68-1.75m-7.55 1.75-.6 2.24L8 18.25l-2.42.8.81-3.01a9 9 0 0 0 3.67 1.75M6 9a6 6 0 1 1 12 0A6 6 0 0 1 6 9';
+    VRdPathVR =
       'M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10M9 9a3 3 0 1 1 6 0 3 3 0 0 1-6 0m10.48 5a9 9 0 1 0-14.97 0l-1.7 6.4a1.7 1.7 0 0 0 2.5 1.92l1.94-1.12 1.12 1.95a1.7 1.7 0 0 0 3.12-.42l.51-1.88.5 1.88a1.7 1.7 0 0 0 3.13.42l1.12-1.95 1.95 1.12a1.7 1.7 0 0 0 2.5-1.92zM5 9a7 7 0 1 1 14 0A7 7 0 0 1 5 9m14.08 11.24-3.06-1.77-1.77 3.06-.97-3.62c1.75-.25 3.34-1 4.61-2.1zm-9.33 1.3-1.77-3.07-3.06 1.77L6.1 15.8a9 9 0 0 0 4.6 2.1z';
   }
 
@@ -66,7 +63,7 @@ function BarLabel({
 "
       />
       <text
-        className={isInVRExperiment ? 'VRbodySM' : 'bodySM'}
+        className={theme.MAIN ? 'VRbodySM' : 'bodySM'}
         fill={TOKEN_COLOR_TEXT_DEFAULT}
         textAnchor={icon ? undefined : 'middle'}
         x={layout === 'vertical' ? xHorizontalPosText : xVerticalPosText}
@@ -85,7 +82,7 @@ function BarLabel({
           x={layout === 'vertical' ? xHorizontalPosIcon : xVerticalPosIcon}
           y={layout === 'vertical' ? yHorizontalPosIcon : yVerticalPosIcon}
         >
-          <path d={isInVRExperiment ? dPath : VRdPathVR} />
+          <path d={theme.MAIN ? VRdPathVR : dPath} />
         </svg>
       )}
     </g>

packages/gestalt-datepicker/src/DateField.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Locale } from 'date-fns/locale';
-import { useDangerouslyInGestaltExperiment, useGlobalEventsHandler } from 'gestalt';
+import { useExperimentalTheme, useGlobalEventsHandler } from 'gestalt';
 import InternalDateField from './DateField/InternalDateField';
 import VRInternalDateField from './DateField/VRInternalDateField';
 
@@ -127,16 +127,13 @@ function DateField({
     dateFieldHandlers: undefined,
   };
 
-  const isInVRExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
 
   useEffect(() => {
     if (dateFieldHandlers?.onRender) dateFieldHandlers?.onRender();
   }, [dateFieldHandlers]);
 
-  if (isInVRExperiment) {
+  if (theme.MAIN) {
     return (
       <VRInternalDateField
         autoComplete={autoComplete}

packages/gestalt-datepicker/src/DatePicker/DateInput.tsx

@@ -1,12 +1,5 @@
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import {
-  Box,
-  Icon,
-  TapArea,
-  TextField,
-  useDangerouslyInGestaltExperiment,
-  useDefaultLabel,
-} from 'gestalt';
+import { Box, Icon, TapArea, TextField, useDefaultLabel, useExperimentalTheme } from 'gestalt';
 import VRDateInput from './VRDateInput';
 import styles from '../DatePicker.css';
 
@@ -63,12 +56,9 @@ const DateInputWithForwardRef = forwardRef<HTMLInputElement, Props>(function Dat
   useImperativeHandle(ref, () => innerRef.current);
   const { openCalendar } = useDefaultLabel('DatePicker');
 
-  const isInVRExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
 
-  if (isInVRExperiment) {
+  if (theme.MAIN) {
     return (
       <VRDateInput
         ref={innerRef}

packages/gestalt-datepicker/src/DatePicker/InternalDatePicker.tsx

@@ -9,14 +9,7 @@ import {
 } from 'react';
 import ReactDatePicker, { registerLocale } from 'react-datepicker';
 import { limitShift, shift } from '@floating-ui/react';
-import {
-  Box,
-  Icon,
-  Label,
-  Text,
-  useDangerouslyInGestaltExperiment,
-  useDefaultLabel,
-} from 'gestalt';
+import { Box, Icon, Label, Text, useDefaultLabel, useExperimentalTheme } from 'gestalt';
 import DateInput from './DateInput';
 import { Props } from '../DatePicker';
 import styles from '../DatePicker.css';
@@ -73,10 +66,7 @@ const InternalDatePickerWithForwardRef = forwardRef<HTMLInputElement, InternalPr
 
     const { nextMonth, previousMonth } = useDefaultLabel('DatePicker');
 
-    const isInVRExperiment = useDangerouslyInGestaltExperiment({
-      webExperimentName: 'web_gestalt_visualrefresh',
-      mwebExperimentName: 'web_gestalt_visualrefresh',
-    });
+    const theme = useExperimentalTheme();
     // This state is only used if the component is uncontrolled or value === undefined. If uncontrolled, DatePicker manages the selected Date value internally
     const [uncontrolledValue, setUncontrolledValue] = useState<Date | null | undefined>(null);
     // We keep month in state to trigger a re-render when month changes since height will vary by where days fall
@@ -120,7 +110,7 @@ const InternalDatePickerWithForwardRef = forwardRef<HTMLInputElement, InternalPr
 
     return (
       <div className="_gestalt">
-        {label && !isInVRExperiment && !inline && (
+        {label && !theme.MAIN && !inline && (
           <Label htmlFor={id}>
             <Box marginBottom={2}>
               <Text size="100">{label}</Text>

packages/gestalt/src/Avatar/Foundation.tsx

@@ -8,7 +8,7 @@ import Box from '../Box';
 import { useColorScheme } from '../contexts/ColorSchemeProvider';
 import icons from '../icons/index';
 import vrIcons from '../icons-vr-theme/index';
-import useInExperiment from '../useInExperiment';
+import useExperimentalTheme from '../utils/useExperimentalTheme';
 
 const ICON_SIZE_RATIO = (20 / 48) * 100; // For pixel perfect icon button, we use the icon (20px) to parent container (48px) size ratio
 
@@ -31,10 +31,7 @@ function ResponsiveFitSizeBox({
   isPressed,
   outline,
 }: ResponsiveFitSizeBoxProps) {
-  const isInVRExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
 
   const { colorSchemeName } = useColorScheme();
   const isDarkMode = colorSchemeName === 'darkMode';
@@ -44,11 +41,11 @@ function ResponsiveFitSizeBox({
       ? getAvatarColorToken('default', isHovered, isPressed, isDarkMode)
       : getAvatarColorToken(color || 'default', isHovered, isPressed, isDarkMode);
 
-  return isInVRExperiment ? (
+  return theme.MAIN ? (
     <div
       className={classnames({
         [avatarStyles.container]: true,
-        [avatarStyles.outlineVR]: isInVRExperiment && outline,
+        [avatarStyles.outlineVR]: theme.MAIN && outline,
       })}
       role="button"
       style={{
@@ -114,10 +111,7 @@ export default function AvatarFoundation({
   translate,
   content = 'text',
 }: AvatarFoundationProps) {
-  const isInVRExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
   const { colorSchemeName } = useColorScheme();
   const isDarkMode = colorSchemeName === 'darkMode';
 
@@ -134,7 +128,7 @@ export default function AvatarFoundation({
         <svg
           preserveAspectRatio="xMidYMid meet"
           version="1.1"
-          viewBox={isInVRExperiment ? '-25 -25 50 50' : '-50 -50 100 100'}
+          viewBox={theme.MAIN ? '-25 -25 50 50' : '-50 -50 100 100'}
           width="100%"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -143,13 +137,13 @@ export default function AvatarFoundation({
             className={classnames(
               translate && avatarGroupStyles[translate], // if addCollaborator button is present, translateX moves numbers closer to the edge
               {
-                [avatarStyles.text]: !isInVRExperiment,
-                [avatarStyles.vrText]: isInVRExperiment,
+                [avatarStyles.text]: !theme.MAIN,
+                [avatarStyles.vrText]: theme.MAIN,
               },
             )}
             dy="0.35em"
             fill={TOKEN_COLOR_TEXT_DEFAULT}
-            fontSize={!isInVRExperiment ? fontSize : undefined}
+            fontSize={!theme.MAIN ? fontSize : undefined}
             textAnchor={textAnchor}
           >
             {children}
@@ -160,8 +154,8 @@ export default function AvatarFoundation({
         <svg
           className={classnames({
             [avatarStyles.icon]: true,
-            [avatarStyles.iconFillDefault]: isInVRExperiment && !isDarkMode,
-            [avatarStyles.iconFillDarkMode]: isInVRExperiment && isDarkMode,
+            [avatarStyles.iconFillDefault]: theme.MAIN && !isDarkMode,
+            [avatarStyles.iconFillDarkMode]: theme.MAIN && isDarkMode,
           })}
           preserveAspectRatio="xMidYMid meet" // percentual width to the parent container, reduces icon to 20px on a 48px parent container and keeps proportions upon resizing
           role="img" // full icon size
@@ -171,7 +165,7 @@ export default function AvatarFoundation({
           xmlns="http://www.w3.org/2000/svg"
         >
           <title>Icon</title>
-          <path d={(isInVRExperiment ? vrIcons : icons)['person-add']} />
+          <path d={(theme.MAIN ? vrIcons : icons)['person-add']} />
         </svg>
       ) : null}
     </ResponsiveFitSizeBox>

packages/gestalt/src/Avatar/InternalAvatar.tsx

@@ -12,7 +12,7 @@ import Icon from '../Icon';
 import IconCompact from '../IconCompact';
 import Image from '../Image';
 import Mask from '../Mask';
-import useInExperiment from '../useInExperiment';
+import useExperimentalTheme from '../utils/useExperimentalTheme';
 
 const sizes = {
   xs: 24,
@@ -44,10 +44,7 @@ type Props = {
 };
 
 function InternalAvatar(props: Props) {
-  const isInVRExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
+  const theme = useExperimentalTheme();
   const {
     accessibilityLabel,
     color,
@@ -68,7 +65,7 @@ function InternalAvatar(props: Props) {
     xs: TOKEN_SPACE_0,
     sm: TOKEN_SPACE_0,
     md: TOKEN_SPACE_0,
-    lg: isInVRExperiment ? 'var(--sema-space-50)' : '2px',
+    lg: theme.MAIN ? 'var(--sema-space-50)' : '2px',
     xl: '5px',
     fit: TOKEN_SPACE_0,
   } as const;
@@ -78,7 +75,7 @@ function InternalAvatar(props: Props) {
       dangerouslySetInlineStyle={{
         __style: outline
           ? {
-              outline: isInVRExperiment
+              outline: theme.MAIN
                 ? '1px solid var(--sema-color-border-inverse)'
                 : '1px solid rgb(255 255 255)',
             }
@@ -94,8 +91,8 @@ function InternalAvatar(props: Props) {
         <Mask rounding="circle" wash>
           <div
             className={classnames({
-              [avatarStyles.imageHovered]: isInVRExperiment && isHovered,
-              [avatarStyles.imagePressed]: isInVRExperiment && isPressed,
+              [avatarStyles.imageHovered]: theme.MAIN && isHovered,
+              [avatarStyles.imagePressed]: theme.MAIN && isPressed,
             })}
           >
             <Image
@@ -127,7 +124,7 @@ function InternalAvatar(props: Props) {
                 ? {
                     bottom: verifiedIconPadding[size],
                     right: verifiedIconPadding[size],
-                    outline: isInVRExperiment
+                    outline: theme.MAIN
                       ? '1px solid var(--sema-color-background-default)'
                       : `1px solid ${TOKEN_COLOR_BACKGROUND_DEFAULT}`,
                   }