fix(theme): making all component tokens optional (#3129)

dbanksdesign · web-flow · commit 0377bccfbea5 · 2022-12-02T16:37:04.000-08:00
diff --git a/.changeset/pretty-crews-repeat.md b/.changeset/pretty-crews-repeat.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-react": patch
+---
+
+fix(theme): making all component tokens optional
diff --git a/packages/ui/src/theme/__tests__/themeType.test.ts b/packages/ui/src/theme/__tests__/themeType.test.ts
@@ -0,0 +1,118 @@
+import { Theme } from '../index';
+
+describe('Amplify UI Theme', () => {
+  describe('components', () => {
+    it('should allow empty components', () => {
+      const theme: Theme = {
+        name: 'test',
+        tokens: {
+          components: {
+            alert: {},
+            authenticator: {},
+            autocomplete: {},
+            badge: {},
+            button: {},
+            card: {},
+            checkbox: {},
+            checkboxfield: {},
+            collection: {},
+            copy: {},
+            divider: {},
+            expander: {},
+            field: {},
+            fieldcontrol: {},
+            fieldgroup: {},
+            fieldmessages: {},
+            fileuploader: {},
+            flex: {},
+            heading: {},
+            highlightmatch: {},
+            icon: {},
+            image: {},
+            inappmessaging: {},
+            link: {},
+            loader: {},
+            menu: {},
+            pagination: {},
+            passwordfield: {},
+            phonenumberfield: {},
+            placeholder: {},
+            radio: {},
+            radiogroup: {},
+            rating: {},
+            searchfield: {},
+            select: {},
+            selectfield: {},
+            sliderfield: {},
+            stepperfield: {},
+            switchfield: {},
+            table: {},
+            tabs: {},
+            text: {},
+            textareafield: {},
+            textfield: {},
+            togglebutton: {},
+            togglebuttongroup: {},
+          },
+        },
+      };
+      // This test doesn't test anything, but
+      // if there is a TS error it will fail
+      expect(theme).toMatchInlineSnapshot(`
+        Object {
+          "name": "test",
+          "tokens": Object {
+            "components": Object {
+              "alert": Object {},
+              "authenticator": Object {},
+              "autocomplete": Object {},
+              "badge": Object {},
+              "button": Object {},
+              "card": Object {},
+              "checkbox": Object {},
+              "checkboxfield": Object {},
+              "collection": Object {},
+              "copy": Object {},
+              "divider": Object {},
+              "expander": Object {},
+              "field": Object {},
+              "fieldcontrol": Object {},
+              "fieldgroup": Object {},
+              "fieldmessages": Object {},
+              "fileuploader": Object {},
+              "flex": Object {},
+              "heading": Object {},
+              "highlightmatch": Object {},
+              "icon": Object {},
+              "image": Object {},
+              "inappmessaging": Object {},
+              "link": Object {},
+              "loader": Object {},
+              "menu": Object {},
+              "pagination": Object {},
+              "passwordfield": Object {},
+              "phonenumberfield": Object {},
+              "placeholder": Object {},
+              "radio": Object {},
+              "radiogroup": Object {},
+              "rating": Object {},
+              "searchfield": Object {},
+              "select": Object {},
+              "selectfield": Object {},
+              "sliderfield": Object {},
+              "stepperfield": Object {},
+              "switchfield": Object {},
+              "table": Object {},
+              "tabs": Object {},
+              "text": Object {},
+              "textareafield": Object {},
+              "textfield": Object {},
+              "togglebutton": Object {},
+              "togglebuttongroup": Object {},
+            },
+          },
+        }
+      `);
+    });
+  });
+});
diff --git a/packages/ui/src/theme/tokens/components/button.ts b/packages/ui/src/theme/tokens/components/button.ts
@@ -63,7 +63,8 @@ export type ButtonTokens<Output extends OutputVariantKey> =
     | 'borderWidth'
     | 'borderStyle'
     | 'borderRadius'
-    | 'color'
+    | 'color',
+    Output
   > & {
     _hover?: StateTokens<Output>;
     _focus?: StateWithShadowTokens<Output>;
@@ -75,7 +76,7 @@ export type ButtonTokens<Output extends OutputVariantKey> =
     link?: LinkVariationTokens<Output>;
     small?: ButtonSizeTokens<Output>;
     large?: ButtonSizeTokens<Output>;
-    loaderWrapper: DesignTokenProperties<'alignItems' | 'gap', Output>;
+    loaderWrapper?: DesignTokenProperties<'alignItems' | 'gap', Output>;
   };
 
 export const button: Required<ButtonTokens<'default'>> = {
diff --git a/packages/ui/src/theme/tokens/components/collection.ts b/packages/ui/src/theme/tokens/components/collection.ts
@@ -14,18 +14,18 @@ type PaginationTokens<Output> = {
 };
 
 type SearchTokens<Output> = {
-  input: DesignTokenProperties<'color', Output>;
-  button: DesignTokenProperties<'color', Output> & {
-    _active: StateTokens<Output>;
-    _disabled: StateTokens<Output>;
-    _focus: StateTokens<Output>;
-    _hover: StateTokens<Output>;
+  input?: DesignTokenProperties<'color', Output>;
+  button?: DesignTokenProperties<'color', Output> & {
+    _active?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    _focus?: StateTokens<Output>;
+    _hover?: StateTokens<Output>;
   };
 };
 
 export interface CollectionTokens<Output extends OutputVariantKey> {
-  pagination: PaginationTokens<Output>;
-  search: SearchTokens<Output>;
+  pagination?: PaginationTokens<Output>;
+  search?: SearchTokens<Output>;
 }
 
 //we are reusing the types from the nested components but new tokens need to be created that reference the previous tokens so that they can inherit the needed values but can be overwritten and only effect the collection component.
diff --git a/packages/ui/src/theme/tokens/components/fileUploader.ts b/packages/ui/src/theme/tokens/components/fileUploader.ts
@@ -11,18 +11,18 @@ type BaseDropZoneTokens<OutputType> = DesignTokenProperties<
 >;
 
 export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
-  dropzone: DesignTokenProperties<
+  dropzone?: DesignTokenProperties<
     'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign'
   > &
     BaseDropZoneTokens<OutputType> & {
-      _active: BaseDropZoneTokens<OutputType>;
+      _active?: BaseDropZoneTokens<OutputType>;
 
-      icon: DesignTokenProperties<'fontSize' | 'color', OutputType>;
+      icon?: DesignTokenProperties<'fontSize' | 'color', OutputType>;
 
-      text: TypographyTokens<OutputType>;
+      text?: TypographyTokens<OutputType>;
     };
 
-  file: DesignTokenProperties<
+  file?: DesignTokenProperties<
     | 'alignItems'
     | 'backgroundColor'
     | 'borderColor'
@@ -34,18 +34,18 @@ export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
     | 'paddingInline',
     OutputType
   > & {
-    name: TypographyTokens<OutputType>;
-    size: TypographyTokens<OutputType>;
-    image: DesignTokenProperties<
+    name?: TypographyTokens<OutputType>;
+    size?: TypographyTokens<OutputType>;
+    image?: DesignTokenProperties<
       'backgroundColor' | 'borderRadius' | 'color' | 'height' | 'width',
       OutputType
     >;
   };
-  loader: DesignTokenProperties<
+  loader?: DesignTokenProperties<
     'strokeWidth' | 'strokeFilled' | 'strokeEmpty' | 'strokeLinecap',
     OutputType
   >;
-  previewer: DesignTokenProperties<
+  previewer?: DesignTokenProperties<
     | 'backgroundColor'
     | 'borderColor'
     | 'borderRadius'
@@ -57,14 +57,14 @@ export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
     | 'paddingInline',
     OutputType
   > & {
-    text: TypographyTokens<OutputType>;
+    text?: TypographyTokens<OutputType>;
 
-    body: DesignTokenProperties<
+    body?: DesignTokenProperties<
       'gap' | 'paddingInline' | 'paddingBlock',
       OutputType
     >;
 
-    footer: DesignTokenProperties<
+    footer?: DesignTokenProperties<
       | 'borderColor'
       | 'borderStyle'
       | 'borderWidth'
diff --git a/packages/ui/src/theme/tokens/components/heading.ts b/packages/ui/src/theme/tokens/components/heading.ts
@@ -8,8 +8,8 @@ type HeadingLevelTokens<Output> = DesignTokenProperties<
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingTokens<Output extends OutputVariantKey> =
-  DesignTokenProperties<'color' | 'lineHeight'> &
-    Record<Level, HeadingLevelTokens<Output>>;
+  DesignTokenProperties<'color' | 'lineHeight', Output> &
+    Partial<Record<Level, HeadingLevelTokens<Output>>>;
 
 export const heading: Required<HeadingTokens<'default'>> = {
   color: { value: '{colors.font.primary.value}' },
diff --git a/packages/ui/src/theme/tokens/components/link.ts b/packages/ui/src/theme/tokens/components/link.ts
@@ -2,9 +2,11 @@ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 
 type LinkState = 'active' | 'focus' | 'hover' | 'visited';
 
-export type LinkTokens<Output extends OutputVariantKey> =
-  DesignTokenProperties<'color'> &
-    Record<LinkState, DesignTokenProperties<'color', Output>>;
+export type LinkTokens<Output extends OutputVariantKey> = DesignTokenProperties<
+  'color',
+  Output
+> &
+  Partial<Record<LinkState, DesignTokenProperties<'color', Output>>>;
 
 export const link: Required<LinkTokens<'default'>> = {
   active: { color: { value: '{colors.font.active.value}' } },
diff --git a/packages/ui/src/theme/tokens/components/rating.ts b/packages/ui/src/theme/tokens/components/rating.ts
@@ -1,9 +1,9 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 
 export type RatingTokens<Output extends OutputVariantKey> = {
-  large: DesignTokenProperties<'size', Output>;
-  default: DesignTokenProperties<'size', Output>;
-  small: DesignTokenProperties<'size', Output>;
+  large?: DesignTokenProperties<'size', Output>;
+  default?: DesignTokenProperties<'size', Output>;
+  small?: DesignTokenProperties<'size', Output>;
   filled?: DesignTokenProperties<'color', Output>;
   empty?: DesignTokenProperties<'color', Output>;
 };
diff --git a/packages/ui/src/theme/tokens/components/select.ts b/packages/ui/src/theme/tokens/components/select.ts
@@ -3,18 +3,25 @@ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
 
 export type SelectTokens<Output extends OutputVariantKey> =
-  DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth'> & {
-    wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position'>;
+  DesignTokenProperties<
+    'paddingInlineEnd' | 'whiteSpace' | 'minWidth',
+    Output
+  > & {
+    wrapper?: DesignTokenProperties<
+      'cursor' | 'display' | 'flex' | 'position',
+      Output
+    >;
     iconWrapper?: DesignTokenProperties<
       | 'alignItems'
       | 'position'
       | 'top'
       | 'right'
       | 'transform'
-      | 'pointerEvents'
+      | 'pointerEvents',
+      Output
     >;
-    option?: DesignTokenProperties<'backgroundColor' | 'color'> & {
-      _disabled?: DesignTokenProperties<'color'>;
+    option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
+      _disabled?: DesignTokenProperties<'color', Output>;
     };
     small?: SelectSizeTokens<Output>;
     large?: SelectSizeTokens<Output>;
diff --git a/packages/ui/src/theme/tokens/components/stepperField.ts b/packages/ui/src/theme/tokens/components/stepperField.ts
@@ -6,7 +6,7 @@ type ButtonStateColorTokens<Output> = DesignTokenProperties<
 >;
 
 export type StepperFieldTokens<Output extends OutputVariantKey> =
-  DesignTokenProperties<'borderColor' | 'flexDirection'> & {
+  DesignTokenProperties<'borderColor' | 'flexDirection', Output> & {
     input?: DesignTokenProperties<'textAlign' | 'color' | 'fontSize', Output>;
     button?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
       _active?: ButtonStateColorTokens<Output>;
diff --git a/packages/ui/src/theme/tokens/components/switchField.ts b/packages/ui/src/theme/tokens/components/switchField.ts
@@ -11,7 +11,7 @@ type SwitchFieldTrackCheckedTokens<OutputType> = DesignTokenProperties<
 >;
 
 export type SwitchFieldTokens<OutputType extends OutputVariantKey> =
-  DesignTokenProperties<'fontSize'> & {
+  DesignTokenProperties<'fontSize', OutputType> & {
     _disabled?: DesignTokenProperties<'opacity', OutputType>;
     _focused?: DesignTokenProperties<'shadow', OutputType>;
     large?: SwitchFieldSizeTokens<OutputType>;
@@ -21,16 +21,16 @@ export type SwitchFieldTokens<OutputType extends OutputVariantKey> =
       'backgroundColor' | 'borderColor' | 'borderRadius' | 'width',
       OutputType
     > & {
-      checked: DesignTokenProperties<'transform', OutputType>;
-      transition: DesignTokenProperties<'duration', OutputType>;
+      checked?: DesignTokenProperties<'transform', OutputType>;
+      transition?: DesignTokenProperties<'duration', OutputType>;
     };
     track?: DesignTokenProperties<
       'backgroundColor' | 'borderRadius' | 'height' | 'width' | 'padding',
       OutputType
     > & {
-      checked: SwitchFieldTrackCheckedTokens<OutputType>;
-      transition: DesignTokenProperties<'duration', OutputType>;
-      _error: SwitchFieldTrackCheckedTokens<OutputType>;
+      checked?: SwitchFieldTrackCheckedTokens<OutputType>;
+      transition?: DesignTokenProperties<'duration', OutputType>;
+      _error?: SwitchFieldTrackCheckedTokens<OutputType>;
     };
   };
 
diff --git a/packages/ui/src/theme/tokens/components/table.ts b/packages/ui/src/theme/tokens/components/table.ts
@@ -37,8 +37,8 @@ export type TableTokens<Output extends OutputVariantKey> =
       hover?: DesignTokenProperties<'backgroundColor', Output>;
       striped?: DesignTokenProperties<'backgroundColor', Output>;
     };
-    header: TableCellTokens<Output>;
-    data: TableCellTokens<Output>;
+    header?: TableCellTokens<Output>;
+    data?: TableCellTokens<Output>;
     caption?: DesignTokenProperties<
       | 'captionSide'
       | 'color'
diff --git a/packages/ui/src/theme/tokens/components/text.ts b/packages/ui/src/theme/tokens/components/text.ts
@@ -7,7 +7,9 @@ type BaseTextTokens<Output> = DesignTokenProperties<'color', Output>;
 
 export type TextTokens<Output extends OutputVariantKey> =
   BaseTextTokens<Output> &
-    Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>;
+    Partial<
+      Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>
+    >;
 
 export const text: Required<TextTokens<'default'>> = {
   // default styles
diff --git a/packages/ui/src/theme/tokens/components/textAreaField.ts b/packages/ui/src/theme/tokens/components/textAreaField.ts
@@ -4,7 +4,8 @@ type TokenKey = 'color' | 'borderColor' | 'fontSize';
 
 export type TextAreaFieldTokens<Output extends OutputVariantKey> =
   DesignTokenProperties<
-    Output extends 'default' ? Exclude<TokenKey, 'fontSize'> : TokenKey
+    Output extends 'default' ? Exclude<TokenKey, 'fontSize'> : TokenKey,
+    Output
   > & {
     _focus?: DesignTokenProperties<'borderColor', Output>;
   };
diff --git a/packages/ui/src/theme/tokens/components/textField.ts b/packages/ui/src/theme/tokens/components/textField.ts
@@ -1,7 +1,7 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 
 export type TextFieldTokens<Output extends OutputVariantKey> =
-  DesignTokenProperties<'color' | 'borderColor' | 'fontSize'> & {
+  DesignTokenProperties<'color' | 'borderColor' | 'fontSize', Output> & {
     _focus?: DesignTokenProperties<'borderColor', Output>;
   };
 
