feat(AvaterToken/IssueLabelToken): Migrate to CSS modules behind feature flag Pt 3

packages/react/src/Token/AvatarToken.module.css

@@ -0,0 +1,37 @@
+:root {
+  --spacing: calc(var(--base-size-4) * 2);
+}
+
+.AvatarContainer {
+  display: block;
+}
+
+/* TODO: Remove this once the avatar component is converted to CSS modules */
+.Avatar {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.Token {
+  padding-left: var(--base-size-4) !important;
+}
+
+.AvatarContainer[data-size='small'] {
+  width: calc(16px - var(--spacing));
+  height: calc(16px - var(--spacing));
+}
+
+.AvatarContainer[data-size='medium'] {
+  width: calc(20px - var(--spacing));
+  height: calc(20px - var(--spacing));
+}
+
+.AvatarContainer[data-size='large'] {
+  width: calc(24px - var(--spacing));
+  height: calc(24px - var(--spacing));
+}
+
+.AvatarContainer[data-size='xlarge'] {
+  width: calc(32px - var(--spacing));
+  height: calc(32px - var(--spacing));
+}

packages/react/src/Token/AvatarToken.tsx

@@ -1,47 +1,50 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {clsx} from 'clsx'
 import {get} from '../constants'
 import type {TokenBaseProps, TokenSizeKeys} from './TokenBase'
 import {defaultTokenSize, tokenSizes} from './TokenBase'
 import Token from './Token'
 import Avatar from '../Avatar'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './AvatarToken.module.css'
 
 // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change
 export interface AvatarTokenProps extends TokenBaseProps {
   avatarSrc: string
 }
 
-const AvatarContainer = styled.span<{avatarSize: TokenSizeKeys}>`
-  // 'space.1' is used because to match space from the left of the token to the left of the avatar
-  // '* 2' is done to account for the top and bottom
-  --spacing: calc(${get('space.1')} * 2);
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-  display: block;
-  height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-  width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-`
+const AvatarContainer = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'span',
+  styled.span<{avatarSize: TokenSizeKeys}>`
+    // 'space.1' is used because to match space from the left of the token to the left of the avatar
+    // '* 2' is done to account for the top and bottom
+    --spacing: calc(${get('space.1')} * 2);
+
+    display: block;
+    height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
+    width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
+  `,
+)
 
 const AvatarToken = forwardRef(({avatarSrc, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   return (
     <Token
       leadingVisual={() => (
-        <AvatarContainer avatarSize={size}>
-          <Avatar
-            src={avatarSrc}
-            size={parseInt(tokenSizes[size], 10)}
-            sx={{
-              width: '100%',
-              height: '100%',
-            }}
-          />
+        <AvatarContainer avatarSize={size} className={clsx(enabled && classes.AvatarContainer)} data-size={size}>
+          <Avatar src={avatarSrc} size={parseInt(tokenSizes[size], 10)} className={classes.Avatar} />
         </AvatarContainer>
       )}
       size={size}
       id={id?.toString()}
-      sx={{
-        paddingLeft: get('space.1'),
-      }}
+      className={classes.Token}
       {...rest}
       ref={forwardedRef}
     />

packages/react/src/Token/IssueLabelToken.module.css

@@ -0,0 +1,4 @@
+.RemoveButton[data-has-multiple-action-targets='true'] {
+  position: relative;
+  z-index: 1;
+}

packages/react/src/Token/IssueLabelToken.tsx

@@ -8,6 +8,7 @@ import {parseToHsla, parseToRgba} from 'color2k'
 import {useTheme} from '../ThemeProvider'
 import TokenTextContainer from './_TokenTextContainer'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import classes from './IssueLabelToken.module.css'
 
 export interface IssueLabelTokenProps extends TokenBaseProps {
   /**
@@ -140,7 +141,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
       isSelected={isSelected}
       text={text}
       size={size}
-      sx={labelStyles}
+      style={labelStyles}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}
@@ -153,14 +154,8 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
           size={size}
           aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
           isParentInteractive={isTokenInteractive(props)}
-          sx={
-            hasMultipleActionTargets
-              ? {
-                  position: 'relative',
-                  zIndex: '1',
-                }
-              : {}
-          }
+          data-has-multiple-action-targets={hasMultipleActionTargets}
+          className={classes.RemoveButton}
         />
       ) : null}
     </TokenBase>