Adds Size token [LG-3607]

.changeset/afraid-snails-trade.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/tokens': minor
+---
+
+Adds `Size` token

.changeset/shy-houses-pump.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/lint': patch
+---
+
+Bumps prettier version to 2.8.8

STYLEGUIDE.md

@@ -55,7 +55,7 @@ export const someConstant = {
   optionTwo = 'option 2',
 } as const;
 
-export type someConstant = typeof someConstant[keyof typeof someConstant];
+export type someConstant = (typeof someConstant)[keyof typeof someConstant];
 ```
 
 #### Avoid

packages/badge/src/Badge/types.ts

@@ -28,4 +28,4 @@ export const Variant = {
   Green: 'green',
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];

packages/banner/src/Banner/types.ts

@@ -8,7 +8,7 @@ export const Variant = {
   Success: 'success',
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 export interface BannerProps
   extends HTMLElementProps<'div', never>,

packages/button/src/types.ts

@@ -11,7 +11,7 @@ export const Variant = {
   BaseGreen: 'baseGreen',
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 /**
  * Size variants
@@ -25,15 +25,15 @@ export const Size = {
   Large: 'large',
 };
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 // TODO: Remove in next major release
 export const FontSize = {
   Body1: 13,
   Body2: 16,
 } as const;
 
-export type FontSize = typeof FontSize[keyof typeof FontSize];
+export type FontSize = (typeof FontSize)[keyof typeof FontSize];
 
 export interface ButtonProps {
   // Would prefer to use Pick<> to extract these properties, but they would not be correctly imported into Storybook otherwise.

packages/callout/src/Callout/types.ts

@@ -9,7 +9,7 @@ export const Variant = {
   Example: 'example',
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 export interface CalloutProps extends HTMLElementProps<'div'> {
   /**

packages/card/src/Card/types.ts

@@ -5,7 +5,7 @@ export const ContentStyle = {
   Clickable: 'clickable',
 } as const;
 
-export type ContentStyle = typeof ContentStyle[keyof typeof ContentStyle];
+export type ContentStyle = (typeof ContentStyle)[keyof typeof ContentStyle];
 
 export interface CardProps extends DarkModeProps, HTMLElementProps<'div'> {
   /**

packages/code/src/Code/Code.types.ts

@@ -5,7 +5,7 @@ export const ScrollState = {
   Both: 'both',
 } as const;
 
-export type ScrollState = typeof ScrollState[keyof typeof ScrollState];
+export type ScrollState = (typeof ScrollState)[keyof typeof ScrollState];
 
 export type DetailedElementProps<T> = React.DetailedHTMLProps<
   React.HTMLAttributes<T>,

packages/code/src/languages.ts

@@ -92,4 +92,4 @@ export const SupportedLanguages = {
 } as const;
 
 export type SupportedLanguages =
-  typeof SupportedLanguages[keyof typeof SupportedLanguages];
+  (typeof SupportedLanguages)[keyof typeof SupportedLanguages];

packages/code/src/types.ts

@@ -7,14 +7,14 @@ export const Mode = {
   Dark: 'dark',
 } as const;
 
-export type Mode = typeof Mode[keyof typeof Mode];
+export type Mode = (typeof Mode)[keyof typeof Mode];
 
 export const Language = {
   ...SupportedLanguages,
   None: 'none',
 } as const;
 
-export type Language = typeof Language[keyof typeof Language];
+export type Language = (typeof Language)[keyof typeof Language];
 
 export type LineHighlightingDefinition = ReadonlyArray<
   number | readonly [number, number]

packages/combobox/src/Combobox.types.ts

@@ -17,7 +17,7 @@ export const ComboboxElement = {
   Menu: 'Menu',
 } as const;
 export type ComboboxElement =
-  typeof ComboboxElement[keyof typeof ComboboxElement];
+  (typeof ComboboxElement)[keyof typeof ComboboxElement];
 
 /**
  * Prop types
@@ -29,7 +29,7 @@ export const ComboboxSize = {
   Default: 'default',
   Large: 'large',
 } as const;
-export type ComboboxSize = typeof ComboboxSize[keyof typeof ComboboxSize];
+export type ComboboxSize = (typeof ComboboxSize)[keyof typeof ComboboxSize];
 
 export const TruncationLocation = {
   start: 'start',
@@ -38,7 +38,7 @@ export const TruncationLocation = {
   none: 'none',
 } as const;
 export type TruncationLocation =
-  typeof TruncationLocation[keyof typeof TruncationLocation];
+  (typeof TruncationLocation)[keyof typeof TruncationLocation];
 
 export const Overflow = {
   /**
@@ -54,20 +54,20 @@ export const Overflow = {
    */
   expandX: 'expand-x',
 } as const;
-export type Overflow = typeof Overflow[keyof typeof Overflow];
+export type Overflow = (typeof Overflow)[keyof typeof Overflow];
 
 export const State = {
   none: 'none',
   error: 'error',
 } as const;
-export type State = typeof State[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];
 
 export const SearchState = {
   unset: 'unset',
   error: 'error',
   loading: 'loading',
 } as const;
-export type SearchState = typeof SearchState[keyof typeof SearchState];
+export type SearchState = (typeof SearchState)[keyof typeof SearchState];
 
 /**
  * Generic Typing

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts

@@ -5,7 +5,7 @@ export const Variant = {
   Danger: 'danger',
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 export interface ConfirmationModalProps extends Omit<ModalProps, 'size'> {
   /**

packages/copyable/src/Copyable/Copyable.types.ts

@@ -5,7 +5,7 @@ export const Size = {
   Large: 'large',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export interface CopyableProps extends HTMLElementProps<'div'> {
   /**

packages/empty-state/src/EmptyState.story.tsx

@@ -26,7 +26,7 @@ const StoryVariant = {
   ThreeFeatures: 'Three Features',
 } as const;
 
-type StoryVariant = typeof StoryVariant[keyof typeof StoryVariant];
+type StoryVariant = (typeof StoryVariant)[keyof typeof StoryVariant];
 type StoryProps = BasicEmptyStateProps &
   FeaturesEmptyStateProps & { variant: StoryVariant };
 

packages/guide-cue/src/types.ts

@@ -9,15 +9,16 @@ export const TooltipAlign = {
   Right: Align.Right,
 } as const;
 
-export type TooltipAlign = typeof TooltipAlign[keyof typeof TooltipAlign];
+export type TooltipAlign = (typeof TooltipAlign)[keyof typeof TooltipAlign];
 
 export const TooltipJustify = {
   Start: Justify.Start,
   Middle: Justify.Middle,
   End: Justify.End,
 } as const;
 
-export type TooltipJustify = typeof TooltipJustify[keyof typeof TooltipJustify];
+export type TooltipJustify =
+  (typeof TooltipJustify)[keyof typeof TooltipJustify];
 
 // Exclude these from tooltip (tooltip already extends popover props)
 type ModifiedTooltipProps = Omit<

packages/icon-button/src/types.ts

@@ -7,7 +7,7 @@ export const Size = {
   XLarge: 'xlarge',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 // Since applications can't yet tree-shake, we're duplicating this interface from the types in the namespaces within the Icon package rather than importing the Icon package.
 // TODO: Import {IconProps} from '.../icon`

packages/icon/src/glyphCommon.ts

@@ -5,7 +5,7 @@ export const Size = {
   XLarge: 'xlarge',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export const sizeMap: Record<Size, number> = {
   small: 14,

packages/lib/src/DarkModeProps/index.ts

@@ -13,4 +13,4 @@ export default interface DarkModeProps {
 }
 
 export const Theme = { Light: 'light', Dark: 'dark' } as const;
-export type Theme = typeof Theme[keyof typeof Theme];
+export type Theme = (typeof Theme)[keyof typeof Theme];

packages/lib/src/index.ts

@@ -164,7 +164,7 @@ export const AriaCurrentValue = {
 } as const;
 
 export type AriaCurrentValue =
-  typeof AriaCurrentValue[keyof typeof AriaCurrentValue];
+  (typeof AriaCurrentValue)[keyof typeof AriaCurrentValue];
 
 /**
  * Accepts a type as an argument and makes all of the keys of the type optional

packages/loading-indicator/src/Spinner/Spinner.types.ts

@@ -8,7 +8,7 @@ export const DisplayOption = {
   XlargeVertical: 'xlarge-vertical',
 };
 
-export type DisplayOption = typeof DisplayOption[keyof typeof DisplayOption];
+export type DisplayOption = (typeof DisplayOption)[keyof typeof DisplayOption];
 
 export interface SpinnerProps extends DarkModeProps, HTMLElementProps<'div'> {
   /**

packages/logo/src/Logo.tsx

@@ -22,7 +22,7 @@ export const LogoNames = [
   'UniversityLogoLockup',
 ] as const;
 
-export type LogoName = typeof LogoNames[number];
+export type LogoName = (typeof LogoNames)[number];
 
 interface GenericLogoProps extends LogoProps {
   /**

packages/logo/src/utils.ts

@@ -9,7 +9,7 @@ const SupportedColors = {
   GreenBase: 'green-base',
 } as const;
 
-type SupportedColors = typeof SupportedColors[keyof typeof SupportedColors];
+type SupportedColors = (typeof SupportedColors)[keyof typeof SupportedColors];
 
 const SupportedColorsMap: Record<SupportedColors, string> = {
   [SupportedColors.White]: palette.white,
@@ -19,7 +19,7 @@ const SupportedColorsMap: Record<SupportedColors, string> = {
 } as const;
 
 type SupportedColorsMap =
-  typeof SupportedColorsMap[keyof typeof SupportedColorsMap];
+  (typeof SupportedColorsMap)[keyof typeof SupportedColorsMap];
 
 export { SupportedColors, SupportedColorsMap };
 

packages/marketing-modal/src/MarketingModal/types.ts

@@ -6,14 +6,14 @@ export const BlobPosition = {
   BottomRight: 'bottom right',
 } as const;
 
-export type BlobPosition = typeof BlobPosition[keyof typeof BlobPosition];
+export type BlobPosition = (typeof BlobPosition)[keyof typeof BlobPosition];
 
 export const GraphicStyle = {
   Center: 'center',
   Fill: 'fill',
 } as const;
 
-export type GraphicStyle = typeof GraphicStyle[keyof typeof GraphicStyle];
+export type GraphicStyle = (typeof GraphicStyle)[keyof typeof GraphicStyle];
 
 export interface MarketingModalProps extends Omit<ModalProps, 'size'> {
   /**

packages/menu/src/types.ts

@@ -3,7 +3,7 @@ export const Size = {
   Large: 'large',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export type ElementOf<
   T extends React.ComponentType<React.PropsWithChildren<unknown>>,

packages/modal/src/Modal/Modal.types.ts

@@ -8,15 +8,16 @@ export const CloseIconColor = {
   Light: 'light',
 };
 
-export type CloseIconColor = typeof CloseIconColor[keyof typeof CloseIconColor];
+export type CloseIconColor =
+  (typeof CloseIconColor)[keyof typeof CloseIconColor];
 
 export const ModalSize = {
   Small: 'small',
   Default: 'default',
   Large: 'large',
 } as const;
 
-export type ModalSize = typeof ModalSize[keyof typeof ModalSize];
+export type ModalSize = (typeof ModalSize)[keyof typeof ModalSize];
 
 export type ForwardedRef =
   | React.ForwardedRef<HTMLDivElement | null>

packages/number-input/src/NumberInput/NumberInput.types.ts

@@ -12,22 +12,22 @@ export const Direction = {
   Decrement: 'decrement',
 } as const;
 
-export type Direction = typeof Direction[keyof typeof Direction];
+export type Direction = (typeof Direction)[keyof typeof Direction];
 
 export const State = {
   Error: 'error',
   None: 'none',
 } as const;
 
-export type State = typeof State[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];
 
 export const Size = {
   XSmall: 'xsmall',
   Small: 'small',
   Default: 'default',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export interface UnitOption {
   displayName: string;

packages/palette/src/Palette.story.tsx

@@ -26,7 +26,7 @@ const ShadeNames = [
   'light2',
   'light3',
 ] as const;
-type ShadeName = typeof ShadeNames[number];
+type ShadeName = (typeof ShadeNames)[number];
 
 interface ColorBlockProps extends HTMLElementProps<'div'> {
   hue: HueName;

packages/password-input/src/PasswordInput/PasswordInput.types.ts

@@ -10,15 +10,15 @@ export const State = {
   None: 'none', // gray checkmark, gray text
 } as const;
 
-export type State = typeof State[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];
 
 export const Size = {
   Small: 'small',
   Default: 'default',
   Large: 'large',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export interface NotificationProps {
   notification?: string;

packages/pipeline/src/types.ts

@@ -9,7 +9,7 @@ export const Size = {
   Large: 'large',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export interface StateForStyles {
   hasHiddenStages: boolean;