Skip to content

Commit daae1f0

Browse files
madhurisandbhorjoshuaellis
madhurisandbhor
and
joshuaellis
authored
Feat: responsive styles (#1737)
Co-authored-by: Josh <[email protected]>
1 parent 91e3070 commit daae1f0

File tree

95 files changed

+1272
-660
lines changed

Some content is hidden

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

95 files changed

+1272
-660
lines changed

‎.changeset/lemon-bikes-wait.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@strapi/design-system': major
3+
---
4+
5+
feat: responsive props are now supported in base Box component and removed existing media queries from theme

‎docs/stories/00-getting started/migration guides/migration-v1-v2.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,12 @@ return (
126126
+ import { Toggle } from '@strapi/design-system'
127127
```
128128

129+
### Deprecated props
130+
131+
- `hiddenS` & `hiddenXS` has been removed as all CSS props are now responsive including `display`.
132+
- MediaQueries with tablet and mobile breakpoints removed from theme and replaced with new Breakpoints. Users can now
133+
apply device specific styles using `initial`, `small`, 'medium' and `large` breakpoints.
134+
129135
### Upgraded styled-components to V6
130136

131137
#### `as` is no longer a prop, use `tag` instead

‎docs/stories/04-components/Button.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,18 +163,18 @@ export const AllVariants = {
163163
render: () => {
164164
return (
165165
<Grid.Root gridCols={OPTIONS.length + 1} gap={6}>
166-
<Grid.Item>
166+
<Grid.Item xs={1}>
167167
<Typography variant="sigma">Variant</Typography>
168168
</Grid.Item>
169169
{OPTIONS.map((opt) => (
170-
<Grid.Item key={opt}>
170+
<Grid.Item xs={1} key={opt}>
171171
<Typography variant="sigma">{opt}</Typography>
172172
</Grid.Item>
173173
))}
174174
{BUTTON_VARIANTS.map((variant) => {
175175
return (
176176
<React.Fragment key={variant}>
177-
<Grid.Item>
177+
<Grid.Item xs={1}>
178178
<Typography>{variant}</Typography>
179179
</Grid.Item>
180180
{OPTIONS.map((opt) => {
@@ -196,7 +196,7 @@ export const AllVariants = {
196196
}
197197

198198
return (
199-
<Grid.Item alignItems="center" justifyContent="center" key={`${variant}-${opt}`}>
199+
<Grid.Item xs={1} alignItems="center" justifyContent="center" key={`${variant}-${opt}`}>
200200
<Button {...props}>submit</Button>
201201
</Grid.Item>
202202
);

‎docs/stories/04-components/Modal.stories.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,26 +102,26 @@ const meta: Meta<ModalArgs> = {
102102
<form action="#" onSubmit={(e) => e.preventDefault()}>
103103
<Modal.Body>
104104
<Grid.Root gridCols={2} gap={6}>
105-
<Grid.Item col={2}>
105+
<Grid.Item xs={2}>
106106
<Field.Root name="name" required>
107107
<Field.Label>Name</Field.Label>
108108
<Field.Input />
109109
</Field.Root>
110110
</Grid.Item>
111-
<Grid.Item col={2}>
111+
<Grid.Item xs={2}>
112112
<Checkbox checked={scheduleRelease} onCheckedChange={setScheduleRelease} name="schedule" value="true">
113113
Schedule release
114114
</Checkbox>
115115
</Grid.Item>
116116
{scheduleRelease ? (
117117
<>
118-
<Grid.Item col={1}>
118+
<Grid.Item xs={1}>
119119
<Field.Root name="date" required>
120120
<Field.Label>Date</Field.Label>
121121
<DatePicker />
122122
</Field.Root>
123123
</Grid.Item>
124-
<Grid.Item col={1}>
124+
<Grid.Item xs={1}>
125125
<Field.Root name="time" required>
126126
<Field.Label>time</Field.Label>
127127
<TimePicker />
@@ -241,26 +241,26 @@ export const CloseOnSuccess = {
241241
>
242242
<Modal.Body>
243243
<Grid.Root gridCols={2} gap={6}>
244-
<Grid.Item col={2}>
244+
<Grid.Item xs={2}>
245245
<Field.Root name="name" required>
246246
<Field.Label>Name</Field.Label>
247247
<Field.Input />
248248
</Field.Root>
249249
</Grid.Item>
250-
<Grid.Item col={2}>
250+
<Grid.Item xs={2}>
251251
<Checkbox checked={scheduleRelease} onCheckedChange={setScheduleRelease} name="schedule" value="true">
252252
Schedule release
253253
</Checkbox>
254254
</Grid.Item>
255255
{scheduleRelease ? (
256256
<>
257-
<Grid.Item col={1}>
257+
<Grid.Item xs={1}>
258258
<Field.Root name="date" required>
259259
<Field.Label>Date</Field.Label>
260260
<DatePicker />
261261
</Field.Root>
262262
</Grid.Item>
263-
<Grid.Item col={1}>
263+
<Grid.Item xs={1}>
264264
<Field.Root name="time" required>
265265
<Field.Label>time</Field.Label>
266266
<TimePicker />

‎docs/stories/04-components/Tabs.stories.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ const meta: Meta<TabsArgs> = {
3333
<Box padding={4}>
3434
<Typography tag="p">The default settings for your attribute</Typography>
3535
<Grid.Root tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
36-
<Grid.Item col={1}>
36+
<Grid.Item xs={1}>
3737
<Field.Root>
3838
<Field.Label>Name</Field.Label>
3939
<Field.Input />
4040
</Field.Root>
4141
</Grid.Item>
42-
<Grid.Item col={1}>
42+
<Grid.Item xs={1}>
4343
<Field.Root>
4444
<Field.Label>Description</Field.Label>
4545
<Field.Input />
@@ -55,7 +55,7 @@ const meta: Meta<TabsArgs> = {
5555
<Box padding={4}>
5656
<Typography tag="p">The advanced settings for your attribute</Typography>
5757
<Grid.Root tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
58-
<Grid.Item col={1}>
58+
<Grid.Item xs={1}>
5959
<Field.Root>
6060
<Field.Label>Regex</Field.Label>
6161
<Field.Input />
@@ -85,13 +85,13 @@ const meta: Meta<TabsArgs> = {
8585
<Box padding={4}>
8686
<Typography tag="p">The default settings for your attribute</Typography>
8787
<Grid.Root tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
88-
<Grid.Item col={1}>
88+
<Grid.Item xs={1}>
8989
<Field.Root>
9090
<Field.Label>Name</Field.Label>
9191
<Field.Input />
9292
</Field.Root>
9393
</Grid.Item>
94-
<Grid.Item col={1}>
94+
<Grid.Item xs={1}>
9595
<Field.Root>
9696
<Field.Label>Description</Field.Label>
9797
<Field.Input />
@@ -107,7 +107,7 @@ const meta: Meta<TabsArgs> = {
107107
<Box padding={4}>
108108
<Typography tag="p">The advanced settings for your attribute</Typography>
109109
<Grid.Root tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
110-
<Grid.Item col={1}>
110+
<Grid.Item xs={1}>
111111
<Field.Root>
112112
<Field.Label>Regex</Field.Label>
113113
<Field.Input />
@@ -150,13 +150,13 @@ export const Disabled = {
150150
<Box padding={4}>
151151
<Typography tag="p">The default settings for your attribute</Typography>
152152
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
153-
<Grid.Item col={1}>
153+
<Grid.Item xs={1}>
154154
<Field.Root>
155155
<Field.Label>Name</Field.Label>
156156
<Field.Input />
157157
</Field.Root>
158158
</Grid.Item>
159-
<Grid.Item col={1}>
159+
<Grid.Item xs={1}>
160160
<Field.Root>
161161
<Field.Label>Description</Field.Label>
162162
<Field.Input />
@@ -172,7 +172,7 @@ export const Disabled = {
172172
<Box padding={4}>
173173
<Typography tag="p">The advanced settings for your attribute</Typography>
174174
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
175-
<Grid.Item col={1}>
175+
<Grid.Item xs={1}>
176176
<Field.Root>
177177
<Field.Label>Regex</Field.Label>
178178
<Field.Input />
@@ -223,13 +223,13 @@ export const SimpleVariant = {
223223
<Box padding={4}>
224224
<Typography tag="p">The default settings for your attribute</Typography>
225225
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
226-
<Grid.Item col={1}>
226+
<Grid.Item xs={1}>
227227
<Field.Root>
228228
<Field.Label>Name</Field.Label>
229229
<Field.Input />
230230
</Field.Root>
231231
</Grid.Item>
232-
<Grid.Item col={1}>
232+
<Grid.Item xs={1}>
233233
<Field.Root>
234234
<Field.Label>Description</Field.Label>
235235
<Field.Input />
@@ -245,7 +245,7 @@ export const SimpleVariant = {
245245
<Box padding={4}>
246246
<Typography tag="p">The advanced settings for your attribute</Typography>
247247
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
248-
<Grid.Item col={1}>
248+
<Grid.Item xs={1}>
249249
<Field.Root>
250250
<Field.Label>Regex</Field.Label>
251251
<Field.Input />
@@ -284,13 +284,13 @@ export const Error = {
284284
<Box padding={4}>
285285
<Typography tag="p">The default settings for your attribute</Typography>
286286
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
287-
<Grid.Item col={1}>
287+
<Grid.Item xs={1}>
288288
<Field.Root>
289289
<Field.Label>Name</Field.Label>
290290
<Field.Input />
291291
</Field.Root>
292292
</Grid.Item>
293-
<Grid.Item col={1}>
293+
<Grid.Item xs={1}>
294294
<Field.Root>
295295
<Field.Label>Description</Field.Label>
296296
<Field.Input />
@@ -306,7 +306,7 @@ export const Error = {
306306
<Box padding={4}>
307307
<Typography tag="p">The advanced settings for your attribute</Typography>
308308
<Grid tag="fieldset" gap={4} padding="0px" gridCols={2} borderWidth={0} marginTop={2}>
309-
<Grid.Item col={1}>
309+
<Grid.Item xs={1}>
310310
<Field.Root>
311311
<Field.Label>Regex</Field.Label>
312312
<Field.Input />

‎docs/stories/Box.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,14 @@ The `Box` component allows creation of containers according to the guidelines of
2424

2525
<Canvas of={BoxStories.Base} />
2626

27-
## Box with responsive spaces
27+
## Box with responsive styles
2828

29-
The `Box` component with responsive padding added.
29+
Responsive styles allow you to specify different values for properties based on different screen sizes or breakpoints.
30+
The values are defined as an object or array and are applied using a `min-width` condition. If a value is not specified
31+
for a particular breakpoint, it will inherit the value from the previous breakpoint. The breakpoints are defined in
32+
theme as : `initial: 0px, small: 520px, medium: 768px, large: 1280px`.
3033

31-
<Canvas of={BoxStories.ResponsiveSpaces} />
34+
<Canvas of={BoxStories.ResponsiveStyles} />
3235

3336
## Box with logical properties
3437

@@ -40,3 +43,4 @@ and `marginInline` added.
4043
## Props
4144

4245
<TypeTable of={Box} />
46+
```

‎docs/stories/Box.stories.tsx

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,44 +12,83 @@ type Story = StoryObj<typeof Box>;
1212

1313
export const Base = {
1414
render: () => (
15-
<Box padding={4} background="primary700" shadow="filterShadow" borderColor="danger600">
15+
<Box padding={4} margin={2} background="primary700" shadow="filterShadow" borderColor="danger600">
1616
<Typography textColor="neutral0">Hello world</Typography>
1717
</Box>
1818
),
1919

2020
name: 'base',
2121
} satisfies Story;
2222

23-
export const ResponsiveSpaces = {
23+
export const ResponsiveStyles = {
2424
render: () => (
2525
<Box
26-
padding={[11, 6, 1]}
27-
background="primary700"
28-
shadow="filterShadow"
29-
hiddenXS
30-
borderColor="danger600"
26+
paddingTop={{ initial: '4rem', medium: '14px', large: 6 }}
27+
padding={['2rem', '4rem', '8rem']}
28+
marginTop={{ initial: 1, medium: '1rem', large: '22px' }}
29+
margin={{ initial: 2, medium: [2, '4px'], large: [6, '4px', 8] }}
30+
background={{ initial: 'danger600', small: 'pink', medium: 'neutral600', large: 'invalidValue600' }}
31+
fontSize={{ initial: 2, medium: '8px', large: 5 }}
32+
borderColor={{ initial: 'danger600', medium: 'success600', large: 'warning600' }}
3133
borderStyle="dotted"
32-
borderWidth="2px"
34+
borderWidth={{ initial: '2px', medium: '4px', large: '8px' }}
35+
shadow="filterShadow"
36+
position="absolute"
37+
top={{
38+
initial: 0,
39+
medium: 2,
40+
large: 'invalidValue',
41+
}}
42+
fontWeight={{
43+
initial: 'regular',
44+
small: 'semiBold',
45+
medium: 'bold',
46+
large: 850,
47+
}}
48+
pointerEvents={{
49+
initial: 'auto',
50+
small: 'none',
51+
medium: 'all',
52+
}}
53+
textAlign={{ initial: 'center' }}
54+
flex={{
55+
initial: '1 1 auto',
56+
medium: '1',
57+
large: '1 1 0',
58+
}}
59+
borderRadius={{
60+
initial: 2,
61+
small: 4,
62+
medium: '1rem',
63+
large: 6,
64+
}}
65+
hasRadius
66+
textTransform={{ initial: 'uppercase', medium: 'lowercase', large: 'capitalize' }}
3367
>
34-
<Typography textColor="neutral0">Hello world</Typography>
68+
<Typography
69+
textColor={{ initial: 'neutral0', medium: 'neutral100', large: 'neutral200' }}
70+
textDecoration={{ initial: 'none', medium: 'underline', large: 'overline' }}
71+
style={{ fontSize: 'inherit' }}
72+
>
73+
Hello world
74+
</Typography>
3575
</Box>
3676
),
3777

38-
name: 'responsive spaces',
78+
name: 'responsive styles',
3979
} satisfies Story;
4080

4181
export const LogicalProperties = {
4282
render: () => (
4383
<Box
4484
paddingTop={4}
45-
padding={[6, 4, 1]}
46-
paddingRight={2}
85+
padding={{ initial: 6, medium: 4, large: 1 }}
86+
paddingRight={6}
4787
marginBottom={4}
4888
margin={2}
49-
marginLeft={[8, 4, 2]}
89+
marginLeft={{ initial: 8, medium: 4, large: 2 }}
5090
background="primary700"
5191
shadow="filterShadow"
52-
hiddenXS
5392
borderColor="danger600"
5493
borderStyle="dotted"
5594
borderWidth="2px"

‎docs/stories/Flex.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ import { Flex } from '@strapi/design-system';
1919

2020
## Usage
2121

22-
A Flex Flex
23-
2422
<Canvas of={FlexStories.Base} />
2523

2624
## Props

‎docs/stories/Flex.stories.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ type Story = StoryObj<typeof Flex>;
1212

1313
export const Base = {
1414
render: () => (
15-
<Flex>
15+
<Flex
16+
gap={{ initial: 1, medium: 4, large: 8 }}
17+
direction={{ initial: 'column', medium: 'row' }}
18+
alignItems={{ initial: 'center', medium: 'flex-start' }}
19+
>
1620
<Box background="primary600" padding={1} hasRadius>
1721
<Typography textColor="neutral0">Hello</Typography>
1822
</Box>

0 commit comments

Comments
 (0)