Skip to content

Commit bc5c1d4

Browse files
ze-floze-flo
authored
feat(peer-deps): extend styled-components support to v6 (#1978)
1 parent f345fa1 commit bc5c1d4

File tree

102 files changed

+441
-360
lines changed

Some content is hidden

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

102 files changed

+441
-360
lines changed

‎package-lock.json

Lines changed: 87 additions & 85 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
"@types/prop-types": "15.7.13",
5858
"@types/react": "18.3.11",
5959
"@types/react-dom": "18.3.1",
60-
"@types/styled-components": "5.1.34",
6160
"@zendeskgarden/css-bedrock": "10.0.0",
6261
"@zendeskgarden/eslint-config": "44.0.1",
6362
"@zendeskgarden/scripts": "2.4.3",
@@ -100,7 +99,7 @@
10099
"rollup-plugin-delete": "2.1.0",
101100
"rollup-plugin-typescript2": "0.36.0",
102101
"storybook": "7.6.20",
103-
"styled-components": "5.3.11",
102+
"styled-components": "6.1.13",
104103
"stylelint": "16.10.0",
105104
"stylelint-order": "6.0.4",
106105
"temp": "0.9.4",

‎packages/.template/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"@zendeskgarden/react-theming": ">=9.0.0",
2929
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
3030
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
31-
"styled-components": "^5.3.1"
31+
"styled-components": "^5.3.1 || ^6.0.0"
3232
},
3333
"devDependencies": {
3434
"@zendeskgarden/react-theming": "^9.0.0"

‎packages/accordions/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@zendeskgarden/react-theming": ">=9.0.0",
3131
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
3232
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
33-
"styled-components": "^5.3.1"
33+
"styled-components": "^5.3.1 || ^6.0.0"
3434
},
3535
"devDependencies": {
3636
"@zendeskgarden/react-theming": "^9.2.0",

‎packages/accordions/src/styled/accordion/StyledRotateIcon.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
8+
import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components';
99
import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
1010

1111
const COMPONENT_ID = 'accordions.rotate_icon';
@@ -38,7 +38,7 @@ const colorStyles = ({
3838
`;
3939
};
4040

41-
export const StyledRotateIcon = styled(StyledBaseIcon).attrs({
41+
export const StyledRotateIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
4242
'data-garden-id': COMPONENT_ID,
4343
'data-garden-version': PACKAGE_VERSION
4444
})<IStyledRotateIcon>`

‎packages/accordions/src/styled/timeline/StyledItemIcon.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
8+
import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
99
import { math } from 'polished';
1010
import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
1111

@@ -36,7 +36,7 @@ const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps<Defa
3636
/**
3737
* 1. Odd sizing allows the timeline line to center respective of the circle icon.
3838
*/
39-
export const StyledItemIcon = styled(StyledBaseIcon).attrs({
39+
export const StyledItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
4040
'data-garden-id': COMPONENT_ID,
4141
'data-garden-version': PACKAGE_VERSION
4242
})<IStyledItemIcon>`

‎packages/avatars/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"@zendeskgarden/react-theming": ">=9.0.0",
2929
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
3030
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
31-
"styled-components": "^5.3.1"
31+
"styled-components": "^5.3.1 || ^6.0.0"
3232
},
3333
"devDependencies": {
3434
"@zendeskgarden/react-dropdowns": "^9.2.0",

‎packages/avatars/src/elements/StatusIndicator.spec.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ describe('StatusIndicator', () => {
4444
it('renders in RTL mode', () => {
4545
const { getByRole } = renderRtl(<StatusIndicator type="transfers">Caption</StatusIndicator>);
4646

47-
expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1,1)', {
48-
modifier: "& > svg[data-icon-status='transfers']"
47+
expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1, 1)', {
48+
modifier: "&>svg[data-icon-status='transfers']"
4949
});
5050
});
5151

‎packages/avatars/src/styled/StyledAvatar.spec.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,14 @@ describe('StyledAvatar', () => {
8383
it('renders foreground color as expected', () => {
8484
const { container } = render(<StyledAvatar $foregroundColor="red" />);
8585

86-
expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '> svg' });
86+
expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '&>svg' });
8787
});
8888

8989
it('renders foreground color variable as expected', () => {
9090
const { container } = render(<StyledAvatar $foregroundColor="foreground.default" />);
9191

9292
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900], {
93-
modifier: '> svg'
93+
modifier: '&>svg'
9494
});
9595
});
9696
});
@@ -99,37 +99,37 @@ describe('StyledAvatar', () => {
9999
it('renders extraextrasmall', () => {
100100
const { container } = render(<StyledAvatar $size="extraextrasmall" />);
101101

102-
expect(container.firstChild).toHaveStyleRule('width', '16px !important');
102+
expect(container.firstChild).toHaveStyleRule('width', '16px!important');
103103
});
104104

105105
it('renders extrasmall', () => {
106106
const { container } = render(<StyledAvatar $size="extrasmall" />);
107107

108-
expect(container.firstChild).toHaveStyleRule('width', '24px !important');
108+
expect(container.firstChild).toHaveStyleRule('width', '24px!important');
109109
});
110110

111111
it('renders small', () => {
112112
const { container } = render(<StyledAvatar $size="small" />);
113113

114-
expect(container.firstChild).toHaveStyleRule('width', '32px !important');
114+
expect(container.firstChild).toHaveStyleRule('width', '32px!important');
115115
});
116116

117117
it('renders medium', () => {
118118
const { container } = render(<StyledAvatar $size="medium" />);
119119

120-
expect(container.firstChild).toHaveStyleRule('width', '40px !important');
120+
expect(container.firstChild).toHaveStyleRule('width', '40px!important');
121121
});
122122

123123
it('renders large', () => {
124124
const { container } = render(<StyledAvatar $size="large" />);
125125

126-
expect(container.firstChild).toHaveStyleRule('width', '48px !important');
126+
expect(container.firstChild).toHaveStyleRule('width', '48px!important');
127127
});
128128
});
129129

130130
describe('badge', () => {
131131
const styleRuleOptions = {
132-
modifier: `& > ${StyledStatusIndicator}`
132+
modifier: `&>${StyledStatusIndicator}`
133133
};
134134

135135
it('renders the status indicator correctly', () => {

‎packages/breadcrumbs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@zendeskgarden/react-theming": ">=9.0.0",
3030
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
3131
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
32-
"styled-components": "^5.3.1"
32+
"styled-components": "^5.3.1 || ^6.0.0"
3333
},
3434
"devDependencies": {
3535
"@zendeskgarden/react-theming": "^9.2.0",

0 commit comments

Comments
 (0)