Skip to content

Commit 0c136e2

Browse files
joshuaellisjoshuaellis
authored
Merge pull request #913 from strapi/release/1.6.5
2 parents 2c348e8 + 64c3145 commit 0c136e2

File tree

122 files changed

+1870
-1603
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+1870
-1603
lines changed

‎docs/.storybook/main.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
const path = require('path');
2-
31
module.exports = {
42
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx)'],
53
addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-dark-mode'],
64
staticDirs: ['../public'],
75
core: {
86
builder: 'webpack5',
97
},
8+
typescript: {
9+
reactDocgen: 'react-docgen-typescript',
10+
reactDocgenTypescriptOptions: {
11+
compilerOptions: {
12+
allowSyntheticDefaultImports: false,
13+
esModuleInterop: false,
14+
},
15+
},
16+
},
1017
webpackFinal: (config) => {
1118
/**
1219
* This is used to avoid webpack import errors where

‎docs/components/ExampleComponent.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/* eslint-disable react/prop-types */
22
import React, { useState } from 'react';
33
import { Cross } from '@strapi/icons';
4-
import { Box, Stack, Typography, Button, Flex, FocusTrap } from '@strapi/design-system';
4+
import { Box, Typography, Button, Flex, FocusTrap } from '@strapi/design-system';
55

66
const TrappedComponent = ({ onClose }) => {
77
const [newLastVisible, setNewLastVisible] = useState(false);
88

99
return (
1010
<FocusTrap onEscape={onClose}>
1111
<Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
12-
<Stack spacing={2}>
12+
<Flex direction="column" alignItems="center" gap={2}>
1313
<Flex justifyContent="space-between">
1414
<Typography variant="beta" as="h2">
1515
Hey folks!
@@ -40,7 +40,7 @@ const TrappedComponent = ({ onClose }) => {
4040

4141
{newLastVisible && <Button id="real-last">Last focusable (at the end)</Button>}
4242
</Flex>
43-
</Stack>
43+
</Flex>
4444
</Box>
4545
</FocusTrap>
4646
);
@@ -51,7 +51,7 @@ export const ExampleComponent = () => {
5151

5252
return (
5353
<Box background="neutral150" padding={10}>
54-
<Stack spacing={2}>
54+
<Flex direction="column" alignItems="center" gap={2}>
5555
{visible && <TrappedComponent onClose={() => setVisible(false)} />}
5656
<Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
5757
<Typography variant="beta" as="h2">
@@ -64,7 +64,7 @@ export const ExampleComponent = () => {
6464
</Button>
6565
</Box>
6666
</Box>
67-
</Stack>
67+
</Flex>
6868
</Box>
6969
);
7070
};

‎docs/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@strapi/design-system-docs",
3-
"version": "1.6.4",
3+
"version": "1.6.5",
44
"license": "MIT",
55
"private": true,
66
"dependencies": {
@@ -10,8 +10,8 @@
1010
"@storybook/builder-webpack5": "^6.5.15",
1111
"@storybook/manager-webpack5": "^6.5.15",
1212
"@storybook/react": "^6.5.15",
13-
"@strapi/design-system": "^1.6.4",
14-
"@strapi/icons": "^1.6.4",
13+
"@strapi/design-system": "^1.6.5",
14+
"@strapi/icons": "^1.6.5",
1515
"qs": "^6.11.0",
1616
"react": "17",
1717
"react-copy-to-clipboard": "^5.1.0",

‎docs/stories/Accordion.stories.mdx

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
IconButton,
1616
TextButton,
1717
TextInput,
18-
Stack,
1918
Tooltip,
2019
} from '@strapi/design-system';
2120

@@ -163,10 +162,10 @@ import { Accordion, AccordionToggle, AccordionContent, AccordionGroup } from '@s
163162
<AccordionToggle
164163
startIcon={<User aria-hidden />}
165164
action={
166-
<Stack horizontal spacing={0}>
165+
<Flex horizontal gap={0}>
167166
<IconButton noBorder onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
168167
<IconButton noBorder onClick={() => console.log('delete')} label="Delete" icon={<Trash />} />
169-
</Stack>
168+
</Flex>
170169
}
171170
title="User informations"
172171
togglePosition="left"

‎docs/stories/Alert.stories.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
22

3-
import { Alert, Box, Stack, Link } from '@strapi/design-system';
3+
import { Alert, Box, Flex, Link } from '@strapi/design-system';
44

55
<Meta title="Design System/Components/Alert" component={Alert} />
66

@@ -67,7 +67,7 @@ Use the variant prop to change the visual style of the Button. You can set the v
6767
}}
6868
>
6969
<Box style={{ width: 700 }}>
70-
<Stack spacing={1}>
70+
<Flex direction="column" alignItems="center" spacing={1}>
7171
<Alert onClose={() => {}} closeLabel="Close" title="Title">
7272
This is the default variant.
7373
</Alert>
@@ -80,7 +80,7 @@ Use the variant prop to change the visual style of the Button. You can set the v
8080
<Alert onClose={() => {}} closeLabel="Close" title="Title" variant="warning">
8181
This is the warning variant.
8282
</Alert>
83-
</Stack>
83+
</Flex>
8484
</Box>
8585
</Story>
8686
</Canvas>

‎docs/stories/Badge.stories.mdx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
22

3-
import { Badge, Stack } from '@strapi/design-system';
3+
import { Badge, Flex } from '@strapi/design-system';
44

55
<Meta title="Design System/Components/Badge" component={Badge} />
66

@@ -30,11 +30,11 @@ single word.
3030

3131
<Canvas>
3232
<Story name="base">
33-
<Stack spacing={2}>
34-
<Stack horizontal spacing={1}>
33+
<Flex direction="column" alignItems="center" gap={2}>
34+
<Flex gap={1}>
3535
<Badge>Badge</Badge>
36-
</Stack>
37-
</Stack>
36+
</Flex>
37+
</Flex>
3838
</Story>
3939
</Canvas>
4040

@@ -44,16 +44,16 @@ Badges can be displayed as active:
4444

4545
<Canvas>
4646
<Story name="active">
47-
<Stack spacing={2}>
48-
<Stack horizontal spacing={1}>
47+
<Flex direction="column" alignItems="center" gap={2}>
48+
<Flex gap={1}>
4949
<Badge size="S" active>
5050
Small Badge
5151
</Badge>
5252
<Badge size="M" active>
5353
Medium Badge
5454
</Badge>
55-
</Stack>
56-
</Stack>
55+
</Flex>
56+
</Flex>
5757
</Story>
5858
</Canvas>
5959

@@ -63,12 +63,12 @@ Badges can be displayed in two sizes: S and M:
6363

6464
<Canvas>
6565
<Story name="size">
66-
<Stack spacing={2}>
67-
<Stack horizontal spacing={1}>
66+
<Flex direction="column" alignItems="center" gap={2}>
67+
<Flex gap={1}>
6868
<Badge size="S">Small Badge</Badge>
6969
<Badge size="M">Medium Badge</Badge>
70-
</Stack>
71-
</Stack>
70+
</Flex>
71+
</Flex>
7272
</Story>
7373
</Canvas>
7474

‎docs/stories/Breadcrumbs.stories.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
22

33
import { CollectionType } from '@strapi/icons';
4-
import { Breadcrumbs, Crumb, Stack } from '@strapi/design-system';
4+
import { Breadcrumbs, Crumb, Flex } from '@strapi/design-system';
55

66
import { DeprecationNotice } from '../components/DeprecationNotice';
77

@@ -33,13 +33,13 @@ Breadcrumbs are visual information only and cannot be navigated. They are mostly
3333

3434
<Canvas>
3535
<Story name="base">
36-
<Stack horizontal spacing={3}>
36+
<Flex gap={3}>
3737
<CollectionType />
3838
<Breadcrumbs label="Category model, name field">
3939
<Crumb>Category</Crumb>
4040
<Crumb>Name</Crumb>
4141
</Breadcrumbs>
42-
</Stack>
42+
</Flex>
4343
</Story>
4444
</Canvas>
4545

‎docs/stories/Button.stories.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
22

33
import { Information, Plus, Write } from '@strapi/icons';
4-
import { Button, Box, Stack } from '@strapi/design-system';
4+
import { Button, Box, Flex } from '@strapi/design-system';
55

66
<Meta title="Design System/Components/Button" component={Button} />
77

@@ -57,11 +57,11 @@ Use the size prop to change the size of the button. You can set the value to `S`
5757
},
5858
}}
5959
>
60-
<Stack spacing={1} horizontal>
60+
<Flex gap={1}>
6161
<Button size="S">Small</Button>
6262
<Button size="M">Medium</Button>
6363
<Button size="L">Large</Button>
64-
</Stack>
64+
</Flex>
6565
</Story>
6666
</Canvas>
6767

@@ -86,15 +86,15 @@ Use the variant prop to change the visual style of the Button. You can set the v
8686
},
8787
}}
8888
>
89-
<Stack spacing={2} horizontal>
89+
<Flex gap={2}>
9090
{['default', 'secondary', 'tertiary', 'success', 'danger', 'success-light', 'danger-light', 'ghost'].map(
9191
(variant) => (
9292
<Button onClick={(e) => console.log(e)} variant={variant} key={variant}>
9393
{variant}
9494
</Button>
9595
),
9696
)}
97-
</Stack>
97+
</Flex>
9898
</Story>
9999
</Canvas>
100100

@@ -130,7 +130,7 @@ You can add start and end icons to the Button component using the `startIcon` an
130130
},
131131
}}
132132
>
133-
<Stack spacing={2} horizontal>
133+
<Flex gap={2}>
134134
<Button startIcon={<Information />}>Information</Button>
135135
<Button variant="secondary" endIcon={<Write />}>
136136
Write content
@@ -139,7 +139,7 @@ You can add start and end icons to the Button component using the `startIcon` an
139139
With a loader
140140
</Button>
141141
<Button startIcon={<Plus />}>Woops</Button>
142-
</Stack>
142+
</Flex>
143143
</Story>
144144
</Canvas>
145145

‎docs/stories/Dialog.stories.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState } from 'react';
22
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
33

44
import { ExclamationMarkCircle, Trash } from '@strapi/icons';
5-
import { Typography, Stack, Flex, Button, Dialog, DialogBody, DialogFooter } from '@strapi/design-system';
5+
import { Typography, Flex, Button, Dialog, DialogBody, DialogFooter } from '@strapi/design-system';
66

77
<Meta title="Design System/Components/Dialog" component={Dialog} />
88

@@ -29,11 +29,11 @@ import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system';
2929
<Button onClick={() => setIsVisible(true)}>Click me</Button>
3030
<Dialog onClose={() => setIsVisible(false)} title="Confirmation" isOpen={isVisible}>
3131
<DialogBody icon={<ExclamationMarkCircle />}>
32-
<Stack spacing={2}>
32+
<Flex direction="column" alignItems="center" gap={2}>
3333
<Flex justifyContent="center">
3434
<Typography id="confirm-description">Are you sure you want to delete this?</Typography>
3535
</Flex>
36-
</Stack>
36+
</Flex>
3737
</DialogBody>
3838
<DialogFooter
3939
startAction={

0 commit comments

Comments
 (0)