From f45cdc88992b677011e712f406fe0c30a0d91fc2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 13 Nov 2024 23:11:14 +0000
Subject: [PATCH 1/2] Move Skeleton component to staff feature flag

---
 packages/react/src/experimental/Skeleton/FeatureFlag.tsx    | 1 +
 packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx | 3 ++-
 packages/react/src/experimental/Skeleton/SkeletonBox.tsx    | 6 +++---
 packages/react/src/experimental/Skeleton/SkeletonText.tsx   | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/experimental/Skeleton/FeatureFlag.tsx

diff --git a/packages/react/src/experimental/Skeleton/FeatureFlag.tsx b/packages/react/src/experimental/Skeleton/FeatureFlag.tsx
new file mode 100644
index 00000000000..70f25b03980
--- /dev/null
+++ 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
index 8bd5a2cbb8d..5221154a39c 100644
--- 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
index 7df654aa354..8a8bcaea7b1 100644
--- 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
index f26e0f98b27..08c2680363f 100644
--- 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 (

From 6fe24072e79f6700741b4924843f2d758286c11e Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 13 Nov 2024 15:33:21 -0800
Subject: [PATCH 2/2] Create old-weeks-matter.md

---
 .changeset/old-weeks-matter.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/old-weeks-matter.md

diff --git a/.changeset/old-weeks-matter.md b/.changeset/old-weeks-matter.md
new file mode 100644
index 00000000000..19cf62741c0
--- /dev/null
+++ b/.changeset/old-weeks-matter.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Skeleton component from team to staff flag