paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

Improve icons on Button + IconButton

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-18 18:04:07 +02:00
parent 222b18a67f
commit eb66b480dd
8 changed files with 89 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Button/Button.stories.tsx
+29 -16
View File
@@ -19,6 +19,7 @@ import { Button } from './Button';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { ButtonProps } from './types';
import { Icon } from '../Icon';
const meta = {
title: 'Components/Button',
@@ -55,10 +56,10 @@ export const Variants: Story = {
},
render: () => (
<Flex align="center">
<Button iconStart="cloud" variant="primary">
<Button iconStart={<Icon name="cloud" />} variant="primary">
Button
</Button>
<Button iconStart="cloud" variant="secondary">
<Button iconStart={<Icon name="cloud" />} variant="secondary">
Button
</Button>
</Flex>
@@ -71,8 +72,12 @@ export const Sizes: Story = {
},
render: () => (
<Flex align="center">
<Button size="medium">Medium</Button>
<Button size="small">Small</Button>
<Button size="medium" iconStart={<Icon name="cloud" />}>
Medium
</Button>
<Button size="small" iconStart={<Icon name="cloud" />}>
Small
</Button>
</Flex>
),
};
@@ -83,9 +88,13 @@ export const WithIcons: Story = {
},
render: args => (
<Flex align="center">
<Button {...args} iconStart="cloud" />
<Button {...args} iconEnd="chevron-right" />
<Button {...args} iconStart="cloud" iconEnd="chevron-right" />
<Button {...args} iconStart={<Icon name="cloud" />} />
<Button {...args} iconEnd={<Icon name="chevron-right" />} />
<Button
{...args}
iconStart={<Icon name="cloud" />}
iconEnd={<Icon name="chevron-right" />}
/>
</Flex>
),
};
@@ -96,9 +105,13 @@ export const FullWidth: Story = {
},
render: args => (
<Flex direction="column" gap="4" style={{ width: '300px' }}>
<Button {...args} iconStart="cloud" />
<Button {...args} iconEnd="chevron-right" />
<Button {...args} iconStart="cloud" iconEnd="chevron-right" />
<Button {...args} iconStart={<Icon name="cloud" />} />
<Button {...args} iconEnd={<Icon name="chevron-right" />} />
<Button
{...args}
iconStart={<Icon name="cloud" />}
iconEnd={<Icon name="chevron-right" />}
/>
</Flex>
),
};
@@ -150,22 +163,22 @@ export const Playground: Story = {
Button
</Button>
<Button
iconStart="cloud"
iconStart={<Icon name="cloud" />}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
Button
</Button>
<Button
iconEnd="chevron-right"
iconEnd={<Icon name="chevron-right" />}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
Button
</Button>
<Button
iconStart="cloud"
iconEnd="chevron-right"
iconStart={<Icon name="cloud" />}
iconEnd={<Icon name="chevron-right" />}
style={{ width: '200px' }}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
@@ -180,7 +193,7 @@ export const Playground: Story = {
Button
</Button>
<Button
iconStart="cloud"
iconStart={<Icon name="cloud" />}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
disabled
@@ -188,7 +201,7 @@ export const Playground: Story = {
Button
</Button>
<Button
iconEnd="chevron-right"
iconEnd={<Icon name="chevron-right" />}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
disabled
packages/canon/src/components/Button/Button.tsx
+18 -3
View File
@@ -15,7 +15,6 @@
*/
import { forwardRef } from 'react';
import { Icon } from '../Icon';
import clsx from 'clsx';
import { useResponsiveValue } from '../../hooks/useResponsiveValue';
@@ -50,9 +49,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
style={style}
{...rest}
>
{iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
{iconStart && (
<span
className="canon-ButtonIcon"
aria-hidden="true"
data-size={responsiveSize}
>
{iconStart}
</span>
)}
{children}
{iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
{iconEnd && (
<span
className="canon-ButtonIcon"
aria-hidden="true"
data-size={responsiveSize}
>
{iconEnd}
</span>
)}
</button>
);
},
packages/canon/src/components/Button/styles.css
+6 -4
View File
@@ -94,12 +94,14 @@
height: 32px;
}
.canon-Button[data-size='small'] .canon-ButtonIcon {
.canon-ButtonIcon[data-size='small'],
.canon-ButtonIcon[data-size='small'] svg {
width: 1rem;
height: 1rem;
}
.canon-Button[data-size='medium'] .canon-ButtonIcon {
width: 1.5rem;
height: 1.5rem;
.canon-ButtonIcon[data-size='medium'],
.canon-ButtonIcon[data-size='medium'] svg {
width: 1.25rem;
height: 1.25rem;
}
packages/canon/src/components/Button/types.ts
+4 -3
View File
@@ -13,8 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { IconNames } from '../Icon';
import type { ButtonOwnProps } from './Button.props';
import { ReactElement } from 'react';
/**
* Properties for {@link Button}
@@ -43,10 +44,10 @@ export interface ButtonProps
/**
* Optional icon to display at the start of the button
*/
iconStart?: IconNames;
iconStart?: ReactElement;
/**
* Optional icon to display at the end of the button
*/
iconEnd?: IconNames;
iconEnd?: ReactElement;
}
packages/canon/src/components/IconButton/IconButton.stories.tsx
+15 -7
View File
@@ -19,6 +19,7 @@ import { IconButton } from './IconButton';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { IconButtonProps } from './types';
import { Icon } from '../Icon';
const meta = {
title: 'Components/IconButton',
@@ -44,7 +45,8 @@ type Story = StoryObj<typeof meta>;
export const Variants: Story = {
args: {
icon: 'cloud',
icon: <Icon name="cloud" />,
'aria-label': 'Cloud icon button',
},
parameters: {
argTypes: {
@@ -63,7 +65,8 @@ export const Variants: Story = {
export const Sizes: Story = {
args: {
icon: 'cloud',
icon: <Icon name="cloud" />,
'aria-label': 'Cloud icon button',
},
render: args => (
<Flex align="center">
@@ -75,8 +78,9 @@ export const Sizes: Story = {
export const Disabled: Story = {
args: {
icon: 'cloud',
icon: <Icon name="cloud" />,
disabled: true,
'aria-label': 'Cloud icon button',
},
render: args => (
<Flex direction="row" gap="4">
@@ -88,7 +92,8 @@ export const Disabled: Story = {
export const Responsive: Story = {
args: {
icon: 'cloud',
icon: <Icon name="cloud" />,
'aria-label': 'Cloud icon button',
variant: {
initial: 'primary',
sm: 'secondary',
@@ -104,7 +109,8 @@ const variants: string[] = ['primary', 'secondary'];
export const Playground: Story = {
args: {
icon: 'cloud',
icon: <Icon name="cloud" />,
'aria-label': 'Cloud icon button',
},
render: args => (
<Flex direction="column">
@@ -120,13 +126,15 @@ export const Playground: Story = {
/>
<IconButton
{...args}
icon="chevron-right"
icon={<Icon name="chevron-right" />}
aria-label="Chevron right icon button"
variant={variant as IconButtonProps['variant']}
size={size as IconButtonProps['size']}
/>
<IconButton
{...args}
icon="chevron-right"
icon={<Icon name="chevron-right" />}
aria-label="Chevron right icon button"
variant={variant as IconButtonProps['variant']}
size={size as IconButtonProps['size']}
/>
packages/canon/src/components/IconButton/IconButton.tsx
+7 -2
View File
@@ -15,7 +15,6 @@
*/
import { forwardRef } from 'react';
import { Icon } from '../Icon';
import clsx from 'clsx';
import { useResponsiveValue } from '../../hooks/useResponsiveValue';
@@ -45,7 +44,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
style={style}
{...rest}
>
<Icon name={icon} className="canon-IconButtonIcon" />
<span
className="canon-IconButtonIcon"
aria-hidden="true"
data-size={responsiveSize}
>
{icon}
</span>
</button>
);
},
packages/canon/src/components/IconButton/styles.css
+6 -4
View File
@@ -94,12 +94,14 @@
width: 32px;
}
.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
.canon-IconButtonIcon[data-size='small'],
.canon-IconButtonIcon[data-size='small'] svg {
width: 1rem;
height: 1rem;
}
.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
width: 1.5rem;
height: 1.5rem;
.canon-IconButtonIcon[data-size='medium'],
.canon-IconButtonIcon[data-size='medium'] svg {
width: 1.25rem;
height: 1.25rem;
}
packages/canon/src/components/IconButton/types.ts
+4 -3
View File
@@ -13,8 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { IconNames } from '../Icon';
import type { IconButtonOwnProps } from './IconButton.props';
import { ReactElement } from 'react';
/**
* Properties for {@link IconButton}
@@ -36,7 +37,7 @@ export interface IconButtonProps
variant?: IconButtonOwnProps['variant'];
/**
* Icon to display at the start of the button
* Icon to display in the button
*/
icon: IconNames;
icon: ReactElement;
}