Skip to content

Commit 9058f44

Browse files
joshuaellisjoshuaellis
authored
Merge pull request #845 from strapi/release/1.5.0
2 parents 311a4c4 + 50338b4 commit 9058f44

26 files changed

+132
-82
lines changed

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"packages": ["packages/*"],
3-
"version": "1.4.2",
3+
"version": "1.5.0",
44
"npmClient": "yarn"
55
}

‎packages/strapi-design-system/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@strapi/design-system",
3-
"version": "1.4.2",
3+
"version": "1.5.0",
44
"license": "MIT",
55
"type": "module",
66
"sideEffects": false,
@@ -31,7 +31,7 @@
3131
"@storybook/addon-essentials": "^6.5.13",
3232
"@storybook/addon-links": "^6.5.13",
3333
"@storybook/react": "^6.5.13",
34-
"@strapi/icons": "^1.4.2",
34+
"@strapi/icons": "^1.5.0",
3535
"@swc/core": "^1.3.11",
3636
"@swc/jest": "^0.2.23",
3737
"@testing-library/jest-dom": "5.16.5",

‎packages/strapi-design-system/src/DatePicker/DatePicker.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { TextInput } from '../TextInput';
77
import { DatePickerButton, DatePickerWrapper, IconBox } from './components';
88
import { DatePickerCalendar } from './DatePickerCalendar';
99
import { formatDate } from './utils/formatDate';
10-
import { useId } from '../helpers/useId';
1110
import { getDefaultLocale } from '../helpers/getDefaultLocale';
1211

1312
export const DatePicker = ({
@@ -26,7 +25,6 @@ export const DatePicker = ({
2625
maxDate,
2726
...props
2827
}) => {
29-
const generatedId = useId('datepicker', id);
3028
const [visible, setVisible] = useState(false);
3129
const inputRef = useRef(null);
3230
const datePickerButtonRef = useRef(null);
@@ -84,7 +82,7 @@ export const DatePicker = ({
8482
label={label}
8583
aria-label={ariaLabel}
8684
disabled={disabled}
87-
id={generatedId}
85+
id={id}
8886
{...props}
8987
/>
9088

‎packages/strapi-design-system/src/DateTimePicker/DateTimePicker.js

+2
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,8 @@ export const DateTimePicker = ({
118118
<Stack horizontal spacing={2}>
119119
<DatePicker
120120
data-testid="datetimepicker-date"
121+
// DateTimePicker sharing its Field id to DatePicker component
122+
id={generatedId}
121123
name={name}
122124
ariaLabel={label || ariaLabel}
123125
error={typeof error === 'string'}

‎packages/strapi-design-system/src/DateTimePicker/__tests__/__snapshots__/DateTimePicker.spec.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
339339
aria-required="false"
340340
class="c9"
341341
data-testid="datetimepicker-date"
342-
id="datepicker-3"
342+
id="datetime-label-1"
343343
name="datetimepicker"
344344
value="10/13/2021"
345345
/>
@@ -360,10 +360,10 @@ exports[`DateTimePicker snapshots the component 1`] = `
360360
aria-expanded="false"
361361
aria-haspopup="listbox"
362362
aria-label="Date time picker"
363-
aria-labelledby="timepicker-4-label timepicker-4-content"
363+
aria-labelledby="timepicker-3 timepicker-3-label timepicker-3-content"
364364
class="c12"
365365
data-testid="datetimepicker-time"
366-
id="timepicker-4"
366+
id="timepicker-3"
367367
type="button"
368368
/>
369369
<div
@@ -400,7 +400,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
400400
>
401401
<span
402402
class="c17"
403-
id="timepicker-4-content"
403+
id="timepicker-3-content"
404404
>
405405
10:00
406406
</span>

‎packages/strapi-design-system/src/Divider/Divider.js

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { Box } from '../Box';
66
const DividerWrapper = styled(Box)`
77
height: 1px;
88
border: none;
9+
/* If contained in a Flex parent we want to prevent the Divider to shink */
10+
flex-shrink: 0;
911
${({ unsetMargin }) => (unsetMargin ? 'margin: 0;' : '')}
1012
`;
1113

‎packages/strapi-design-system/src/MainNav/MainNav.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import PropTypes from 'prop-types';
4-
import { Grid } from '../Grid';
4+
import { Flex } from '../Flex';
55
import { MainNavContext } from './MainNavContext';
66

7-
const MainNavWrapper = styled(Grid)`
7+
const MainNavWrapper = styled(Flex)`
88
width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
99
background: ${({ theme }) => theme.colors.neutral0};
1010
position: sticky;
@@ -17,7 +17,7 @@ const MainNavWrapper = styled(Grid)`
1717
export const MainNav = ({ condensed, ...props }) => {
1818
return (
1919
<MainNavContext.Provider value={condensed}>
20-
<MainNavWrapper as="nav" condensed={condensed} {...props} />
20+
<MainNavWrapper alignItems="normal" direction="column" as="nav" condensed={condensed} {...props} />
2121
</MainNavContext.Provider>
2222
);
2323
};

‎packages/strapi-design-system/src/MainNav/MainNav.stories.mdx

+18-13
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { NavSection } from './NavSection';
1515
import { NavSections } from './NavSections';
1616
import { NavCondense } from './NavCondense';
1717
import { NavLink } from './NavLink';
18+
import { NavFooter } from './NavFooter';
1819
import { NavUser } from './NavUser';
1920
import { NavBrand } from './NavBrand';
2021
import { Box } from '../Box';
@@ -70,7 +71,7 @@ important actions.
7071
{() => {
7172
const [condensed, setCondensed] = useState(false);
7273
return (
73-
<Box background="neutral100" padding={10} style={{ height: '100vh' }}>
74+
<Box background="neutral100" height="100vh" paddingLeft={10}>
7475
<MainNav condensed={condensed}>
7576
<NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
7677
<Divider />
@@ -101,12 +102,14 @@ important actions.
101102
</NavLink>
102103
</NavSection>
103104
</NavSections>
104-
<NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/somewhere-i-belong">
105-
John Duff
106-
</NavUser>
107-
<NavCondense onClick={() => setCondensed((s) => !s)}>
108-
{condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
109-
</NavCondense>
105+
<NavFooter>
106+
<NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/somewhere-i-belong">
107+
John Duff
108+
</NavUser>
109+
<NavCondense onClick={() => setCondensed((s) => !s)}>
110+
{condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
111+
</NavCondense>
112+
</NavFooter>
110113
</MainNav>
111114
</Box>
112115
);
@@ -117,7 +120,7 @@ important actions.
117120
const [condensed, setCondensed] = useState(false);
118121
const numberOfNotifications = 2;
119122
return (
120-
<Box background="neutral100" padding={10} style={{ height: '100vh' }}>
123+
<Box background="neutral100" paddingLeft={10} height="100vh">
121124
<MainNav condensed={condensed}>
122125
<NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
123126
<Divider />
@@ -140,7 +143,7 @@ important actions.
140143
<NavLink to="/builder" icon={<Puzzle />}>
141144
Plugins
142145
</NavLink>
143-
<NavLink to="/content" badgeContent="new" icon={<ShoppingCart />} badgeAriaLabel="new content">
146+
<NavLink to="/content" badgeContent="33" icon={<ShoppingCart />} badgeAriaLabel="new content">
144147
Marketplace
145148
</NavLink>
146149
<NavLink
@@ -153,10 +156,12 @@ important actions.
153156
</NavLink>
154157
</NavSection>
155158
</NavSections>
156-
<NavUser initials="MD">Michka des Ronronscelestes</NavUser>
157-
<NavCondense onClick={() => setCondensed((s) => !s)}>
158-
{condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
159-
</NavCondense>
159+
<NavFooter>
160+
<NavUser initials="MD">Michka des Ronronscelestes</NavUser>
161+
<NavCondense onClick={() => setCondensed((s) => !s)}>
162+
{condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
163+
</NavCondense>
164+
</NavFooter>
160165
</MainNav>
161166
</Box>
162167
);

‎packages/strapi-design-system/src/MainNav/NavFooter.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import styled from 'styled-components';
4+
import { Box } from '../Box';
5+
6+
const BoxRelative = styled(Box)`
7+
position: relative;
8+
`;
9+
10+
export const NavFooter = ({ children }) => {
11+
return <BoxRelative>{children}</BoxRelative>;
12+
};
13+
14+
NavFooter.displayName = 'NavFooter';
15+
16+
NavFooter.propTypes = {
17+
children: PropTypes.node.isRequired,
18+
};

‎packages/strapi-design-system/src/MainNav/NavLink.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@ const MainNavRow = styled(Flex)`
6262
`;
6363

6464
const CustomBadge = styled(Badge)`
65-
${({ condensed }) =>
65+
${({ theme, condensed }) =>
6666
condensed &&
6767
`
6868
position: absolute;
69-
transform: translate(35%, -50%);
70-
top: 0;
71-
right: 0;
69+
// Values based on visual aspect
70+
top: -${theme.spaces[3]};
71+
right: -${theme.spaces[1]};
7272
`}
7373
7474
${Typography} {

‎packages/strapi-design-system/src/MainNav/NavSections.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import React, { Children } from 'react';
22
import PropTypes from 'prop-types';
3+
import styled from 'styled-components';
34
import { Stack } from '../Stack';
45
import { Box } from '../Box';
56

7+
const BoxGrow = styled(Box)`
8+
flex-grow: 1;
9+
overflow-y: scroll;
10+
`;
11+
612
export const NavSections = ({ children, ...props }) => {
713
return (
8-
<Box paddingLeft={3} paddingRight={2} paddingTop={3}>
14+
<BoxGrow paddingLeft={3} paddingRight={2} paddingTop={3} paddingBottom={8}>
915
<Stack as="ul" spacing={4} {...props}>
1016
{Children.map(children, (child, index) => {
1117
// eslint-disable-next-line react/no-array-index-key
1218
return <li key={index}>{child}</li>;
1319
})}
1420
</Stack>
15-
</Box>
21+
</BoxGrow>
1622
);
1723
};
1824

‎packages/strapi-design-system/src/MainNav/NavUser.js

-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ import { useMainNav } from './MainNavContext';
99
import { VisuallyHidden } from '../VisuallyHidden';
1010

1111
const NavUserBox = styled(Box)`
12-
text-decoration: none;
13-
position: absolute;
14-
bottom: 0;
15-
width: 100%;
1612
border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
1713
`;
1814

‎packages/strapi-design-system/src/MainNav/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export * from './MainNav';
22
export * from './NavBrand';
3+
export * from './NavCondense';
4+
export * from './NavFooter';
35
export * from './NavLink';
46
export * from './NavSection';
57
export * from './NavSections';
68
export * from './NavUser';
7-
export * from './NavCondense';

‎packages/strapi-design-system/src/Select/Select.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -162,16 +162,12 @@ export const Select = ({
162162
return (
163163
<Field hint={hint} error={error} id={generatedId} required={required}>
164164
<Stack spacing={label || hint || hasStringError ? 1 : 0}>
165-
{label && (
166-
<FieldLabel as="span" action={labelAction}>
167-
{label}
168-
</FieldLabel>
169-
)}
165+
{label && <FieldLabel action={labelAction}>{label}</FieldLabel>}
170166

171167
<SelectButtonWrapper size={size} hasError={Boolean(error)} disabled={disabled} ref={containerRef}>
172168
<SelectButton
173169
ref={buttonRef}
174-
labelledBy={`${labelId} ${contentId}`}
170+
labelledBy={`${generatedId} ${labelId} ${contentId}`}
175171
aria-describedby={ariaDescribedBy}
176172
expanded={Boolean(expanded)}
177173
onTrigger={setExpanded}

‎packages/strapi-design-system/src/Select/__tests__/Select.spec.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ describe('Select', () => {
282282
class="c0 c1"
283283
spacing="1"
284284
>
285-
<span
285+
<label
286286
class="c2"
287287
for="select-1"
288288
>
@@ -291,7 +291,7 @@ describe('Select', () => {
291291
>
292292
Choose your meal
293293
</div>
294-
</span>
294+
</label>
295295
<div
296296
class="c3 c4"
297297
>
@@ -300,7 +300,7 @@ describe('Select', () => {
300300
aria-disabled="false"
301301
aria-expanded="true"
302302
aria-haspopup="listbox"
303-
aria-labelledby="select-1-label select-1-content"
303+
aria-labelledby="select-1 select-1-label select-1-content"
304304
class="c5"
305305
id="select-1"
306306
type="button"
@@ -775,7 +775,7 @@ describe('Select', () => {
775775
class="c0 c1"
776776
spacing="1"
777777
>
778-
<span
778+
<label
779779
class="c2"
780780
for="select-3"
781781
>
@@ -784,7 +784,7 @@ describe('Select', () => {
784784
>
785785
Choose your meal
786786
</div>
787-
</span>
787+
</label>
788788
<div
789789
class="c3 c4"
790790
>
@@ -793,7 +793,7 @@ describe('Select', () => {
793793
aria-disabled="false"
794794
aria-expanded="true"
795795
aria-haspopup="listbox"
796-
aria-labelledby="select-3-label select-3-content"
796+
aria-labelledby="select-3 select-3-label select-3-content"
797797
class="c5"
798798
id="select-3"
799799
type="button"

‎packages/strapi-design-system/src/TimePicker/__tests__/TimePicker.spec.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ describe('TimePicker', () => {
297297
class="c0 c1"
298298
spacing="1"
299299
>
300-
<span
300+
<label
301301
class="c2"
302302
for="timepicker-1"
303303
>
@@ -306,7 +306,7 @@ describe('TimePicker', () => {
306306
>
307307
Choose a time
308308
</div>
309-
</span>
309+
</label>
310310
<div
311311
class="c3 c4"
312312
>
@@ -315,7 +315,7 @@ describe('TimePicker', () => {
315315
aria-disabled="false"
316316
aria-expanded="true"
317317
aria-haspopup="listbox"
318-
aria-labelledby="timepicker-1-label timepicker-1-content"
318+
aria-labelledby="timepicker-1 timepicker-1-label timepicker-1-content"
319319
class="c5"
320320
id="timepicker-1"
321321
type="button"

‎packages/strapi-design-system/src/v2/MainNav/MainNav.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import PropTypes from 'prop-types';
4-
import { Grid } from '../../Grid';
4+
import { Flex } from '../../Flex';
55
import { MainNavContext } from './MainNavContext';
66

7-
const MainNavWrapper = styled(Grid)`
7+
const MainNavWrapper = styled(Flex)`
88
width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
99
background: ${({ theme }) => theme.colors.neutral0};
1010
position: sticky;
@@ -17,7 +17,7 @@ const MainNavWrapper = styled(Grid)`
1717
export const MainNav = ({ condensed, ...props }) => {
1818
return (
1919
<MainNavContext.Provider value={condensed}>
20-
<MainNavWrapper as="nav" condensed={condensed} {...props} />
20+
<MainNavWrapper as="nav" alignItems="normal" direction="column" condensed={condensed} {...props} />
2121
</MainNavContext.Provider>
2222
);
2323
};

0 commit comments

Comments
 (0)