feat(LoadingIndicator): update stroke width in Button (#1964)

- add LoadingIndicator 2.0 to buton - update stroke width for xs and sm usages - adjustments to viewport to match stroke changes
chanzuckerberg · May 24, 2024 · bac3594 · bac3594
1 parent 26faab7
commit bac3594
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 43 deletions.
diff --git a/src/components/Button/Button-v2.tsx b/src/components/Button/Button-v2.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import type { Size } from '../../util/variant-types';
 import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import LoadingIndicator from '../LoadingIndicator';
+import { LoadingIndicatorV2 as LoadingIndicator } from '../LoadingIndicator';
 
 import styles from './Button-v2.module.css';
 
@@ -157,7 +157,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonV2Props>(
           )}
         </span>
         {isLoading && (
-          <LoadingIndicator className={styles['button__loader']} size="sm" />
+          <LoadingIndicator className={styles['button__loader']} size="xs" />
         )}
       </button>
     );

diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
@@ -306,10 +306,10 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
     >
       <svg
         data-testid="oval-svg"
-        height="24"
+        height="16"
         stroke="transparent"
-        viewBox="-20 -20 42 42"
-        width="24"
+        viewBox="-22 -22 46 46"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g
@@ -318,7 +318,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
         >
           <g
             data-testid="oval-secondary-group"
-            stroke-width="2"
+            stroke-width="4"
             transform="translate(1 1)"
           >
             <circle
@@ -327,7 +327,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
               r="20"
               stroke="transparent"
               stroke-opacity=".5"
-              stroke-width="2"
+              stroke-width="4"
             />
             <path
               d="M20 0c0-9.94-8.06-20-20-20"
@@ -364,10 +364,10 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
     >
       <svg
         data-testid="oval-svg"
-        height="24"
+        height="16"
         stroke="transparent"
-        viewBox="-20 -20 42 42"
-        width="24"
+        viewBox="-22 -22 46 46"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g
@@ -376,7 +376,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
         >
           <g
             data-testid="oval-secondary-group"
-            stroke-width="2"
+            stroke-width="4"
             transform="translate(1 1)"
           >
             <circle
@@ -385,7 +385,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
               r="20"
               stroke="transparent"
               stroke-opacity=".5"
-              stroke-width="2"
+              stroke-width="4"
             />
             <path
               d="M20 0c0-9.94-8.06-20-20-20"
@@ -422,10 +422,10 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
     >
       <svg
         data-testid="oval-svg"
-        height="24"
+        height="16"
         stroke="transparent"
-        viewBox="-20 -20 42 42"
-        width="24"
+        viewBox="-22 -22 46 46"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g
@@ -434,7 +434,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
         >
           <g
             data-testid="oval-secondary-group"
-            stroke-width="2"
+            stroke-width="4"
             transform="translate(1 1)"
           >
             <circle
@@ -443,7 +443,7 @@ exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
               r="20"
               stroke="transparent"
               stroke-opacity=".5"
-              stroke-width="2"
+              stroke-width="4"
             />
             <path
               d="M20 0c0-9.94-8.06-20-20-20"

diff --git a/src/components/LoadingIndicator/LoadingIndicator-v2.tsx b/src/components/LoadingIndicator/LoadingIndicator-v2.tsx
@@ -37,18 +37,18 @@ const loaderSize = {
 
 // Given a loader size, the stroke widths can change
 const loaderStrokeSize = {
-  xs: 2,
-  sm: 2,
-  md: 3,
+  xs: 4,
+  sm: 4,
+  md: 4,
   lg: 4,
 };
 
 // The viewport changes based on adjustments to handle the stroke width
 const loaderViewportSize = {
-  xs: '-20 -20 42 42',
-  sm: '-20 -20 42 42',
-  md: '-20.5 -20.5 43 43',
-  lg: '-21 -21 44 44',
+  xs: '-22 -22 46 46',
+  sm: '-22 -22 46 46',
+  md: '-22 -22 46 46',
+  lg: '-22 -22 46 46',
 };
 
 /**

diff --git a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator-v2.test.ts.snap b/src/components/LoadingIndicator/__snapshots__/LoadingIndicator-v2.test.ts.snap
@@ -12,7 +12,7 @@ exports[`<LoadingIndicator /> (v2) Default story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -22,7 +22,7 @@ exports[`<LoadingIndicator /> (v2) Default story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -31,7 +31,7 @@ exports[`<LoadingIndicator /> (v2) Default story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -63,7 +63,7 @@ exports[`<LoadingIndicator /> (v2) ExtraSmall story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="16"
     stroke="transparent"
-    viewBox="-20 -20 42 42"
+    viewBox="-22 -22 46 46"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -73,7 +73,7 @@ exports[`<LoadingIndicator /> (v2) ExtraSmall story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="2"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -82,7 +82,7 @@ exports[`<LoadingIndicator /> (v2) ExtraSmall story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="2"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -114,7 +114,7 @@ exports[`<LoadingIndicator /> (v2) Invisible story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -124,7 +124,7 @@ exports[`<LoadingIndicator /> (v2) Invisible story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -133,7 +133,7 @@ exports[`<LoadingIndicator /> (v2) Invisible story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -165,7 +165,7 @@ exports[`<LoadingIndicator /> (v2) Large story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="56"
     stroke="transparent"
-    viewBox="-21 -21 44 44"
+    viewBox="-22 -22 46 46"
     width="56"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -216,7 +216,7 @@ exports[`<LoadingIndicator /> (v2) Medium story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -226,7 +226,7 @@ exports[`<LoadingIndicator /> (v2) Medium story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -235,7 +235,7 @@ exports[`<LoadingIndicator /> (v2) Medium story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -267,7 +267,7 @@ exports[`<LoadingIndicator /> (v2) Small story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="24"
     stroke="transparent"
-    viewBox="-20 -20 42 42"
+    viewBox="-22 -22 46 46"
     width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -277,7 +277,7 @@ exports[`<LoadingIndicator /> (v2) Small story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="2"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -286,7 +286,7 @@ exports[`<LoadingIndicator /> (v2) Small story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="2"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"
@@ -318,7 +318,7 @@ exports[`<LoadingIndicator /> (v2) WithAriaLabel story renders snapshot 1`] = `
     data-testid="oval-svg"
     height="40"
     stroke="transparent"
-    viewBox="-20.5 -20.5 43 43"
+    viewBox="-22 -22 46 46"
     width="40"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -328,7 +328,7 @@ exports[`<LoadingIndicator /> (v2) WithAriaLabel story renders snapshot 1`] = `
     >
       <g
         data-testid="oval-secondary-group"
-        stroke-width="3"
+        stroke-width="4"
         transform="translate(1 1)"
       >
         <circle
@@ -337,7 +337,7 @@ exports[`<LoadingIndicator /> (v2) WithAriaLabel story renders snapshot 1`] = `
           r="20"
           stroke="transparent"
           stroke-opacity=".5"
-          stroke-width="3"
+          stroke-width="4"
         />
         <path
           d="M20 0c0-9.94-8.06-20-20-20"