WIP

pinterest · Jan 14, 2025 · 7a2ed76 · 7a2ed76
1 parent 16a97df
commit 7a2ed76
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 48 deletions.
diff --git a/docs/examples/spinner/variantGrayscale.tsx b/docs/examples/spinner/variantGrayscale.tsx
@@ -0,0 +1,12 @@
+import { Box, Flex, Spinner, useReducedMotion } from 'gestalt';
+
+export default function Example() {
+  const reduced = useReducedMotion();
+  return (
+    <Box height="100%" width="100%">
+      <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
+        <Spinner color="grayscale" show={!reduced} />
+      </Flex>
+    </Box>
+  );
+}
diff --git a/docs/examples/spinner/variantWhite.tsx b/docs/examples/spinner/variantWhite.tsx
@@ -0,0 +1,12 @@
+import { Box, Flex, Spinner, useReducedMotion } from 'gestalt';
+
+export default function Example() {
+  const reduced = useReducedMotion();
+  return (
+    <Box color="inverse" height="100%" width="100%">
+      <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
+        <Spinner color="white" show={!reduced} />
+      </Flex>
+    </Box>
+  );
+}
diff --git a/docs/pages/web/spinner.tsx b/docs/pages/web/spinner.tsx
@@ -1,3 +1,5 @@
+import { useAppContext } from 'docs/docs-components/appContext';
+import { useExperimentContext } from 'packages/gestalt/src/contexts/ExperimentProvider';
 import AccessibilitySection from '../../docs-components/AccessibilitySection';
 import docGen, { DocGen } from '../../docs-components/docgen';
 import GeneratedPropTable from '../../docs-components/GeneratedPropTable';
@@ -16,8 +18,13 @@ import doOverlay from '../../examples/spinner/doOverlay';
 import doWait from '../../examples/spinner/doWait';
 import localizationLabels from '../../examples/spinner/localizationLabels';
 import main from '../../examples/spinner/main';
+import variantGrayscale from '../../examples/spinner/variantGrayscale';
+import variantWhite from '../../examples/spinner/variantWhite';
 
 export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
+  const { experiments } = useAppContext();
+  const isVREnabled = experiments === 'Tokens';
+
   return (
     <Page title={generatedDocGen?.displayName}>
       <PageHeader description={generatedDocGen?.description} name={generatedDocGen?.displayName}>
@@ -163,6 +170,31 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen
             sandpackExample={<SandpackExample code={delay} name="Delay variant" />}
           />
         </MainSection.Subsection>
+
+        {isVREnabled && (
+          <MainSection.Subsection
+            columns={2}
+            description={`
+    By default, Spinner has color-change animation. Non-default color variant are \`grayscale\` and \`white\`.
+  `}
+            title="Colors"
+          >
+            <MainSection.Card
+              cardSize="lg"
+              sandpackExample={
+                <SandpackExample code={variantGrayscale} layout="column" name="Delay variant" />
+              }
+              title="Grayscale"
+            />
+            <MainSection.Card
+              cardSize="lg"
+              sandpackExample={
+                <SandpackExample code={variantWhite} layout="column" name="Delay variant" />
+              }
+              title="White"
+            />
+          </MainSection.Subsection>
+        )}
       </MainSection>
 
       <QualityChecklist component={generatedDocGen?.displayName} />

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json b/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json
@@ -1,18 +1,6 @@
 {
   "comp": {
     "spinner": {
-      "grayscale": {
-        "background": {
-          "type": "color",
-          "value": "{base.color.grayscale.350}"
-        }
-      },
-      "white": {
-        "background": {
-          "type": "color",
-          "value": "{sema.color.background.light}"
-        }
-      },
       "color": {
         "background": {
           "1": {

diff --git a/packages/gestalt/src/Spinner.tsx b/packages/gestalt/src/Spinner.tsx
@@ -1,4 +1,3 @@
-import { ComponentProps } from 'react';
 import classnames from 'classnames';
 import Box from './Box';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
@@ -10,6 +9,7 @@ import useInExperiment from './useInExperiment';
 const SIZE_NAME_TO_PIXEL = {
   sm: 32,
   md: 40,
+  lg: 56,
 } as const;
 
 type Props = {
@@ -30,9 +30,9 @@ type Props = {
    */
   show: boolean;
   /**
-   * sm: 32px, md: 40px
+   * sm: 32px, md: 40px, lg: 56px. 'lg' is available only in Visual Refresh experiment.
    */
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
 };
 
 /**
@@ -59,11 +59,12 @@ export default function Spinner({
     return (
       <VRSpinner
         accessibilityLabel={accessibilityLabel}
-        // Casting color type as classic and VR color variants types conflict.
-        color={color as ComponentProps<typeof VRSpinner>['color']}
+        // 'subtle' maps to 'default' as it is not a VR color variant
+        color={color === 'subtle' ? 'default' : color}
         delay={delay}
         show={show}
-        size={size}
+        // 'md' maps to 'lg' as it doesn't exist in VR Spinner
+        size={size === 'md' ? 'lg' : size}
       />
     );
   }

diff --git a/packages/gestalt/src/Spinner/VRSpinner.css b/packages/gestalt/src/Spinner/VRSpinner.css
@@ -59,16 +59,6 @@ svg * {
     calc(var(--g-enter-delay) + 300ms);
 }
 
-.spinner.grayscale circle {
-  animation-name: scale, none, dot-intro;
-  fill: var(--comp-spinner-grayscale-background);
-}
-
-.spinner.white circle {
-  animation-name: scale, none, dot-intro;
-  fill: var(--comp-spinner-white-background);
-}
-
 @keyframes dot-intro {
   from {
     transform: translate(var(--g-start-x), var(--g-start-y)) scale(0);

diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx
@@ -1,20 +1,20 @@
 import { useEffect, useState } from 'react';
 import classnames from 'classnames';
+import vrLightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme/variables-light.json';
 import styles from './VRSpinner.css';
 import Box from '../Box';
 import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';
 
 const SIZE_NAME_TO_PIXEL = {
   sm: 32,
-  md: 40,
   lg: 56,
 } as const;
 
 type SpinnerBodyProps = {
   accessibilityLabel: string;
   delay: boolean;
   show: boolean;
-  size: 'sm' | 'md' | 'lg';
+  size: 'sm' | 'lg';
   color: 'default' | 'grayscale' | 'white';
   onExitAnimationEnd: () => void;
 };
@@ -27,20 +27,30 @@ function SpinnerBody({
   color,
   onExitAnimationEnd,
 }: SpinnerBodyProps) {
+  const colorWhite = color === 'white' && vrLightDesignTokens['sema-color-background-light'];
+  const colorGrayscale = color === 'grayscale' && vrLightDesignTokens['base-color-grayscale-350'];
+  const colorValue = colorWhite || colorGrayscale;
+  const spinnerColor = colorValue
+    ? ({
+        '--comp-spinner-color-background-1': colorValue,
+        '--comp-spinner-color-background-2': colorValue,
+        '--comp-spinner-color-background-3': colorValue,
+      } as React.CSSProperties)
+    : {};
+
   return (
     <Box display="flex" justifyContent="around">
       <div
         aria-label={accessibilityLabel}
         className={classnames(styles.spinner, {
           [styles.exit]: !show,
-          [styles.grayscale]: color === 'grayscale',
-          [styles.white]: color === 'white',
         })}
         onAnimationEnd={onExitAnimationEnd}
         style={
           {
             '--g-enter-delay': delay ? '300ms' : undefined,
             '--g-size': `${SIZE_NAME_TO_PIXEL[size]}px`,
+            ...spinnerColor,
           } as React.CSSProperties
         }
       >
@@ -73,15 +83,15 @@ type Props = {
   accessibilityLabel?: string;
   delay?: boolean;
   show: boolean;
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'lg';
   color?: 'default' | 'grayscale' | 'white';
 };
 
 export default function Spinner({
   accessibilityLabel,
   delay = true,
   show: showProp,
-  size = 'md',
+  size = 'lg',
   color = 'default',
 }: Props) {
   const [show, setShow] = useState(showProp);

diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
@@ -3136,8 +3136,6 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -4148,8 +4146,6 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -5160,8 +5156,6 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -6172,8 +6166,6 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -7184,8 +7176,6 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -8196,8 +8186,6 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -9208,8 +9196,6 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
-  --comp-spinner-grayscale-background: #4c4c4a;
-  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;