Skip to content

Commit

Permalink
Restrict icon sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
connor-baer committed May 22, 2023
1 parent b9500fc commit ef09973
Show file tree
Hide file tree
Showing 8 changed files with 20 additions and 14 deletions.
5 changes: 5 additions & 0 deletions .changeset/serious-hats-kick.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 1 addition & 6 deletions packages/circuit-ui/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
12 changes: 9 additions & 3 deletions packages/circuit-ui/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/IconButton/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/ListItem/ListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/SideNavigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down

0 comments on commit ef09973

Please sign in to comment.