Restrict icon sizes

sumup-oss · May 22, 2023 · ef09973 · ef09973
1 parent b9500fc
commit ef09973
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/serious-hats-kick.md b/.changeset/serious-hats-kick.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Narrowed the type for icon props to only allow supported sizes. TypeScript will now warn if you pass an icon of the wrong size to a component.
diff --git a/packages/circuit-ui/components/Button/Button.stories.tsx b/packages/circuit-ui/components/Button/Button.stories.tsx
@@ -80,12 +80,7 @@ export const Sizes = (args: ButtonProps) => (
 );
 
 export const WithIcon = (args: ButtonProps) => (
-  <Button
-    {...args}
-    icon={(props) => (
-      <Plus size={args.size === 'kilo' ? '16' : '24'} {...props} />
-    )}
-  >
+  <Button {...args} icon={Plus}>
     Add
   </Button>
 );

diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -20,11 +20,11 @@ import {
   AnchorHTMLAttributes,
   ReactNode,
   FC,
-  SVGProps,
 } from 'react';
 import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
 import { Theme } from '@sumup/design-tokens';
+import { IconProps } from '@sumup/icons';
 
 import styled, { StyleProps } from '../../styles/styled';
 import {
@@ -66,7 +66,7 @@ export interface BaseProps {
   /**
    * Display an icon in addition to the text to help to identify the action.
    */
-  'icon'?: FC<SVGProps<SVGSVGElement>>;
+  'icon'?: FC<IconProps<'16' | '24'>>;
   /**
    * The HTML button type
    */
@@ -466,7 +466,13 @@ export const Button = forwardRef(
           <LoadingLabel>{loadingLabel}</LoadingLabel>
         </LoadingIcon>
         <Content isLoading={Boolean(isLoading)}>
-          {Icon && <Icon css={iconStyles} role="presentation" />}
+          {Icon && (
+            <Icon
+              css={iconStyles}
+              size={props.size === 'kilo' ? '16' : '24'}
+              role="presentation"
+            />
+          )}
           {children}
         </Content>
       </StyledButton>

diff --git a/packages/circuit-ui/components/IconButton/IconButton.tsx b/packages/circuit-ui/components/IconButton/IconButton.tsx
@@ -27,7 +27,7 @@ export interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'stretch'> {
   /**
    * A single icon element.
    */
-  children: ReactElement<IconProps>;
+  children: ReactElement<IconProps<'16' | '24'>>;
   /**
    * Short label to describe the function of the button. Displayed as title
    * on hover, and accessible to screen readers.

diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx
@@ -49,7 +49,7 @@ interface BaseProps {
    * Display a leading component.
    * Pass an icon from `@sumup/icons` or a custom component.
    */
-  leadingComponent?: FC<IconProps> | ReactNode;
+  leadingComponent?: FC<IconProps<'24'>> | ReactNode;
   /**
    * Display a main label.
    */

diff --git a/packages/circuit-ui/components/Popover/Popover.tsx b/packages/circuit-ui/components/Popover/Popover.tsx
@@ -66,7 +66,7 @@ export interface BaseProps {
   /**
    * Display an icon in addition to the label. Designed for 24px icons from `@sumup/icons`.
    */
-  icon?: FC<IconProps>;
+  icon?: FC<IconProps<'24'>>;
   /**
    * Destructive variant, changes the color of label and icon from blue to red to signal to the user that the action
    * is irreversible or otherwise dangerous. Interactive states are the same for destructive variant.

diff --git a/packages/circuit-ui/components/SideNavigation/types.ts b/packages/circuit-ui/components/SideNavigation/types.ts
@@ -25,7 +25,7 @@ export interface PrimaryLinkProps
    * Display an icon in addition to the text to help to identify the link.
    * On narrow viewports, only the icon is displayed.
    */
-  icon: FC<IconProps>;
+  icon: FC<IconProps<'24'>>;
   /**
    * Short label to describe the target of the link.
    */

diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx
@@ -59,7 +59,7 @@ export interface UtilityLinkProps
    * Display an icon in addition to the text to help to identify the link.
    * On narrow viewports, only the icon is displayed.
    */
-  icon: FC<IconProps>;
+  icon: FC<IconProps<'24'>>;
   /**
    * Short label to describe the target of the link.
    */