Token: Fix sizing, padding, and selected state styling

.changeset/cuddly-worms-knock.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Fixes multiple styling issues in the Token component.

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

@@ -14,6 +14,8 @@
 
 .Token:where([data-is-selected='true']) {
   color: var(--fgColor-default);
+  border-style: solid;
+  border-color: var(--borderColor-emphasis);
 }
 
 .Token[data-is-remove-btn='true'] {
@@ -28,5 +30,5 @@
 }
 
 .LargeLeadingVisual {
-  margin-right: var(--base-size-8);
+  margin-right: var(--base-size-6);
 }

packages/react/src/Token/Token.stories.tsx

@@ -1,16 +1,23 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
 import Token from './Token'
+import type {TokenProps} from './Token'
 import {GitBranchIcon} from '@primer/octicons-react'
 
+type PlaygroundArgs = Omit<TokenProps, 'leadingVisual' | 'onRemove' | 'onClick'> & {
+  leadingVisual: boolean
+  onRemove: boolean
+  onClick: boolean
+}
+
 export default {
   title: 'Components/Token',
   component: Token,
 } as Meta<typeof Token>
 
 export const Default = () => <Token text="token" />
 
-export const Playground: StoryFn<typeof Token> = ({onRemove, onClick, leadingVisual, ...args}) => {
+export const Playground: StoryFn<PlaygroundArgs> = ({onRemove, onClick, leadingVisual, ...args}) => {
   return (
     <Token
       {...args}
@@ -24,10 +31,10 @@ Playground.args = {
   text: 'Token',
   size: 'medium',
   isSelected: false,
-  leadingVisual: undefined,
+  leadingVisual: false,
   hideRemoveButton: false,
-  onRemove: undefined,
-  onClick: undefined,
+  onRemove: false,
+  onClick: false,
 }
 Playground.argTypes = {
   size: {
@@ -45,6 +52,10 @@ Playground.argTypes = {
     control: {
       type: 'boolean',
     },
+    mapping: {
+      true: GitBranchIcon,
+      false: undefined,
+    },
   },
   hideRemoveButton: {
     control: {
@@ -55,10 +66,18 @@ Playground.argTypes = {
     control: {
       type: 'boolean',
     },
+    mapping: {
+      true: action('onRemove'),
+      false: undefined,
+    },
   },
   onClick: {
     control: {
       type: 'boolean',
     },
+    mapping: {
+      true: action('onClick'),
+      false: undefined,
+    },
   },
 }

packages/react/src/Token/Token.tsx

@@ -16,6 +16,7 @@ import {clsx} from 'clsx'
 export interface TokenProps extends TokenBaseProps {
   /**
    * A component that renders before the token text
+   * disabled when size is 'small'
    */
   leadingVisual?: React.ElementType
 }
@@ -71,7 +72,7 @@ const Token = forwardRef((props, forwardedRef) => {
       ref={forwardedRef}
       style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}}
     >
-      {LeadingVisual ? (
+      {LeadingVisual && size !== 'small' ? (
         <LeadingVisualContainer size={size}>
           <LeadingVisual />
         </LeadingVisualContainer>

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

@@ -30,8 +30,8 @@
 .TokenBase:where([data-size='medium']) {
   width: auto;
   height: var(--base-size-20);
-  padding-right: var(--base-size-8);
-  padding-left: var(--base-size-8);
+  padding-right: var(--base-size-6);
+  padding-left: var(--base-size-6);
   font-size: var(--text-body-size-small);
 }
 
@@ -40,15 +40,15 @@
   height: var(--base-size-24);
   padding-right: var(--base-size-8);
   padding-left: var(--base-size-8);
-  font-size: var(--text-body-size-small);
+  font-size: var(--text-body-size-medium);
 }
 
 .TokenBase[data-size='xlarge'] {
   width: auto;
   height: var(--base-size-32);
   padding-top: 0;
-  padding-right: var(--base-size-16);
+  padding-right: var(--base-size-12);
   padding-bottom: 0;
-  padding-left: var(--base-size-16);
+  padding-left: var(--base-size-12);
   font-size: var(--text-body-size-medium);
 }

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

@@ -29,13 +29,13 @@
 .TokenButton[data-size='large'] {
   width: var(--base-size-24);
   height: var(--base-size-24);
-  margin-left: var(--base-size-8);
+  margin-left: var(--base-size-6);
 }
 
 .TokenButton[data-size='xlarge'] {
   width: var(--base-size-32);
   height: var(--base-size-32);
-  margin-left: var(--base-size-8);
+  margin-left: var(--base-size-6);
 }
 
 .TokenButton:hover,

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -36,7 +36,7 @@ const RemoveTokenButton = ({
           transform: `translate(${borderOffset}px, -${borderOffset}px)`,
         }}
       >
-        <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
+        <XIcon size={size === 'small' || size === 'medium' ? 12 : 16} />
       </span>
     )
   }
@@ -55,7 +55,7 @@ const RemoveTokenButton = ({
       ref={rest.ref as React.Ref<HTMLButtonElement>}
       type="button"
     >
-      <XIcon size={size === 'small' || size === 'medium' || size === 'large' ? 12 : 16} />
+      <XIcon size={size === 'small' || size === 'medium' ? 12 : 16} />
     </button>
   )
 }