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 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 & { /** Class name for custom styling */ @@ -39,7 +40,7 @@ export const SkeletonAvatar: React.FC = ({ }) => { const responsive = isResponsiveValue(size) const cssSizeVars = {} as Record - 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` animation: ${shimmer}; @@ -56,7 +56,7 @@ export const SkeletonBox = React.forwardRef(fu {height, width, className, style, ...props}, ref, ) { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const enabled = useFeatureFlag(CSS_MODULE_FLAG) return ( = ({ style, ...rest }) => { - const enabled = useFeatureFlag('primer_react_css_modules_team') + const enabled = useFeatureFlag(CSS_MODULE_FLAG) if (lines < 2) { return (