chore: update custom style props to accept StyleToken type (#1986)

zchenwei · web-flow · commit c58c1e0568e7 · 2022-06-01T16:15:19.000-07:00
* chore: update custom style props to accept StyleToken type

* Create lazy-apes-flow.md

* chore: update custom style props for Loader

* Update lazy-apes-flow.md

* chore: address comments

* chore: address comments
diff --git a/.changeset/lazy-apes-flow.md b/.changeset/lazy-apes-flow.md
@@ -0,0 +1,52 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+feat: update custom style props to accept StyleToken type
+
+For example:
+```jsx
+import {
+  Flex,
+  Loader,
+  Rating,
+  SliderField,
+  SwitchField,
+} from '@aws-amplify/ui-react';
+
+export const StyleTokenExample = () => {
+  return (
+  <Flex>
+    <Loader
+    emptyColor={tokens.colors.black}
+    filledColor={tokens.colors.orange[40]}
+    />
+
+    <Rating
+      value={2.5}
+      fillColor={tokens.colors.red[60]}
+      emptyColor={tokens.colors.green[60]}
+    />
+
+    <SliderField
+      label="Style Props Slider"
+      filledTrackColor={tokens.colors.green[80].value}
+      emptyTrackColor={tokens.colors.green[20].value}
+      thumbColor="red"
+      filledTrackColor={tokens.colors.green[80]}
+      emptyTrackColor={tokens.colors.green[20]}
+      thumbColor={tokens.colors.red[60]}
+      trackSize="15px"
+      defaultValue={50}
+    />
+  
+    <SwitchField
+      label="This is a switch"
+      trackCheckedColor={tokens.colors.green[60]}
+      thumbColor={tokens.colors.orange[10]}
+    />
+  <Flex>
+ );
+}
+
+```
diff --git a/docs/src/components/Layout/index.tsx b/docs/src/components/Layout/index.tsx
@@ -80,10 +80,7 @@ export default function Page({
         <section className="docs-content-body">
           <section className="docs-meta">
             <Heading level={1}>{title}</Heading>
-            <Text
-              fontSize={`${tokens.fontSizes.xl}`}
-              className="docs-description"
-            >
+            <Text fontSize={tokens.fontSizes.xl} className="docs-description">
               {description}
             </Text>
             <View className="docs-component-links">
diff --git a/docs/src/pages/[platform]/components/authenticator/customization.headers-and-footers.web.mdx b/docs/src/pages/[platform]/components/authenticator/customization.headers-and-footers.web.mdx
@@ -47,7 +47,7 @@ The following example customizes these slots with:
         const { tokens } = useTheme();
         return (
           <View textAlign="center" padding={tokens.space.large}>
-            <Text color={`${tokens.colors.neutral['80']}`}>
+            <Text color={tokens.colors.neutral[80]}>
               &copy; All Rights Reserved
             </Text>
           </View>
diff --git a/docs/src/pages/[platform]/components/loader/examples/LoaderColorExample.tsx b/docs/src/pages/[platform]/components/loader/examples/LoaderColorExample.tsx
@@ -5,13 +5,13 @@ export const LoaderColorExample = () => {
   return (
     <>
       <Loader
-        emptyColor={`${tokens.colors.black}`}
-        filledColor={`${tokens.colors.orange[40]}`}
+        emptyColor={tokens.colors.black}
+        filledColor={tokens.colors.orange[40]}
       />
       <Loader
         variation="linear"
-        emptyColor={`${tokens.colors.black}`}
-        filledColor={`${tokens.colors.orange[40]}`}
+        emptyColor={tokens.colors.black}
+        filledColor={tokens.colors.orange[40]}
       />
     </>
   );
diff --git a/docs/src/pages/[platform]/components/rating/examples/RatingColorExample.tsx b/docs/src/pages/[platform]/components/rating/examples/RatingColorExample.tsx
@@ -5,8 +5,8 @@ export const RatingColorExample = () => {
   return (
     <Rating
       value={2.5}
-      fillColor={`${tokens.colors.red[60]}`}
-      emptyColor={`${tokens.colors.green[60]}`}
+      fillColor={tokens.colors.red[60]}
+      emptyColor={tokens.colors.green[60]}
     />
   );
 };
diff --git a/docs/src/pages/[platform]/components/sliderfield/examples/SliderFieldStylePropsExample.tsx b/docs/src/pages/[platform]/components/sliderfield/examples/SliderFieldStylePropsExample.tsx
@@ -6,9 +6,9 @@ export const SliderFieldStylePropsExample = () => {
   return (
     <SliderField
       label="Style Props Slider"
-      filledTrackColor={tokens.colors.green[80].value}
-      emptyTrackColor={tokens.colors.green[20].value}
-      thumbColor="red"
+      filledTrackColor={tokens.colors.green[80]}
+      emptyTrackColor={tokens.colors.green[20]}
+      thumbColor={tokens.colors.red[60]}
       trackSize="15px"
       defaultValue={50}
     />
diff --git a/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldThumbColorExample.tsx b/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldThumbColorExample.tsx
@@ -5,7 +5,7 @@ export const SwitchFieldThumbColorExample = () => {
   return (
     <SwitchField
       label="This is a switch"
-      thumbColor={`${tokens.colors.orange[10]}`}
+      thumbColor={tokens.colors.orange[10]}
     />
   );
 };
diff --git a/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldTrackCheckedColorExample.tsx b/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldTrackCheckedColorExample.tsx
@@ -5,7 +5,7 @@ export const SwitchFieldTrackCheckedColorExample = () => {
   return (
     <SwitchField
       label="This is a switch"
-      trackCheckedColor={`${tokens.colors.green[60]}`}
+      trackCheckedColor={tokens.colors.green[60]}
       defaultChecked={true}
     />
   );
diff --git a/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldTrackColorExample.tsx b/docs/src/pages/[platform]/components/switchfield/examples/SwitchFieldTrackColorExample.tsx
@@ -3,9 +3,6 @@ import { SwitchField, useTheme } from '@aws-amplify/ui-react';
 export const SwitchFieldTrackColorExample = () => {
   const { tokens } = useTheme();
   return (
-    <SwitchField
-      label="This is a switch"
-      trackColor={`${tokens.colors.blue[60]}`}
-    />
+    <SwitchField label="This is a switch" trackColor={tokens.colors.blue[60]} />
   );
 };
diff --git a/docs/src/pages/[platform]/components/table/examples/TableFontSizePropExample.tsx b/docs/src/pages/[platform]/components/table/examples/TableFontSizePropExample.tsx
@@ -12,12 +12,8 @@ export const TableFontSizePropExample = () => {
     <Table>
       <TableBody>
         <TableRow>
-          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
-            Smaller Text
-          </TableCell>
-          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
-            Smaller Text
-          </TableCell>
+          <TableCell fontSize={tokens.fontSizes.xs}>Smaller Text</TableCell>
+          <TableCell fontSize={tokens.fontSizes.xs}>Smaller Text</TableCell>
         </TableRow>
       </TableBody>
     </Table>
diff --git a/examples/next/pages/ui/components/authenticator/custom-slots/index.page.tsx b/examples/next/pages/ui/components/authenticator/custom-slots/index.page.tsx
@@ -36,7 +36,7 @@ const components = {
 
     return (
       <View textAlign="center" padding={tokens.space.large}>
-        <Text color={`${tokens.colors.neutral['80']}`}>
+        <Text color={tokens.colors.neutral[80]}>
           &copy; All Rights Reserved
         </Text>
       </View>
diff --git a/packages/react/src/primitives/Loader/Loader.tsx b/packages/react/src/primitives/Loader/Loader.tsx
@@ -50,7 +50,7 @@ const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
         x2="100%"
         y1="50%"
         y2="50%"
-        style={{ stroke: emptyColor }}
+        style={{ stroke: String(emptyColor) }}
         data-testid={LINEAR_EMPTY}
       />
       <line
@@ -60,7 +60,12 @@ const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
         y2="50%"
         style={{
           // To get rid of the visible stroke linecap when percentage is 0
-          stroke: isDeterminate && percentage === 0 ? 'none' : filledColor,
+          stroke:
+            isDeterminate && percentage === 0
+              ? 'none'
+              : filledColor
+              ? String(filledColor)
+              : undefined,
         }}
         data-testid={LINEAR_FILLED}
       />
@@ -89,7 +94,7 @@ const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
         cy="50%"
         r={`${RADIUS}%`}
         strokeWidth={`${CIRCULAR_STROKE_WIDTH}%`}
-        style={{ stroke: emptyColor }}
+        style={{ stroke: String(emptyColor) }}
         data-testid={CIRCULAR_EMPTY}
       />
       <circle
@@ -98,7 +103,7 @@ const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
         r={`${RADIUS}%`}
         strokeWidth={`${CIRCULAR_STROKE_WIDTH}%`}
         style={{
-          stroke: filledColor,
+          stroke: String(filledColor),
           strokeDasharray: isDeterminate
             ? `${CIRCUMFERENCE}% ${CIRCUMFERENCE}%`
             : undefined,
diff --git a/packages/react/src/primitives/Rating/RatingIcon.tsx b/packages/react/src/primitives/Rating/RatingIcon.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Property } from 'csstype';
+
 import { View } from '../View';
+import { StyleToken } from '../types/style';
 
 interface RatingIconProps {
   icon: JSX.Element;
-  fill: Property.Color;
+  fill: StyleToken<Property.Color>;
   className: string;
 }
 
diff --git a/packages/react/src/primitives/Rating/RatingMixedIcon.tsx b/packages/react/src/primitives/Rating/RatingMixedIcon.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import { View } from '../View';
 import { Property } from 'csstype';
 
+import { View } from '../View';
+import { StyleToken } from '../types/style';
+
 interface RatingMixedIconProps {
-  emptyColor: Property.Color;
+  emptyColor: StyleToken<Property.Color>;
   emptyIcon: JSX.Element;
-  fillColor: Property.Color;
+  fillColor: StyleToken<Property.Color>;
   fillIcon: JSX.Element;
   value: number;
 }
diff --git a/packages/react/src/primitives/SliderField/SliderField.tsx b/packages/react/src/primitives/SliderField/SliderField.tsx
@@ -138,7 +138,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
             className={componentClasses}
             data-testid={SLIDER_TRACK_TEST_ID}
             style={{
-              backgroundColor: emptyTrackColor,
+              backgroundColor: String(emptyTrackColor),
               [`${isVertical ? 'width' : 'height'}`]: trackSize,
             }}
           >
@@ -151,7 +151,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
                 )
               )}
               data-testid={SLIDER_RANGE_TEST_ID}
-              style={{ backgroundColor: filledTrackColor }}
+              style={{ backgroundColor: String(filledTrackColor) }}
             />
           </Track>
           <Thumb
@@ -162,7 +162,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
               ComponentClassNames.SliderFieldThumb,
               classNameModifier(ComponentClassNames.SliderFieldThumb, size)
             )}
-            style={{ backgroundColor: thumbColor }}
+            style={{ backgroundColor: String(thumbColor) }}
           />
         </Root>
       </FieldGroup>
diff --git a/packages/react/src/primitives/types/loader.ts b/packages/react/src/primitives/types/loader.ts
@@ -2,6 +2,7 @@ import { Property } from 'csstype';
 
 import { ViewProps } from '../types/view';
 import { Sizes } from './base';
+import { StyleToken } from './style';
 
 export type LoaderSizes = Sizes;
 
@@ -19,11 +20,11 @@ export interface LoaderProps extends ViewProps {
   /**
    * This will set the filled color of Loader.
    */
-  filledColor?: Property.Color;
+  filledColor?: StyleToken<Property.Color>;
   /**
    * This will set the empty color of Loader.
    */
-  emptyColor?: Property.Color;
+  emptyColor?: StyleToken<Property.Color>;
   /**
    * This will set the percentage of a determinate Loader.
    */
diff --git a/packages/react/src/primitives/types/rating.ts b/packages/react/src/primitives/types/rating.ts
@@ -2,6 +2,7 @@ import { Property } from 'csstype';
 
 import { FlexProps } from './flex';
 import { Sizes } from './base';
+import { StyleToken } from './style';
 
 export type RatingSizes = Sizes;
 
@@ -10,7 +11,7 @@ export interface RatingOptions {
    * The CSS color to use on the empty rating icon
    * Default css value is #A2A2A2
    */
-  emptyColor?: Property.Color;
+  emptyColor?: StyleToken<Property.Color>;
 
   /**
    * This will override which icon to use as the empty icon. This will only
@@ -23,7 +24,7 @@ export interface RatingOptions {
    * The CSS color to use on the filled rating icon
    * Default css value is #ffb400
    */
-  fillColor?: Property.Color;
+  fillColor?: StyleToken<Property.Color>;
 
   /**
    * This will override which icon to use. This will override both
diff --git a/packages/react/src/primitives/types/sliderField.ts b/packages/react/src/primitives/types/sliderField.ts
@@ -1,5 +1,6 @@
 import { Property } from 'csstype';
 
+import { StyleToken } from './style';
 import { TextInputFieldProps } from './textField';
 import { ViewProps } from './view';
 
@@ -12,9 +13,9 @@ export interface SliderFieldProps extends TextInputFieldProps, ViewProps {
   orientation?: SliderOrientation;
   isValueHidden?: boolean;
   trackSize?: string;
-  emptyTrackColor?: Property.Color;
-  filledTrackColor?: Property.Color;
-  thumbColor?: Property.Color;
+  emptyTrackColor?: StyleToken<Property.Color>;
+  filledTrackColor?: StyleToken<Property.Color>;
+  thumbColor?: StyleToken<Property.Color>;
   value?: number;
   defaultValue?: number;
   onChange?: (value: number) => void;
diff --git a/packages/react/src/primitives/types/style.ts b/packages/react/src/primitives/types/style.ts
@@ -30,7 +30,9 @@ export interface ResponsiveObject<PropertyType> {
  * Allows a style prop to be the property type
  * or a design token of that property type.
  */
-type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
+export type StyleToken<PropertyType> =
+  | PropertyType
+  | WebDesignToken<PropertyType>;
 
 export type ResponsiveStyle<PropertyType> =
   | StyleProp<PropertyType>
diff --git a/packages/react/src/primitives/types/switchField.ts b/packages/react/src/primitives/types/switchField.ts
@@ -1,8 +1,9 @@
-import { AriaProps, BaseComponentProps, Sizes } from './base';
-import { BaseStyleProps } from './style';
+import { Property } from 'csstype';
+
+import { Sizes } from './base';
+import { BaseStyleProps, StyleToken } from './style';
 import { InputProps } from './input';
 import { FieldProps, LabelPositions } from './field';
-import { Property } from 'csstype';
 
 export interface SwitchFieldProps
   extends InputProps,
@@ -58,17 +59,17 @@ export interface SwitchFieldProps
    * This property will change the color of the thumb in the switch component
    */
 
-  thumbColor?: Property.Color;
+  thumbColor?: StyleToken<Property.Color>;
 
   /**
    * This property will change the color of the track in the switch component
    */
-  trackColor?: Property.Color;
+  trackColor?: StyleToken<Property.Color>;
 
   /**
    * This property will change the color of the checked track in the switch component
    */
-  trackCheckedColor?: Property.Color;
+  trackCheckedColor?: StyleToken<Property.Color>;
 
   /**
    * This is the value of the switch input and will be submitted with a form submission
