Move Avatar component feature flag from primer_react_css_modules_team to primer_react_css_modules_staff (#5024)

* Move Avatar component to staff feature flag

* Create three-scissors-hide.md

Author: jonrohan

.changeset/three-scissors-hide.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Avatar component feature flag from primer_react_css_modules_team to primer_react_css_modules_staff

e2e/components/Avatar.test.ts

@@ -13,7 +13,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar--default',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
 
@@ -26,7 +26,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar--default',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
               await expect(page).toHaveNoViolations({
@@ -49,7 +49,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--size',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
 
@@ -62,7 +62,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--size',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
               await expect(page).toHaveNoViolations({
@@ -85,7 +85,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--size-responsive',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
 
@@ -98,7 +98,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--size-responsive',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
               await expect(page).toHaveNoViolations({
@@ -121,7 +121,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--square',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
 
@@ -134,7 +134,7 @@ test.describe('Avatar', () => {
                 id: 'components-avatar-features--square',
                 globals: {
                   colorScheme: theme,
-                  primer_react_css_modules_team: enabled,
+                  primer_react_css_modules_staff: enabled,
                 },
               })
               await expect(page).toHaveNoViolations({

packages/react/src/Avatar/Avatar.tsx

@@ -48,7 +48,7 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
   {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, className, ...rest},
   ref,
 ) {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
   const isResponsive = isResponsiveValue(size)
   const avatarSx = isResponsive
     ? merge<BetterCssProperties | BetterSystemStyleObject>(