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

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

@@ -0,0 +1,50 @@
+.TokenButton {
+  display: inline-flex;
+  padding: 0;
+  margin-left: var(--base-size-4);
+  font-family: inherit;
+  color: currentColor;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--borderRadius-full);
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  align-self: baseline;
+}
+
+.TokenButton[data-size='small'] {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+.TokenButton[data-size='medium'] {
+  width: 20px;
+  height: 20px;
+}
+
+.TokenButton[data-size='large'] {
+  width: var(--base-size-24);
+  height: var(--base-size-24);
+  margin-left: var(--base-size-8);
+}
+
+.TokenButton[data-size='xlarge'] {
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+  margin-left: var(--base-size-8);
+}
+
+.TokenButton:hover,
+.TokenButton:focus {
+  /* TODO: choose a better functional color variable for this */
+  background-color: var(--bgColor-neutral-muted);
+}
+
+.TokenButton:active {
+  /* TODO: choose a better functional color variable for this */
+  background-color: var(--bgColor-neutral-muted);
+}

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -2,19 +2,24 @@ import React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import styled, {css} from 'styled-components'
 import {variant} from 'styled-system'
+import {clsx} from 'clsx'
 import {get} from '../constants'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import sx, {type SxProp} from '../sx'
 import type {TokenSizeKeys} from './TokenBase'
 import {tokenSizes, defaultTokenSize} from './TokenBase'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
 
-interface TokenButtonProps {
+import classes from './_RemoveTokenButton.module.css'
+
+interface TokenButtonProps extends SxProp {
   borderOffset?: number
   size?: TokenSizeKeys
   isParentInteractive?: boolean
 }
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
 const variants = variant<{height: string; width: string}, TokenSizeKeys>({
   prop: 'size',
   variants: {
@@ -39,66 +44,84 @@ const variants = variant<{height: string; width: string}, TokenSizeKeys>({
 
 const getTokenButtonIconSize = (size?: TokenSizeKeys) => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75
 
-const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  appearance: none;
-  text-decoration: none;
-  padding: 0;
-  transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
+const StyledTokenButton = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'span',
+  styled.span<TokenButtonProps>`
+    background-color: transparent;
+    font-family: inherit;
+    color: currentColor;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    appearance: none;
+    text-decoration: none;
+    padding: 0;
+    transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
+    align-self: baseline;
+    border: 0;
+    border-radius: 999px;
+
+    ${props => {
+      switch (props.size) {
+        case 'large':
+        case 'xlarge':
+          return css`
+            margin-left: ${get('space.2')};
+          `
+        default:
+          return css`
+            margin-left: ${get('space.1')};
+          `
+      }
+    }}
 
-  ${props => {
-    switch (props.size) {
-      case 'large':
-      case 'xlarge':
-        return css`
-          margin-left: ${get('space.2')};
-        `
-      default:
-        return css`
-          margin-left: ${get('space.1')};
-        `
+    &:hover,
+    &:focus {
+      // TODO: choose a better functional color variable for this
+      background-color: ${get('colors.neutral.muted')};
     }
-  }}
 
-  &:hover,
-  &:focus {
-    // TODO: choose a better functional color variable for this
-    background-color: ${get('colors.neutral.muted')};
-  }
+    &:active {
+      // TODO: choose a better functional color variable for this
+      background-color: ${get('colors.neutral.subtle')};
+    }
 
-  &:active {
-    // TODO: choose a better functional color variable for this
-    background-color: ${get('colors.neutral.subtle')};
-  }
+    ${variants}
+    ${sx}
+  `,
+)
 
-  ${variants}
-  ${sx}
-`
+type RemoveTokenButtonProps = TokenButtonProps & Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement>, 'size'>
 
-const RemoveTokenButton: React.FC<React.PropsWithChildren<ComponentProps<typeof StyledTokenButton>>> = ({
+const RemoveTokenButton = ({
   'aria-label': ariaLabel,
   isParentInteractive,
   size = defaultTokenSize,
+  className,
   ...rest
-}) => {
+}: React.PropsWithChildren<RemoveTokenButtonProps>) => {
   delete rest.children
 
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   return (
     <StyledTokenButton
       as={isParentInteractive ? 'span' : 'button'}
       tabIndex={isParentInteractive ? -1 : undefined}
       aria-label={!isParentInteractive ? 'Remove token' : ariaLabel}
       size={size}
+      data-size={size}
+      className={clsx(enabled && classes.TokenButton, className)}
+      style={
+        enabled
+          ? {
+              transform: `translate(${rest.borderOffset}px, -${rest.borderOffset}px)`,
+            }
+          : {}
+      }
       {...rest}
     >
       <XIcon size={getTokenButtonIconSize(size)} />

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

@@ -0,0 +1,46 @@
+.TokenTextContainer {
+  width: auto;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font: inherit;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: normal;
+  color: inherit;
+
+  /* reset anchor styles */
+  color: currentColor;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* reset button styles, make the cursor a pointer, and add line-height */
+  background: transparent;
+  border: none;
+  flex-grow: 1;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  appearance: none;
+}
+
+/* Position psuedo-element above text content, but below the
+  remove button.
+  This ensures the <a> or <button> receives the click no
+  matter where on the token the user clicks. */
+.TokenTextContainer:is(a, button, [tabIndex='0']) {
+  cursor: pointer;
+}
+
+/* Position psuedo-element above text content, but below the
+  remove button.
+  This ensures the <a> or <button> receives the click no
+  matter where on the token the user clicks. */
+.TokenTextContainer:is(a, button, [tabIndex='0'])::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+}

packages/react/src/Token/_TokenTextContainer.tsx

@@ -1,46 +1,67 @@
 import styled from 'styled-components'
 import type {TokenBaseProps} from './TokenBase'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import React from 'react'
+import classes from './_TokenTextContainer.module.css'
+import {useFeatureFlag} from '../FeatureFlags'
+import {clsx} from 'clsx'
 
-const TokenTextContainer = styled('span')<Partial<TokenBaseProps>>`
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  // reset button styles, make the cursor a pointer, and add line-height
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: normal;
-
-  // reset anchor styles
-  color: currentColor;
-  text-decoration: none;
-
-  // Position psuedo-element above text content, but below the
-  // remove button.
-  // This ensures the <a> or <button> receives the click no
-  // matter where on the token the user clicks.
-  &:is(a, button, [tabIndex='0']) {
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
+const StyledTokenTextContainer = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'span',
+  styled('span')`
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    // reset button styles, make the cursor a pointer, and add line-height
+    background: transparent;
+    border: none;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    width: auto;
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+    -webkit-appearance: none;
+    line-height: normal;
+
+    // reset anchor styles
+    color: currentColor;
+    text-decoration: none;
+
+    // Position psuedo-element above text content, but below the
+    // remove button.
+    // This ensures the <a> or <button> receives the click no
+    // matter where on the token the user clicks.
+    &:is(a, button, [tabIndex='0']) {
+      cursor: pointer;
+
+      &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
     }
-  }
-`
+  `,
+)
+
+const TokenTextContainer = ({children, ...props}: React.PropsWithChildren<Partial<TokenBaseProps>>) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+  return (
+    <StyledTokenTextContainer className={clsx(enabled && classes.TokenTextContainer)} {...props}>
+      {children}
+    </StyledTokenTextContainer>
+  )
+}
 
 export default TokenTextContainer