Skip to content

Commit 6c4710e

Browse files
joshuaellisjoshuaellis
authored
Merge pull request #904 from strapi/release/1.6.4
2 parents c87c1d4 + 653eaa4 commit 6c4710e

File tree

109 files changed

+2850
-2863
lines changed

Some content is hidden

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

109 files changed

+2850
-2863
lines changed

‎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.3",
3+
"version": "1.6.4",
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.3",
14-
"@strapi/icons": "^1.6.3",
13+
"@strapi/design-system": "^1.6.4",
14+
"@strapi/icons": "^1.6.4",
1515
"qs": "^6.11.0",
1616
"react": "17",
1717
"react-copy-to-clipboard": "^5.1.0",

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"packages": ["packages/*", "docs"],
3-
"version": "1.6.3",
3+
"version": "1.6.4",
44
"npmClient": "yarn",
55
"useWorkspaces": true
66
}

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@strapi/design-system",
3-
"version": "1.6.3",
3+
"version": "1.6.4",
44
"license": "MIT",
55
"type": "module",
66
"sideEffects": false,
@@ -22,21 +22,22 @@
2222
"@floating-ui/react-dom": "^1.0.0",
2323
"@internationalized/number": "^3.1.1",
2424
"@radix-ui/react-use-callback-ref": "^1.0.0",
25-
"@uiw/react-codemirror": "4.8.1",
25+
"@uiw/react-codemirror": "^4.19.7",
2626
"compute-scroll-into-view": "^1.0.17",
2727
"prop-types": "^15.7.2"
2828
},
2929
"devDependencies": {
3030
"@juggle/resize-observer": "^3.4.0",
3131
"@playwright/test": "1.27.1",
32-
"@strapi/icons": "^1.6.3",
32+
"@strapi/icons": "^1.6.4",
3333
"@swc/core": "^1.3.11",
3434
"@swc/jest": "^0.2.23",
3535
"@testing-library/jest-dom": "5.16.5",
3636
"@testing-library/react": "12.1.4",
3737
"@types/jest": "^29.2.6",
3838
"@types/react": "17.0.2",
3939
"@types/react-dom": "17.0.2",
40+
"@types/react-router-dom": "^5.3.3",
4041
"@types/styled-components": "^5.1.26",
4142
"axe-playwright": "^1.1.11",
4243
"cross-env": "^7.0.3",

‎packages/strapi-design-system/src/Accordion/Accordion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22

33
import styled, { DefaultTheme } from 'styled-components';
44

5+
import { AccordionContext } from './AccordionContext';
56
import { Box } from '../Box';
67
import { Flex } from '../Flex';
78
import { useId } from '../helpers/useId';
89
import { Typography } from '../Typography';
9-
import { AccordionContext } from './AccordionContext';
1010

1111
interface GetBorderParams extends AccordionWrapperProps {
1212
theme: DefaultTheme;

‎packages/strapi-design-system/src/Accordion/AccordionContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Box, BoxProps } from '../Box';
21
import { useAccordion } from './AccordionContext';
2+
import { Box, BoxProps } from '../Box';
33

44
export type AccordionContentProps = BoxProps;
55

‎packages/strapi-design-system/src/Accordion/AccordionToggle.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import * as React from 'react';
33
import { CarretDown } from '@strapi/icons';
44
import styled from 'styled-components';
55

6+
import { AccordionSize, AccordionTypography } from './Accordion';
7+
import { useAccordion } from './AccordionContext';
8+
import { getBackground } from './utils';
69
import { Flex } from '../Flex';
710
import { Icon } from '../Icon';
811
import { Stack } from '../Stack';
912
import { TextButton } from '../TextButton';
1013
import { Typography } from '../Typography';
11-
import { AccordionSize, AccordionTypography } from './Accordion';
12-
import { useAccordion } from './AccordionContext';
13-
import { getBackground } from './utils';
1414

1515
const ToggleButton = styled(TextButton)<{ expanded: boolean }>`
1616
text-align: left;

‎packages/strapi-design-system/src/Alert/Alert.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import * as React from 'react';
33
import { Information, CheckCircle, ExclamationMarkCircle, Cross } from '@strapi/icons';
44
import styled from 'styled-components';
55

6+
import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
67
import { Box, BoxProps } from '../Box';
78
import { Flex } from '../Flex';
89
import { buttonFocusStyle } from '../themes/utils';
910
import { Typography } from '../Typography';
10-
import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
1111

1212
const AlertBody = styled(Box)`
1313
flex: 1;

‎packages/strapi-design-system/src/Avatar/Avatar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import * as React from 'react';
22

33
import styled from 'styled-components';
44

5+
import { avatarSize, previewSize } from './constants';
56
import { Box } from '../Box';
67
import { Flex, FlexProps } from '../Flex';
78
import { Typography, TypographyProps } from '../Typography';
8-
import { avatarSize, previewSize } from './constants';
99

1010
const AvatarImg = styled.img`
1111
border-radius: 50%;

‎packages/strapi-design-system/src/Avatar/AvatarGroup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22

3-
import { Flex } from '../Flex';
43
import { avatarSize } from './constants';
4+
import { Flex } from '../Flex';
55

66
export const AvatarGroup = styled(Flex)`
77
& > * + * {

‎packages/strapi-design-system/src/BaseButton/BaseButton.tsx

+19-12
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,47 @@ import React from 'react';
22

33
import styled from 'styled-components';
44

5+
import { Flex, FlexProps } from '../Flex';
56
import { buttonFocusStyle } from '../themes/utils';
67

7-
export const BaseButtonWrapper = styled.button`
8-
display: flex;
9-
cursor: pointer;
10-
padding: ${({ theme }) => theme.spaces[2]};
11-
border-radius: ${({ theme }) => theme.borderRadius};
12-
background: ${({ theme }) => theme.colors.neutral0};
13-
border: 1px solid ${({ theme }) => theme.colors.neutral200};
8+
export const BaseButtonWrapper = styled(Flex)`
149
svg {
1510
height: ${({ theme }) => theme.spaces[3]};
1611
width: ${({ theme }) => theme.spaces[3]};
17-
}
18-
svg {
12+
1913
> g,
2014
path {
2115
fill: ${({ theme }) => theme.colors.neutral0};
2216
}
2317
}
18+
2419
&[aria-disabled='true'] {
2520
pointer-events: none;
2621
}
2722
2823
${buttonFocusStyle}
2924
`;
3025

31-
export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
32-
children: React.ReactNode;
26+
export interface BaseButtonProps<TElement extends HTMLElement = HTMLButtonElement> extends FlexProps<TElement> {
27+
disabled?: boolean;
3328
}
3429

3530
export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
3631
({ disabled, children, ...props }, ref) => {
3732
return (
38-
<BaseButtonWrapper ref={ref} aria-disabled={disabled} type="button" disabled={disabled} {...props}>
33+
<BaseButtonWrapper
34+
ref={ref}
35+
aria-disabled={disabled}
36+
as="button"
37+
type="button"
38+
disabled={disabled}
39+
padding={2}
40+
hasRadius
41+
background="neutral0"
42+
borderColor="neutral200"
43+
cursor="pointer"
44+
{...props}
45+
>
3946
{children}
4047
</BaseButtonWrapper>
4148
);

‎packages/strapi-design-system/src/BaseCheckbox/BaseCheckbox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import * as React from 'react';
22

33
import styled from 'styled-components';
44

5-
import { Box } from '../Box';
65
import checkmarkIconDisabled from './assets/checkmark-black.svg';
76
import checkmarkIcon from './assets/checkmark.svg';
87
import { getCheckboxSize } from './utils';
8+
import { Box } from '../Box';
99

1010
export type BaseCheckboxSize = 'S' | 'M';
1111

‎packages/strapi-design-system/src/BaseRadio/BaseRadio.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
22

33
import styled from 'styled-components';
44

5-
import { useId } from '../helpers/useId';
65
import { RadioContext } from './context';
76
import { RadioGroupSize } from './RadioGroup';
87
import { getRadioSize, getSelectedRadioSize, getSelectedRadioPosition } from './utils';
8+
import { useId } from '../helpers/useId';
99

1010
const RadioInput = styled.input<{ size: RadioGroupSize | number }>`
1111
margin: 0;

‎packages/strapi-design-system/src/BaseRadio/RadioGroup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { HTMLAttributes, ChangeEventHandler, useLayoutEffect, useRef, ReactNode, useMemo } from 'react';
22

3-
import { setTabIndexOnFirstItem } from '../helpers/setTabIndexOnFirstItem';
43
import { RadioContext } from './context';
4+
import { setTabIndexOnFirstItem } from '../helpers/setTabIndexOnFirstItem';
55

66
export type RadioGroupSize = 'M' | 'L';
77

‎packages/strapi-design-system/src/Box/Box.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const Box = styled.div.withConfig<BoxProps>({
164164
border-color: ${({ borderColor, theme }) => extractStyleFromTheme(theme.colors, borderColor, undefined)};
165165
border: ${({ theme, borderColor, borderStyle, borderWidth }) => {
166166
// This condition prevents borderColor from override the border-color attribute when not passing borderStyle nor borderWidth
167-
if (borderColor && !borderStyle && !borderWidth) {
167+
if (borderColor && !borderStyle && typeof borderWidth === 'undefined') {
168168
return `1px solid ${theme.colors[borderColor]}`;
169169
}
170170

‎packages/strapi-design-system/src/Button/Button.tsx

+26-38
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import React from 'react';
33
import { Loader } from '@strapi/icons';
44
import styled, { keyframes } from 'styled-components';
55

6+
import { BUTTON_SIZES, Variant, ButtonSizes, DEFAULT } from './constants';
7+
import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';
68
import { BaseButton, BaseButtonProps } from '../BaseButton';
79
import { Box } from '../Box';
10+
import { Flex } from '../Flex';
811
import { Typography } from '../Typography';
9-
import { BUTTON_SIZES, Variant, ButtonSizes, DEFAULT } from './constants';
10-
import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';
1112

1213
const rotation = keyframes`
1314
from {
@@ -23,49 +24,26 @@ const LoadingWrapper = styled.div`
2324
will-change: transform;
2425
`;
2526

26-
const BoxFullHeight = styled(Box)`
27-
height: 100%;
28-
`;
29-
30-
type ButtonWrapperProps = Required<Pick<ButtonProps, 'size' | 'fullWidth' | 'variant'>>;
31-
32-
export const ButtonWrapper = styled(BaseButton)<ButtonWrapperProps>`
33-
align-items: center;
34-
background-color: ${({ theme }) => theme.colors.buttonPrimary600};
35-
border: 1px solid ${({ theme }) => theme.colors.buttonPrimary600};
27+
export const ButtonWrapper = styled(BaseButton)<Required<Pick<ButtonProps, 'size' | 'variant'>>>`
3628
height: ${({ theme, size }) => theme.sizes.button[size]};
37-
padding-left: ${({ theme }) => theme.spaces[4]};
38-
padding-right: ${({ theme }) => theme.spaces[4]};
39-
40-
${Box} {
41-
display: flex;
42-
align-items: center;
43-
}
44-
45-
${Typography} {
46-
color: ${({ theme }) => theme.colors.buttonNeutral0};
47-
}
4829
4930
&[aria-disabled='true'] {
5031
${getDisabledStyle}
32+
5133
&:active {
5234
${getDisabledStyle}
5335
}
5436
}
37+
5538
&:hover {
5639
${getHoverStyle}
5740
}
41+
5842
&:active {
5943
${getActiveStyle}
6044
}
45+
6146
${getVariantStyle}
62-
${({ fullWidth }) =>
63-
fullWidth &&
64-
`
65-
display: inline-flex;
66-
justify-content: center;
67-
width: 100%;
68-
`}
6947
`;
7048

7149
export interface ButtonProps extends BaseButtonProps {
@@ -111,29 +89,39 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
11189
variant={variant}
11290
onClick={handleClick}
11391
fullWidth={fullWidth}
92+
alignItems="center"
93+
background="buttonPrimary600"
94+
borderColor="buttonPrimary600"
95+
gap={2}
96+
inline={fullWidth}
97+
justifyContent={fullWidth ? 'center' : undefined}
98+
paddingLeft={4}
99+
paddingRight={4}
100+
width={fullWidth ? '100%' : undefined}
114101
{...props}
115102
>
116103
{(startIcon || loading) && (
117-
<BoxFullHeight aria-hidden paddingRight={2}>
104+
<Box aria-hidden>
118105
{loading ? (
119106
<LoadingWrapper>
120107
<Loader />
121108
</LoadingWrapper>
122109
) : (
123110
startIcon
124111
)}
125-
</BoxFullHeight>
112+
</Box>
126113
)}
127114

128-
<Typography variant={size === 'S' ? 'pi' : undefined} fontWeight="bold" lineHeight={0}>
115+
<Typography
116+
variant={size === 'S' ? 'pi' : undefined}
117+
fontWeight="bold"
118+
lineHeight={0}
119+
textColor="buttonNeutral0"
120+
>
129121
{children}
130122
</Typography>
131123

132-
{endIcon && (
133-
<Box aria-hidden paddingLeft={2}>
134-
{endIcon}
135-
</Box>
136-
)}
124+
{endIcon && <Flex aria-hidden>{endIcon}</Flex>}
137125
</ButtonWrapper>
138126
);
139127
},

‎packages/strapi-design-system/src/Button/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { DefaultTheme } from 'styled-components';
22

3-
import { Typography } from '../Typography';
43
import {
54
LIGHT_VARIANTS,
65
VARIANTS,
@@ -14,6 +13,7 @@ import {
1413
SUCCESS_LIGHT,
1514
Variant,
1615
} from './constants';
16+
import { Typography } from '../Typography';
1717

1818
export const getVariantColorName = (variant: Variant): 'success' | 'danger' | 'neutral' | 'primary' => {
1919
if (variant === SUCCESS_LIGHT || variant === DANGER_LIGHT) {

‎packages/strapi-design-system/src/Card/Card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useMemo } from 'react';
22

3+
import { CardContext } from './CardContext';
34
import { Box, BoxProps } from '../Box';
45
import { useId } from '../helpers/useId';
5-
import { CardContext } from './CardContext';
66

77
export interface CardProps extends BoxProps {
88
id?: string;

‎packages/strapi-design-system/src/Card/CardCheckbox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { BaseCheckbox, BaseCheckboxProps } from '../BaseCheckbox';
21
import { CardAction } from './CardAction';
32
import { useCard } from './CardContext';
3+
import { BaseCheckbox, BaseCheckboxProps } from '../BaseCheckbox';
44

55
export type CardCheckboxProps = BaseCheckboxProps;
66

‎packages/strapi-design-system/src/Card/CardTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Typography, TypographyProps } from '../Typography';
21
import { useCard } from './CardContext';
2+
import { Typography, TypographyProps } from '../Typography';
33

44
export type CardTitleProps = TypographyProps;
55

0 commit comments

Comments
 (0)