Skip to content

Commit d4b584d

Browse files
joshuaellisjoshuaellis
committed
feat!: remove Icon & add AccessibleIcon
1 parent d3a1cd0 commit d4b584d

39 files changed

+312
-290
lines changed

‎.changeset/proud-kings-relate.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@strapi/design-system': major
3+
---
4+
5+
chore!: remove the Icon component
6+
7+
Users should instead apply `fill` and `stroke` directly to the icon component as theme colors are now possible.

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ dist
107107
storybook-static
108108
**/strapi-icons/src/*
109109
!**/strapi-icons/src/index.ts
110+
!**/strapi-icons/src/symbols-index.ts
110111

111112
############################
112113
# Visual Studio Code

‎BREAKING_CHANGES.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,3 +349,15 @@ Replaced with `UidField` and exported from `@strapi/icons/symbols`
349349
#### Write
350350

351351
Replaced with `Feather`
352+
353+
## Icon has been removed
354+
355+
The `Icon` component has been removed. It's primary function was to allow you to apply theme colors to icons, this is now doable with the actual icon:
356+
357+
```ts
358+
// before
359+
<Icon as={Plus} color="primary700" />
360+
361+
// after
362+
<Plus fill="primary700" />
363+
```

‎docs/.storybook/preview.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,12 @@ const preview: Preview = {
2828
storySort: {
2929
order: [
3030
'Foundations',
31-
['Icons', ['Overview', '*']],
31+
['Overview', 'Icons', ['Overview', '*']],
32+
'Primitives',
33+
['Overview', '*'],
3234
'Design System',
33-
['Primitives', 'Technical Components', 'Components'],
35+
['Technical Components', 'Components'],
36+
'Utilities',
3437
],
3538
},
3639
},

‎docs/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
"@strapi/ui-primitives": "workspace:*",
1313
"qs": "^6.12.0",
1414
"react": "18.2.0",
15-
"react-copy-to-clipboard": "^5.1.0",
1615
"react-dom": "18.2.0",
1716
"storybook-dark-mode": "^3.0.3",
1817
"styled-components": "^5.3.11"

‎docs/stories/Icon.mdx

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎docs/stories/Icon.stories.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎docs/stories/TextButton.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Meta, StoryObj } from '@storybook/react';
2-
import { Icon, TextButton } from '@strapi/design-system';
2+
import { TextButton } from '@strapi/design-system';
33
import { ArrowLeft, ArrowRight } from '@strapi/icons';
44

55
const meta: Meta<typeof TextButton> = {
@@ -19,7 +19,7 @@ export const Base = {
1919

2020
export const Icons = {
2121
render: () => (
22-
<TextButton endIcon={<Icon as={ArrowRight} />} startIcon={<Icon as={ArrowLeft} />}>
22+
<TextButton endIcon={<ArrowRight />} startIcon={<ArrowLeft />}>
2323
Click on me
2424
</TextButton>
2525
),
@@ -29,7 +29,7 @@ export const Icons = {
2929

3030
export const Disabled = {
3131
render: () => (
32-
<TextButton disabled startIcon={<Icon as={ArrowLeft} />}>
32+
<TextButton disabled startIcon={<ArrowLeft />}>
3333
Disabled TextButton
3434
</TextButton>
3535
),
@@ -39,7 +39,7 @@ export const Disabled = {
3939

4040
export const Loading = {
4141
render: () => (
42-
<TextButton loading startIcon={<Icon as={ArrowLeft} />}>
42+
<TextButton loading startIcon={<ArrowLeft />}>
4343
Loading
4444
</TextButton>
4545
),

‎docs/stories/Theme.stories.tsx

Lines changed: 3 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,8 @@
11
import * as React from 'react';
22

33
import { Meta, StoryObj } from '@storybook/react';
4-
import {
5-
Box,
6-
Flex,
7-
Typography,
8-
Grid,
9-
GridItem,
10-
useTheme,
11-
Searchbar,
12-
SearchForm,
13-
Icon,
14-
Tooltip,
15-
darkTheme,
16-
lightTheme,
17-
} from '@strapi/design-system';
18-
import * as AllIcons from '@strapi/icons';
19-
import { CopyToClipboard } from 'react-copy-to-clipboard';
20-
import { ThemeShadows } from 'styled-components';
4+
import { Box, Flex, Typography, Grid, GridItem, useTheme, darkTheme, lightTheme } from '@strapi/design-system';
5+
import { DefaultTheme } from 'styled-components';
216

227
const meta: Meta = {
238
title: 'Design System/Components/Theme',
@@ -108,7 +93,7 @@ export const DarkColors = {
10893
export const Shadows = {
10994
render: () => {
11095
const theme = useTheme();
111-
const shadows = Object.keys(theme.shadows) as Array<keyof ThemeShadows>;
96+
const shadows = Object.keys(theme.shadows) as Array<keyof DefaultTheme['shadows']>;
11297

11398
return (
11499
<Box padding={8} background="neutral100">
@@ -149,77 +134,6 @@ export const Spaces = {
149134
name: 'spaces',
150135
} satisfies Story;
151136

152-
export const Icons = {
153-
render: () => {
154-
const [value, setValue] = React.useState('');
155-
156-
const iconsArray = Object.keys(Icons)
157-
.filter((icon) => {
158-
if (!value) {
159-
return true;
160-
}
161-
162-
return icon.toLowerCase().includes(value.toLowerCase());
163-
})
164-
.sort();
165-
166-
return (
167-
<Box>
168-
<Box paddingBottom={8}>
169-
<SearchForm>
170-
<Searchbar
171-
name="searchbar"
172-
onClear={() => setValue('')}
173-
value={value}
174-
onChange={(e) => setValue(e.target.value)}
175-
clearLabel="Clearing the asset search"
176-
placeholder="e.g: AddAsset"
177-
>
178-
Search for an icon
179-
</Searchbar>
180-
</SearchForm>
181-
</Box>
182-
<Box padding={8} background="neutral100">
183-
<Grid gap={2}>
184-
{iconsArray.map((icon) => {
185-
// eslint-disable-next-line import/namespace
186-
const RealIcon = AllIcons[icon];
187-
188-
return (
189-
<GridItem padding={2} col={2} key={icon} background="neutral0">
190-
<Box>
191-
<Icon
192-
aria-hidden
193-
colors={(theme) => ({
194-
rect: {
195-
fill: theme.colors.danger600,
196-
},
197-
})}
198-
as={RealIcon}
199-
fontSize={5}
200-
/>
201-
</Box>
202-
<Box>
203-
<Tooltip description="Copy import">
204-
<CopyToClipboard text={`import ${icon} from '@strapi/icons/${icon}';`}>
205-
<Typography fontWeight="bold" as="button" type="button">
206-
{icon}
207-
</Typography>
208-
</CopyToClipboard>
209-
</Tooltip>
210-
</Box>
211-
</GridItem>
212-
);
213-
})}
214-
</Grid>
215-
</Box>
216-
</Box>
217-
);
218-
},
219-
220-
name: 'icons',
221-
} satisfies Story;
222-
223137
interface ColorButtonProps {
224138
color: string;
225139
colorKey: string;

‎docs/stories/foundations/icons/Icons.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@ inherit the `color` of the parent container. It's not advised to overwrite the `
1313
<Subtitle>Usage</Subtitle>
1414

1515
```tsx
16-
import { Icon } from '@strapi/design-system';
1716
import { ICON_NAME } from '@strapi/icons';
1817

1918
const MyComponent = () => {
20-
return <Icon as={ICON_NAME} color="primary700" />;
19+
return <ICON_NAME fill="primary700" />;
2120
};
2221
```
2322

23+
All `SVGProps` are accepted with `fill` & `stroke` being enhanced to support either theme colors or regular string values as expected.
24+
2425
<Subtitle>All Icons</Subtitle>
2526

2627
Click on an icon to copy it's import statement.

‎docs/stories/foundations/icons/Icons.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Icon, Typography, lightTheme } from '@strapi/design-system';
1+
import { Typography, lightTheme } from '@strapi/design-system';
22
import * as Icons from '@strapi/icons';
33
import styled, { DefaultTheme } from 'styled-components';
44

@@ -40,7 +40,7 @@ const AllIcons = ({ color, size }: AllIconsProps) => {
4040
>
4141
{Object.entries(Icons).map(([name, Component]) => (
4242
<IconGridItem key={name} style={{ width: gridSize, height: gridSize }} onClick={handleClick(name)}>
43-
<Icon color={color} as={Component} width={`${size}px`} height={`${size}px`} />
43+
<Component fill={color} width={`${size}px`} height={`${size}px`} />
4444
<IconTitle variant="pi">{name}</IconTitle>
4545
</IconGridItem>
4646
))}

‎docs/stories/foundations/overview.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Title, Meta } from '@storybook/blocks';
2+
3+
<Meta title="Foundations/Overview" parameters={{ viewMode: 'docs' }} />
4+
5+
<Title>Overview</Title>

‎docs/stories/primitives/Combobox.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Check } from '@strapi/icons';
33
import { Combobox } from '@strapi/ui-primitives';
44

55
const meta: Meta<typeof Combobox.Root> = {
6-
title: 'Design System/Primitives/Combobox',
6+
title: 'Primitives/Combobox',
77
component: Combobox.Root,
88
};
99

‎docs/stories/primitives/Select.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Check } from '@strapi/icons';
33
import { Select } from '@strapi/ui-primitives';
44

55
const meta: Meta<typeof Select.Root> = {
6-
title: 'Design System/Primitives/Select',
6+
title: 'Primitives/Select',
77
component: Select.Root,
88
};
99

‎docs/stories/primitives/overview.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Title, Meta } from '@storybook/blocks';
2+
3+
<Meta title="Primitives/Overview" parameters={{ viewMode: 'docs' }} />
4+
5+
<Title>Overview</Title>

‎docs/stories/utilities/AccessibleIcon.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Title, Subtitle, Meta, ArgTypes } from '@storybook/blocks';
2+
import { AccessibleIcon } from '@strapi/design-system';
3+
4+
<Meta title="Utilities/Accessible Icon" parameters={{ viewMode: 'docs' }} />
5+
6+
<Title>Accessible Icon</Title>
7+
<Subtitle>Makes icons accessible by adding a label.</Subtitle>
8+
9+
## Usage
10+
11+
```tsx
12+
import { AccessibleIcon } from '@strapi/design-system';
13+
import { Cross } from '@strapi/icons';
14+
15+
const CloseButton = ({ onClose }) => {
16+
return (
17+
<button onClick={onClose}>
18+
<AccessibleIcon label="Close">
19+
<Cross />
20+
</AccessibleIcon>
21+
</button>
22+
);
23+
};
24+
```
25+
26+
## Props
27+
28+
<ArgTypes of={AccessibleIcon} />
29+
30+
## Accessibility
31+
32+
Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.
33+
34+
This is built with [Visually Hidden](../?path=/docs/utilities-visually-hidden--docs).

‎docs/stories/utilities/VisuallyHidden.mdx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Title, Subtitle, Meta, ArgTypes } from '@storybook/blocks';
2+
import { VisuallyHidden } from '@strapi/design-system';
3+
4+
<Meta title="Utilities/Visually Hidden" parameters={{ viewMode: 'docs' }} />
5+
6+
<Title>Visually Hidden</Title>
7+
<Subtitle>Hides content from the screen in an accessible way.</Subtitle>
8+
9+
## Usage
10+
11+
```tsx
12+
import { VisuallyHidden } from '@strapi/design-system';
13+
import { Cross } from '@strapi/icons';
14+
15+
const CloseButton = ({ onClose }) => {
16+
return (
17+
<button onClick={onClose}>
18+
<Cross />
19+
<VisuallyHidden>Close</VisuallyHidden>
20+
</button>
21+
);
22+
};
23+
```
24+
25+
## Props
26+
27+
<ArgTypes of={VisuallyHidden} />
28+
29+
## Accessibility
30+
31+
This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.

0 commit comments

Comments
 (0)