feat(Token): Migrate to CSS modules behind feature flag Pt 2

.changeset/slow-spoons-peel.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `Token`, `IssueLabelToken`, `AvatarToken` components to use CSS Modules

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

@@ -0,0 +1,36 @@
+:root {
+  --spacing: calc(var(--base-size-4) * 2);
+}
+
+.AvatarContainer {
+  display: block;
+}
+
+.Avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.Token {
+  padding-left: var(--base-size-4) !important;
+}
+
+.AvatarContainer:where([data-size='small']) {
+  width: calc(16px - var(--spacing));
+  height: calc(16px - var(--spacing));
+}
+
+.AvatarContainer:where([data-size='medium']) {
+  width: calc(20px - var(--spacing));
+  height: calc(20px - var(--spacing));
+}
+
+.AvatarContainer:where([data-size='large']) {
+  width: calc(24px - var(--spacing));
+  height: calc(24px - var(--spacing));
+}
+
+.AvatarContainer:where([data-size='xlarge']) {
+  width: calc(32px - var(--spacing));
+  height: calc(32px - var(--spacing));
+}

packages/react/src/Token/AvatarToken.tsx

@@ -6,23 +6,51 @@ 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'
+import {clsx} from 'clsx'
 
 // 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, className, ...rest}, forwardedRef) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  if (enabled) {
+    return (
+      <Token
+        leadingVisual={() => (
+          <AvatarContainer avatarSize={size} className={classes.AvatarContainer} data-size={size}>
+            <Avatar src={avatarSrc} size={parseInt(tokenSizes[size], 10)} className={classes.Avatar} />
+          </AvatarContainer>
+        )}
+        size={size}
+        id={id?.toString()}
+        className={clsx(classes.Token, className)}
+        {...rest}
+        ref={forwardedRef}
+      />
+    )
+  }
 
-const AvatarToken = forwardRef(({avatarSrc, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
   return (
     <Token
       leadingVisual={() => (

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

@@ -0,0 +1,8 @@
+.IssueLabel:where([data-has-remove-button='true']) {
+  padding-right: 0;
+}
+
+.RemoveButton:where([data-has-multiple-action-targets='true']) {
+  position: relative;
+  z-index: 1;
+}

packages/react/src/Token/IssueLabelToken.tsx

@@ -8,6 +8,9 @@ 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'
+import {useFeatureFlag} from '../FeatureFlags'
+import {clsx} from 'clsx'
 
 export interface IssueLabelTokenProps extends TokenBaseProps {
   /**
@@ -16,6 +19,7 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
   fillColor?: string
 }
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 const tokenBorderWidthPx = 1
 
 const lightModeStyles = {
@@ -43,6 +47,8 @@ const darkModeStyles = {
 }
 
 const IssueLabelToken = forwardRef((props, forwardedRef) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   const {
     as,
     fillColor = '#999',
@@ -54,13 +60,15 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
     hideRemoveButton,
     href,
     onClick,
+    className,
     ...rest
   } = props
   const interactiveTokenProps = {
     as,
     href,
     onClick,
   }
+
   const {resolvedColorScheme} = useTheme()
   const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
   const onRemoveClick: MouseEventHandler = e => {
@@ -133,6 +141,37 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
     }
   }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props])
 
+  if (enabled) {
+    return (
+      <TokenBase
+        onRemove={onRemove}
+        id={id?.toString()}
+        isSelected={isSelected}
+        className={clsx(classes.IssueLabel, className)}
+        text={text}
+        size={size}
+        style={labelStyles}
+        data-has-remove-button={!hideRemoveButton && !!onRemove}
+        {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+        {...rest}
+        ref={forwardedRef}
+      >
+        <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
+        {!hideRemoveButton && onRemove ? (
+          <RemoveTokenButton
+            borderOffset={tokenBorderWidthPx}
+            onClick={onRemoveClick}
+            size={size}
+            aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
+            isParentInteractive={isTokenInteractive(props)}
+            data-has-multiple-action-targets={hasMultipleActionTargets}
+            className={classes.RemoveButton}
+          />
+        ) : null}
+      </TokenBase>
+    )
+  }
+
   return (
     <TokenBase
       onRemove={onRemove}

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

@@ -0,0 +1,21 @@
+.Token {
+  max-width: 100%;
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-neutral-muted);
+  border-color: var(--borderColor-muted);
+  border-style: solid;
+}
+
+.Token:where([data-interactive='true']):hover {
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-neutral-muted);
+  box-shadow: var(--shadow-resting-medium);
+}
+
+.Token:where([data-is-selected='true']) {
+  color: var(--fgColor-default);
+}
+
+.Token[data-is-remove-btn='true'] {
+  padding-right: 0;
+}

packages/react/src/Token/Token.tsx

@@ -1,15 +1,18 @@
 import type {MouseEventHandler} from 'react'
 import React, {forwardRef} from 'react'
 import Box from '../Box'
-import type {BetterSystemStyleObject, SxProp} from '../sx'
-import {merge} from '../sx'
+import {merge, type BetterSystemStyleObject, type SxProp} from '../sx'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import type {TokenBaseProps} from './TokenBase'
 import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'
 import TokenTextContainer from './_TokenTextContainer'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import VisuallyHidden from '../_VisuallyHidden'
+import {useFeatureFlag} from '../FeatureFlags'
+
+import classes from './Token.module.css'
+import {clsx} from 'clsx'
 
 // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't.
 // TODO: This is a temporary solution until we figure out why these methods are causing type errors.
@@ -20,6 +23,8 @@ export interface TokenProps extends TokenBaseProps, SxProp {
   leadingVisual?: React.ElementType
 }
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
 const tokenBorderWidthPx = 1
 
 const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBaseProps, 'size'>>> = ({children, size}) => (
@@ -35,6 +40,8 @@ const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBasePro
 )
 
 const Token = forwardRef((props, forwardedRef) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   const {
     as,
     onRemove,
@@ -46,6 +53,8 @@ const Token = forwardRef((props, forwardedRef) => {
     href,
     onClick,
     sx: sxProp = defaultSxProp,
+    className,
+    style,
     ...rest
   } = props
   const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
@@ -58,7 +67,8 @@ const Token = forwardRef((props, forwardedRef) => {
     href,
     onClick,
   }
-  const sx = merge<BetterSystemStyleObject>(
+
+  const mergedSx = merge<BetterSystemStyleObject>(
     {
       backgroundColor: 'neutral.subtle',
       borderColor: props.isSelected ? 'fg.default' : 'border.subtle',
@@ -80,16 +90,56 @@ const Token = forwardRef((props, forwardedRef) => {
     sxProp,
   )
 
+  if (enabled) {
+    return (
+      <TokenBase
+        onRemove={onRemove}
+        id={id?.toString()}
+        className={clsx(className, classes.Token)}
+        text={text}
+        size={size}
+        sx={sxProp}
+        data-is-selected={props.isSelected}
+        data-is-remove-btn={!(hideRemoveButton || !onRemove)}
+        {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+        {...rest}
+        ref={forwardedRef}
+        style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}}
+      >
+        {LeadingVisual ? (
+          <LeadingVisualContainer size={size}>
+            <LeadingVisual />
+          </LeadingVisualContainer>
+        ) : null}
+        <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>
+          {text}
+          {onRemove && <VisuallyHidden> (press backspace or delete to remove)</VisuallyHidden>}
+        </TokenTextContainer>
+
+        {!hideRemoveButton && onRemove ? (
+          <RemoveTokenButton
+            borderOffset={tokenBorderWidthPx}
+            onClick={onRemoveClick}
+            size={size}
+            isParentInteractive={isTokenInteractive(props)}
+            aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
+          />
+        ) : null}
+      </TokenBase>
+    )
+  }
+
   return (
     <TokenBase
       onRemove={onRemove}
       id={id?.toString()}
       text={text}
       size={size}
-      sx={sx}
+      sx={mergedSx}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}
+      style={style}
     >
       {LeadingVisual ? (
         <LeadingVisualContainer size={size}>

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

@@ -0,0 +1,60 @@
+.TokenBase {
+  position: relative;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: var(--base-text-weight-semibold);
+  text-decoration: none;
+  white-space: nowrap;
+  border-radius: var(--borderRadius-full);
+  align-items: center;
+}
+
+.TokenBase:where([data-cursor-is-interactive='true']) {
+  cursor: pointer;
+}
+
+.TokenBase:where([data-cursor-is-interactive='false']) {
+  cursor: auto;
+}
+
+.TokenBase:where([data-size='small']) {
+  width: auto;
+  height: 16px;
+  padding-right: var(--base-size-4);
+  padding-left: var(--base-size-4);
+  font-size: var(--text-body-size-small);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 16px;
+}
+
+.TokenBase:where([data-size='medium']) {
+  width: auto;
+  height: 20px;
+  padding-right: var(--base-size-8);
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 20px;
+}
+
+.TokenBase[data-size='large'] {
+  width: auto;
+  height: 24px;
+  padding-right: var(--base-size-8);
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 24px;
+}
+
+.TokenBase[data-size='xlarge'] {
+  width: auto;
+  height: 32px;
+  padding-top: 0;
+  padding-right: var(--base-size-16);
+  padding-bottom: 0;
+  padding-left: var(--base-size-16);
+  font-size: var(--text-body-size-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 32px;
+}