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

.changeset/slow-spoons-peel.md

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

packages/react/src/Token/AvatarToken.tsx

@@ -6,51 +6,23 @@ 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 CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+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 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}
-      />
-    )
-  }
+  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) => {
   return (
     <Token
       leadingVisual={() => (

packages/react/src/Token/IssueLabelToken.tsx

@@ -8,9 +8,6 @@ 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 {
   /**
@@ -19,7 +16,6 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
   fillColor?: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 const tokenBorderWidthPx = 1
 
 const lightModeStyles = {
@@ -47,8 +43,6 @@ const darkModeStyles = {
 }
 
 const IssueLabelToken = forwardRef((props, forwardedRef) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
   const {
     as,
     fillColor = '#999',
@@ -60,15 +54,13 @@ 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 => {
@@ -141,37 +133,6 @@ 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.tsx

@@ -1,18 +1,15 @@
 import type {MouseEventHandler} from 'react'
 import React, {forwardRef} from 'react'
 import Box from '../Box'
-import {merge, type BetterSystemStyleObject, type SxProp} from '../sx'
+import type {BetterSystemStyleObject, SxProp} from '../sx'
+import {merge} 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.
@@ -23,8 +20,6 @@ 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}) => (
@@ -40,8 +35,6 @@ const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBasePro
 )
 
 const Token = forwardRef((props, forwardedRef) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
   const {
     as,
     onRemove,
@@ -53,8 +46,6 @@ const Token = forwardRef((props, forwardedRef) => {
     href,
     onClick,
     sx: sxProp = defaultSxProp,
-    className,
-    style,
     ...rest
   } = props
   const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
@@ -67,8 +58,7 @@ const Token = forwardRef((props, forwardedRef) => {
     href,
     onClick,
   }
-
-  const mergedSx = merge<BetterSystemStyleObject>(
+  const sx = merge<BetterSystemStyleObject>(
     {
       backgroundColor: 'neutral.subtle',
       borderColor: props.isSelected ? 'fg.default' : 'border.subtle',
@@ -90,56 +80,16 @@ 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={mergedSx}
+      sx={sx}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}
-      style={style}
     >
       {LeadingVisual ? (
         <LeadingVisualContainer size={size}>