chore(Skeleton): Move Skeleton component from team to staff flag (#5289)

* Move Skeleton component to staff feature flag * Create old-weeks-matter.md
primer · Nov 14, 2024 · cc876d9 · cc876d9
1 parent 8fd0035
commit cc876d9
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/old-weeks-matter.md b/.changeset/old-weeks-matter.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Skeleton component from team to staff flag
diff --git a/packages/react/src/experimental/Skeleton/FeatureFlag.tsx b/packages/react/src/experimental/Skeleton/FeatureFlag.tsx
@@ -0,0 +1 @@
+export const CSS_MODULE_FLAG = 'primer_react_css_modules_staff'
diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx
@@ -9,6 +9,7 @@ import classes from './SkeletonAvatar.module.css'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../../FeatureFlags'
 import {merge} from '../../sx'
+import {CSS_MODULE_FLAG} from './FeatureFlag'
 
 export type SkeletonAvatarProps = Pick<AvatarProps, 'size' | 'square'> & {
   /** Class name for custom styling */
@@ -39,7 +40,7 @@ export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({
 }) => {
   const responsive = isResponsiveValue(size)
   const cssSizeVars = {} as Record<string, string>
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag(CSS_MODULE_FLAG)
   const avatarSx = responsive
     ? {
         ...getBreakpointDeclarations(

diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx
@@ -7,6 +7,7 @@ import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
 import classes from './SkeletonBox.module.css'
 import {useFeatureFlag} from '../../FeatureFlags'
+import {CSS_MODULE_FLAG} from './FeatureFlag'
 
 type SkeletonBoxProps = {
   /** Height of the skeleton "box". Accepts any valid CSS `height` value. */
@@ -22,10 +23,9 @@ const shimmer = keyframes`
   from { mask-position: 200%; }
   to { mask-position: 0%; }
 `
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
 const StyledSkeletonBox = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
+  CSS_MODULE_FLAG,
   'div',
   styled.div<SkeletonBoxProps>`
     animation: ${shimmer};
@@ -56,7 +56,7 @@ export const SkeletonBox = React.forwardRef<HTMLDivElement, SkeletonBoxProps>(fu
   {height, width, className, style, ...props},
   ref,
 ) {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  const enabled = useFeatureFlag(CSS_MODULE_FLAG)
   return (
     <StyledSkeletonBox
       height={enabled ? undefined : height}

diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx
@@ -5,6 +5,7 @@ import classes from './SkeletonText.module.css'
 import {useFeatureFlag} from '../../FeatureFlags'
 import {clsx} from 'clsx'
 import {merge} from '../../sx'
+import {CSS_MODULE_FLAG} from './FeatureFlag'
 
 type SkeletonTextProps = {
   /** Size of the text that the skeleton is replacing. */
@@ -80,7 +81,7 @@ export const SkeletonText: React.FC<SkeletonTextProps> = ({
   style,
   ...rest
 }) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag(CSS_MODULE_FLAG)
 
   if (lines < 2) {
     return (