Remove extralarge from Tokens

.changeset/great-spies-deliver.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated `extralarge` variant from `Token` and `TextInputWithToken` component

src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -60,8 +60,7 @@ const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   small: 0,
   medium: 1,
   large: 1,
-  extralarge: 2,
-  xlarge: 2, // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
+  xlarge: 2,
 }
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
@@ -240,8 +239,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     small: 'small',
     medium: 'small',
     large: 'medium',
-    extralarge: 'medium',
-    xlarge: 'medium', // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
+    xlarge: 'medium',
   }
   const showLeadingLoadingIndicator =
     loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'))

src/Token/Token.tsx

@@ -25,7 +25,7 @@ const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBasePro
     sx={{
       flexShrink: 0,
       lineHeight: 0,
-      marginRight: size && ['large', 'extralarge', 'xlarge'].includes(size) ? 2 : 1,
+      marginRight: size && ['large', 'xlarge'].includes(size) ? 2 : 1,
     }}
   >
     {children}

src/Token/TokenBase.tsx

@@ -5,19 +5,13 @@ import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-// TODO: remove invalid "extralarge" size name in next breaking change
-/** @deprecated 'extralarge' to be removed to align with size naming ADR https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md **/
-type ExtraLarge = 'extralarge'
-export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge' | ExtraLarge
-
-const xlargeSize = '32px'
+export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge'
 
 export const tokenSizes: Record<TokenSizeKeys, string> = {
   small: '16px',
   medium: '20px',
   large: '24px',
-  extralarge: xlargeSize,
-  xlarge: xlargeSize,
+  xlarge: '32px',
 }
 
 export const defaultTokenSize: TokenSizeKeys = 'medium'
@@ -112,7 +106,6 @@ const variants = variant<
       paddingLeft: 2,
       paddingRight: 2,
     },
-    extralarge: xlargeVariantStyles,
     xlarge: xlargeVariantStyles,
   },
 })

src/Token/_RemoveTokenButton.tsx

@@ -28,11 +28,6 @@ const variants = variant<{height: string; width: string}, TokenSizeKeys>({
       height: tokenSizes.large,
       width: tokenSizes.large,
     },
-    extralarge: {
-      height: tokenSizes.extralarge,
-      width: tokenSizes.extralarge,
-    },
-    // xlarge will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md
     xlarge: {
       height: tokenSizes.xlarge,
       width: tokenSizes.xlarge,
@@ -62,7 +57,6 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
   ${props => {
     switch (props.size) {
       case 'large':
-      case 'extralarge':
       case 'xlarge':
         return css`
           margin-left: ${get('space.2')};