Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve type for icon prop #1615

Merged
merged 4 commits into from
May 22, 2023
Merged

Improve type for icon prop #1615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
271d270
Restrict icon sizes
connor-baer Jun 11, 2022
d60c2e5
Widen default icon size type
connor-baer May 22, 2023
cd6f895
Set Button icon size
connor-baer May 22, 2023
6727601
Properly hide Button icon
connor-baer May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/serious-hats-kick.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': minor
---

Automatically set the `size` prop on the Button's `icon` prop based on the Button's `size` prop.
5 changes: 5 additions & 0 deletions .changeset/tender-mangos-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': patch
---

Properly hide icons inside a Button.
5 changes: 5 additions & 0 deletions .changeset/yellow-lies-yell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/icons': major
---

Changed the `IconProps` default size type to `any`.
7 changes: 1 addition & 6 deletions packages/circuit-ui/components/Button/Button.stories.tsx
View file
Open in desktop
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
13 changes: 9 additions & 4 deletions packages/circuit-ui/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,10 @@ import {
ButtonHTMLAttributes,
AnchorHTMLAttributes,
ReactNode,
FC,
SVGProps,
} from 'react';
import { css } from '@emotion/react';
import { Theme } from '@sumup/design-tokens';
import type { IconComponentType } from '@sumup/icons';

import isPropValid from '../../styles/is-prop-valid.js';
import styled, { StyleProps } from '../../styles/styled.js';
Expand Down Expand Up @@ -65,7 +64,7 @@ export interface BaseProps {
/**
* Display an icon in addition to the text to help to identify the action.
*/
'icon'?: FC<SVGProps<SVGSVGElement>>;
'icon'?: IconComponentType;
/**
* The HTML button type
*/
Expand Down Expand Up @@ -455,7 +454,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'}
connor-baer marked this conversation as resolved.
Show resolved Hide resolved
aria-hidden="true"
/>
)}
{children}
</Content>
</StyledButton>
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,10 +340,10 @@ exports[`Button > styles > should render a button with icon 1`] = `
class="circuit-3"
>
<svg
aria-hidden="true"
class="circuit-4"
fill="none"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
Expand Down
24 changes: 12 additions & 12 deletions packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -575,9 +575,9 @@ exports[`Carousel > styles > should render with children as a function 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -612,9 +612,9 @@ exports[`Carousel > styles > should render with children as a function 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -647,9 +647,9 @@ exports[`Carousel > styles > should render with children as a function 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1249,9 +1249,9 @@ exports[`Carousel > styles > should render with children as a node 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1286,9 +1286,9 @@ exports[`Carousel > styles > should render with children as a node 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1321,9 +1321,9 @@ exports[`Carousel > styles > should render with children as a node 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1922,9 +1922,9 @@ exports[`Carousel > styles > should render with default paused styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1959,9 +1959,9 @@ exports[`Carousel > styles > should render with default paused styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1994,9 +1994,9 @@ exports[`Carousel > styles > should render with default paused styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -2566,9 +2566,9 @@ exports[`Carousel > styles > should render with default styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -2603,9 +2603,9 @@ exports[`Carousel > styles > should render with default styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -2638,9 +2638,9 @@ exports[`Carousel > styles > should render with default styles 1`] = `
class="circuit-26"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
8 changes: 4 additions & 4 deletions ...ges/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,9 @@ exports[`Buttons > styles > should render with default styles 1`] = `
class="circuit-4"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -212,9 +212,9 @@ exports[`Buttons > styles > should render with default styles 1`] = `
class="circuit-4"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -248,9 +248,9 @@ exports[`Buttons > styles > should render with default styles 1`] = `
class="circuit-4"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -282,9 +282,9 @@ exports[`Buttons > styles > should render with default styles 1`] = `
class="circuit-4"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ exports[`CloseButton > should render with default styles 1`] = `
class="circuit-3"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
8 changes: 4 additions & 4 deletions packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,8 @@ exports[`Hamburger > should render with active styles when passed the isActive p
class="circuit-3"
>
<span
aria-hidden="true"
class="circuit-4"
role="presentation"
>
<span
class="circuit-5"
Expand Down Expand Up @@ -471,8 +471,8 @@ exports[`Hamburger > should render with default styles 1`] = `
class="circuit-3"
>
<span
aria-hidden="true"
class="circuit-4"
role="presentation"
>
<span
class="circuit-5"
Expand Down Expand Up @@ -701,8 +701,8 @@ exports[`Hamburger > should render with giga styles 1`] = `
class="circuit-3"
>
<span
aria-hidden="true"
class="circuit-4"
role="presentation"
>
<span
class="circuit-5"
Expand Down Expand Up @@ -931,8 +931,8 @@ exports[`Hamburger > should render with kilo styles 1`] = `
class="circuit-3"
>
<span
aria-hidden="true"
class="circuit-4"
role="presentation"
>
<span
class="circuit-5"
Expand Down
6 changes: 3 additions & 3 deletions packages/circuit-ui/components/IconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import { Children, cloneElement, ReactElement, forwardRef, Ref } from 'react';
import { css, SerializedStyles } from '@emotion/react';
import { Theme } from '@sumup/design-tokens';
import { IconProps } from '@sumup/icons';
import type { IconProps } from '@sumup/icons';

import { hideVisually } from '../../styles/style-mixins.js';
import styled from '../../styles/styled.js';
Expand Down Expand Up @@ -63,8 +63,8 @@ export const IconButton = forwardRef(
const child = Children.only(children);
const iconSize = size === 'kilo' ? '16' : '24';
const icon = cloneElement(child, {
role: 'presentation',
size: child.props.size || iconSize,
'aria-hidden': 'true',
'size': (child.props.size as string) || iconSize,
});
if (
process.env.NODE_ENV !== 'production' &&
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,9 @@ exports[`IconButton > should render with the default styles 1`] = `
class="circuit-3"
>
<svg
aria-hidden="true"
fill="none"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
Expand Down
10 changes: 5 additions & 5 deletions packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,9 +344,9 @@ exports[`ImageInput > Styles > should render with a custom component 1`] = `
class="circuit-8"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -779,9 +779,9 @@ exports[`ImageInput > Styles > should render with a giga button 1`] = `
class="circuit-9"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1172,9 +1172,9 @@ exports[`ImageInput > Styles > should render with an existing image 1`] = `
class="circuit-9"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1601,9 +1601,9 @@ exports[`ImageInput > Styles > should render with default styles 1`] = `
class="circuit-9"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -2064,9 +2064,9 @@ exports[`ImageInput > Styles > should render with invalid styles and an error me
class="circuit-9"
>
<svg
aria-hidden="true"
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
Loading