feat(Spinner): Convert Spinner to CSS module behind feature flag (#5188)

* Convert spinner component to CSS modules Co-authored-by: Hussam Ghazzi <[email protected]> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Jon Rohan <[email protected]> * add changeset * update snapshots * patch -> minor --------- Co-authored-by: Hussam Ghazzi <[email protected]> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Jon Rohan <[email protected]>
primer · Oct 30, 2024 · 573ae51 · 573ae51
1 parent 461ae57
commit 573ae51
Show file tree

Hide file tree

Showing 7 changed files with 625 additions and 754 deletions.
diff --git a/.changeset/hungry-avocados-remember.md b/.changeset/hungry-avocados-remember.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Migrated `Spinner` component to use support CSS modules
diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Spinner from './Spinner'
+
+export default {
+  title: 'Components/Spinner/Dev',
+  component: Spinner,
+} as Meta<typeof Spinner>
+
+export const Default = () => <Spinner sx={{border: '1px solid red'}} />
diff --git a/packages/react/src/Spinner/Spinner.module.css b/packages/react/src/Spinner/Spinner.module.css
@@ -0,0 +1,13 @@
+.Box {
+  display: inline-flex;
+}
+
+@keyframes rotate-keyframes {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.SpinnerAnimation {
+  animation: rotate-keyframes 1s linear infinite;
+}
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
@@ -3,8 +3,10 @@ import styled from 'styled-components'
 import sx, {type SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
-import Box from '../Box'
 import {useId} from '../hooks'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './Spinner.module.css'
+import Box from '../Box'
 
 const sizeMap = {
   small: '16px',
@@ -20,6 +22,7 @@ export type SpinnerProps = {
   /** @deprecated Use `srText` instead. */
   'aria-label'?: string
   className?: string
+  style?: React.CSSProperties
 } & HTMLDataAttributes &
   SxProp
 
@@ -28,6 +31,7 @@ function Spinner({
   srText = 'Loading',
   'aria-label': ariaLabel,
   className,
+  style,
   ...props
 }: SpinnerProps) {
   const size = sizeMap[sizeKey]
@@ -36,7 +40,7 @@ function Spinner({
 
   return (
     /* inline-flex removes the extra line height */
-    <Box as="span" sx={{display: 'inline-flex'}}>
+    <span className={classes.Box}>
       <svg
         height={size}
         width={size}
@@ -46,6 +50,7 @@ function Spinner({
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
         className={className}
+        style={style}
         {...props}
       >
         <circle
@@ -66,11 +71,11 @@ function Spinner({
         />
       </svg>
       {hasHiddenLabel ? <VisuallyHidden id={labelId}>{srText}</VisuallyHidden> : null}
-    </Box>
+    </span>
   )
 }
 
-const StyledSpinner = styled(Spinner)`
+const StyledComponentSpinner = styled(Spinner)`
   @keyframes rotate-keyframes {
     100% {
       transform: rotate(360deg);
@@ -82,6 +87,19 @@ const StyledSpinner = styled(Spinner)`
   ${sx}
 `
 
+function StyledSpinner({sx, ...props}: SpinnerProps) {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  if (enabled) {
+    if (sx) {
+      return <Box sx={sx} as={Spinner} className={classes.SpinnerAnimation} {...props} />
+    }
+
+    return <Spinner className={classes.SpinnerAnimation} {...props} />
+  }
+
+  return <StyledComponentSpinner sx={sx} {...props} />
+}
+
 StyledSpinner.displayName = 'Spinner'
 
 export default StyledSpinner
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -327,14 +327,7 @@ exports[`snapshots renders a loading state 1`] = `
   justify-content: center;
 }
 
-.c2 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4:not(:focus):not(:active):not(:focus-within) {
+.c3:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -344,7 +337,7 @@ exports[`snapshots renders a loading state 1`] = `
   width: 1px;
 }
 
-.c3 {
+.c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
 }
@@ -374,12 +367,12 @@ exports[`snapshots renders a loading state 1`] = `
       display="flex"
     >
       <span
-        className="c2"
+        className="Box"
       >
         <svg
           aria-hidden={true}
           aria-labelledby=":r2h:"
-          className="c3"
+          className="c2"
           fill="none"
           height="32px"
           viewBox="0 0 16 16"
@@ -403,7 +396,7 @@ exports[`snapshots renders a loading state 1`] = `
           />
         </svg>
         <span
-          className="c4"
+          className="c3"
           id=":r2h:"
         >
           Loading