fix: update icon size prop to match system

washingtonpost · Mar 1, 2022 · e9ae288 · e9ae288
1 parent c6900d4
commit e9ae288
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,6 @@
     "experimental-publish": "make experimental-publish",
     "website:dev": "lerna run dev --scope app --stream",
     "website:build": "lerna run build --scope app --stream",
-    "chromatic": "npx chromatic --project-token=b457f2a94e96",
     "postinstall": "npm run bootstrap",
     "new-component": "make new-component",
     "lint": "eslint --ext .ts,.tsx ui/"

diff --git a/ui/alert-banner/src/AlertBanner.tsx b/ui/alert-banner/src/AlertBanner.tsx
@@ -42,7 +42,7 @@ const AlertBannerTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <Icon size="16" label="Close alert banner">
+      <Icon size="$100" label="Close alert banner">
         <Close fill="currentColor" className={closeIcon()} />
       </Icon>
     </StyledAlertBannerTrigger>
@@ -182,7 +182,7 @@ const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
             },
           }}
         >
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <AlertIcon className={alertIcon()} />
           </Icon>
         </Button>

diff --git a/ui/app-bar/src/play.stories.tsx b/ui/app-bar/src/play.stories.tsx
@@ -47,7 +47,7 @@ const PrimaryNavigationExample = () => {
         px: "$100",
       }}
     >
-      <Icon size="32" label="Open Section Navigation Menu">
+      <Icon size="$200" label="Open Section Navigation Menu">
         <Menu fill="currentColor" />
       </Icon>
       <Box>
@@ -66,7 +66,7 @@ const PrimaryNavigationExample = () => {
           Democracy Dies in Darkness (This is an example using the new system)
         </Box>
       </Box>
-      <Icon size="32" label="Open Account Menu">
+      <Icon size="$200" label="Open Account Menu">
         <Profile fill="currentColor" />
       </Icon>
     </Container>

diff --git a/ui/button/src/play.stories.tsx b/ui/button/src/play.stories.tsx
@@ -60,13 +60,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           {children}
         </Component>
         <Component {...args}>
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -77,13 +77,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           {children}
         </Component>
         <Component {...args} style="fill" variant="primary">
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center" style="fill" variant="primary">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -94,13 +94,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           {children}
         </Component>
         <Component {...args} style="fill" variant="cta">
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center" style="fill" variant="cta">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -113,13 +113,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           {children}
         </Component>
         <Component {...args} style="outline" variant="primary">
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center" style="outline" variant="primary">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -135,13 +135,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
         </Component>
 
         <Component {...args} style="outline" variant="secondary">
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center" style="outline" variant="secondary">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -152,13 +152,13 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           {children}
         </Component>
         <Component {...args} style="outline" variant="cta">
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
         </Component>
         <Component {...args} icon="center" style="outline" variant="cta">
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -183,7 +183,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           variant="primary"
           icon="right"
         >
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
@@ -195,7 +195,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           style="outline"
           variant="primary"
         >
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -222,7 +222,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           variant="secondary"
           icon="right"
         >
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
@@ -234,7 +234,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           style="outline"
           variant="secondary"
         >
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -257,7 +257,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           variant="cta"
           icon="right"
         >
-          <Icon size="16" label="">
+          <Icon size="$100" label="">
             <Asset fill="currentColor" />
           </Icon>
           {children}
@@ -269,7 +269,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           style="outline"
           variant="cta"
         >
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>
@@ -296,7 +296,7 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
           style="outline"
           variant="secondary"
         >
-          <Icon size="16" label="Icon label">
+          <Icon size="$100" label="Icon label">
             <Asset fill="currentColor" />
           </Icon>
         </Component>

diff --git a/ui/icon/README.md b/ui/icon/README.md
@@ -6,7 +6,7 @@ import { Garlic } from "@washingtonpost/wpds-assets";
 
 function Component() {
   return (
-    <Icon size="16" label="garlic">
+    <Icon size="$100" label="garlic">
       <Garlic />
     </Icon>
   );

diff --git a/ui/icon/src/icon.tsx b/ui/icon/src/icon.tsx
@@ -4,22 +4,28 @@ import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden";
 const NAME = "Icon";
 
 interface IconInterface extends React.HTMLAttributes<HTMLOrSVGImageElement> {
-  size?: "16" | "24" | "32";
+  size?: "$100" | "$150" | "$200";
   label: string;
   children?: React.ReactNode;
 }
 
+const Sizes = {
+  $100: "1rem",
+  $150: "1.5rem",
+  $200: "2rem",
+};
+
 export const Icon = React.forwardRef<HTMLOrSVGImageElement, IconInterface>(
-  ({ children, size = "16", label, ...props }, ref) => {
+  ({ children, size = "$100", label, ...props }, ref) => {
     const child = React.Children.only(children);
 
     return (
       <>
         {React.cloneElement(child as React.ReactElement, {
           "aria-hidden": true,
           focusable: false,
-          width: size,
-          height: size,
+          width: Sizes[size] || size,
+          height: Sizes[size] || size,
           role: "img",
           ref,
           ...props,

diff --git a/ui/icon/src/play.stories.tsx b/ui/icon/src/play.stories.tsx
@@ -18,7 +18,7 @@ export const Default = Template.bind({});
 Default.storyName = "Icon";
 
 Default.args = {
-  size: "32",
+  size: "$200",
   label: "Find out more information.",
   children: <Info fill="currentColor" />,
 };