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')};