chore(theme): fix sizeIcon type (#3456)

* chore(remix): fix buggy number inputs * chore(theme): fix sizeIcon types to be any --------- Co-authored-by: Shadi <TheSisb@users.noreply.github.com>
twilio-labs · Aug 30, 2023 · 611a2da · 611a2da
1 parent 424fa78
commit 611a2da
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/.changeset/giant-teachers-turn.md b/.changeset/giant-teachers-turn.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+[Theme] Change the type of sizeIcon tokens in the GenericThemeShape to be `any`. Previously they were incorrectly typed as the value of the token in the Twilio theme, which was preventing consumers from passing custom icon sizes using the Customization Provider.
diff --git a/packages/paste-theme-designer/components/token-option/UnitTokenInput.tsx b/packages/paste-theme-designer/components/token-option/UnitTokenInput.tsx
@@ -29,8 +29,8 @@ function validateInput(value: string, unit: string): string {
   if (value === '') {
     return 'Missing value.';
   }
-  if (!value.includes(unit)) {
-    return `Missing unit: ${unit}`;
+  if (!value.endsWith(unit)) {
+    return `Value must end with unit: "${unit}"`;
   }
 
   const valueWithoutUnit = value.replace(unit, '');
@@ -62,7 +62,7 @@ export const UnitTokenInput: React.FC<React.PropsWithChildren<UnitTokenInputProp
       <Input
         id={inputId}
         aria-describedby={errorText ? errorId : undefined}
-        type="number"
+        type="text"
         value={localValue}
         onChange={(event) => {
           const {value} = event.target;

diff --git a/packages/paste-theme/src/types/GenericThemeShape.ts b/packages/paste-theme/src/types/GenericThemeShape.ts
@@ -67,18 +67,18 @@ export interface GenericThemeShape {
     [key in SizingKeys]: any;
   }>;
   iconSizes: Partial<{
-    sizeIcon05: typeof sizings['sizeIcon05'];
-    sizeIcon10: typeof sizings['sizeIcon10'];
-    sizeIcon20: typeof sizings['sizeIcon20'];
-    sizeIcon30: typeof sizings['sizeIcon30'];
-    sizeIcon40: typeof sizings['sizeIcon40'];
-    sizeIcon50: typeof sizings['sizeIcon50'];
-    sizeIcon60: typeof sizings['sizeIcon60'];
-    sizeIcon70: typeof sizings['sizeIcon70'];
-    sizeIcon80: typeof sizings['sizeIcon80'];
-    sizeIcon90: typeof sizings['sizeIcon90'];
-    sizeIcon100: typeof sizings['sizeIcon100'];
-    sizeIcon110: typeof sizings['sizeIcon110'];
+    sizeIcon05: any;
+    sizeIcon10: any;
+    sizeIcon20: any;
+    sizeIcon30: any;
+    sizeIcon40: any;
+    sizeIcon50: any;
+    sizeIcon60: any;
+    sizeIcon70: any;
+    sizeIcon80: any;
+    sizeIcon90: any;
+    sizeIcon100: any;
+    sizeIcon110: any;
   }>;
   lineHeights: Partial<{
     [key in LineHeightsKeys]: any;