Skip to content

Commit aa59599

Browse files
martimalekMartí Malek
martimalek
authored and
Martí Malek
committed
feat: migrate tag and selectlist variant colors to css vars (#381)
* feat(tag): use css variables in variants * feat(selectlist): use css variables in variants
1 parent b011ab0 commit aa59599

File tree

4 files changed

+41
-43
lines changed

4 files changed

+41
-43
lines changed

‎src/components/SelectList/SelectList.spec.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, screen } from '@testing-library/react';
22
import * as React from 'react';
33
import { SelectList } from './SelectList';
4-
import { SemanticColors } from '../../essentials';
4+
import { getSemanticValue } from '../../utils/cssVariables';
55

66
describe('SelectList', () => {
77
it('renders options in multi select', () => {
@@ -21,14 +21,14 @@ describe('SelectList', () => {
2121

2222
const normalTag = screen.getByText('Sales').parentElement;
2323
expect(normalTag).toHaveStyle(`
24-
background-color: ${SemanticColors.background.info};
25-
border-color: ${SemanticColors.border.infoEmphasized};
24+
background-color: ${getSemanticValue('background-element-info-default')};
25+
border-color: ${getSemanticValue('border-info-default')};
2626
`);
2727

2828
const errorTag = screen.getByText('Marketing').parentElement;
2929
expect(errorTag).toHaveStyle(`
3030
background-color: transparent;
31-
border-color: ${SemanticColors.border.dangerEmphasized};
31+
border-color: ${getSemanticValue('border-danger-default')};
3232
`);
3333
});
3434

@@ -50,13 +50,13 @@ describe('SelectList', () => {
5050
const normalTag = screen.getByText('Sales').parentElement;
5151
expect(normalTag).toHaveStyle(`
5252
background-color: transparent;
53-
border-color: ${SemanticColors.border.primary};
53+
border-color: ${getSemanticValue('border-disabled')};
5454
`);
5555

5656
const errorTag = screen.getByText('Marketing').parentElement;
5757
expect(errorTag).toHaveStyle(`
5858
background-color: transparent;
59-
border-color: ${SemanticColors.border.primary};
59+
border-color: ${getSemanticValue('border-disabled')};
6060
`);
6161
});
6262
});

‎src/components/SelectList/SelectList.tsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@ const getOptionVariant = (selectProps: Props, option: unknown): 'default' | 'dis
3737
return 'default';
3838
};
3939

40-
const getColor = (key: string, props: Props) => String(get(key)(props));
41-
4240
const customStyles: StylesConfig = {
4341
container: (provided, { selectProps }: WithSelectProps<Props>) => {
4442
const bSize = {
@@ -219,27 +217,27 @@ const customStyles: StylesConfig = {
219217
borderColor: getSemanticValue('border-disabled'),
220218

221219
'> [role="button"]': {
222-
color: getColor('semanticColors.icon.disabled', selectProps)
220+
color: getSemanticValue('foreground-disabled')
223221
}
224222
};
225223
case 'error':
226224
return {
227225
...styles,
228-
color: getColor('semanticColors.text.dangerInverted', selectProps),
226+
color: getSemanticValue('foreground-danger-default'),
229227
backgroundColor: 'transparent',
230-
borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
228+
borderColor: getSemanticValue('border-danger-default'),
231229

232230
'> [role="button"]': {
233-
color: getColor('semanticColors.icon.danger', selectProps)
231+
color: getSemanticValue('foreground-danger-default')
234232
},
235233

236234
'&:hover': {
237-
color: getColor('semanticColors.text.primaryInverted', selectProps),
238-
backgroundColor: getColor('semanticColors.background.dangerEmphasized', selectProps),
239-
borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
235+
color: getSemanticValue('foreground-on-background-danger'),
236+
backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
237+
borderColor: getSemanticValue('border-danger-default'),
240238

241239
'> [role="button"]': {
242-
color: getColor('semanticColors.icon.primaryInverted', selectProps)
240+
color: getSemanticValue('foreground-on-background-danger')
243241
}
244242
}
245243
};
@@ -252,16 +250,16 @@ const customStyles: StylesConfig = {
252250
borderColor: getSemanticValue('border-info-default'),
253251

254252
'> [role="button"]': {
255-
color: getColor('semanticColors.icon.action', selectProps)
253+
color: getSemanticValue('foreground-info-default')
256254
},
257255

258256
'&:hover': {
259257
color: getSemanticValue('foreground-on-background-primary'),
260258
backgroundColor: getSemanticValue('background-element-info-emphasized'),
261-
borderColor: getColor('semanticColors.border.infoEmphasized', selectProps),
259+
borderColor: getSemanticValue('border-info-default'),
262260

263261
'> [role="button"]': {
264-
color: getColor('semanticColors.icon.primaryInverted', selectProps)
262+
color: getSemanticValue('foreground-on-background-info')
265263
}
266264
}
267265
};
@@ -362,4 +360,4 @@ SelectList.defaultProps = {
362360
size: 'medium'
363361
};
364362

365-
export { SelectList };
363+
export { SelectList };

‎src/components/Tag/Tag.spec.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, fireEvent, screen } from '@testing-library/react';
22
import * as React from 'react';
33
import { Tag } from './Tag';
4-
import { SemanticColors } from '../../essentials';
4+
import { getSemanticValue } from '../../utils/cssVariables';
55

66
describe('Tag', () => {
77
it('renders and can be dismissed', () => {
@@ -28,28 +28,28 @@ describe('Tag', () => {
2828
const { container } = render(<Tag variant="disabled">Lorem</Tag>);
2929

3030
expect(container.firstChild).toHaveStyle(`
31-
border-color: ${SemanticColors.border.primary};
31+
border-color: ${getSemanticValue('border-disabled')};
3232
`);
3333
expect(screen.getByText('Lorem')).toHaveStyle(`
34-
color: ${SemanticColors.text.disabled};
34+
color: ${getSemanticValue('foreground-disabled')};
3535
`);
3636
expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
37-
color: ${SemanticColors.icon.disabled};
37+
color: ${getSemanticValue('foreground-disabled')};
3838
`);
3939
});
4040

4141
it('renders error variant', () => {
4242
const { container } = render(<Tag variant="error">Lorem</Tag>);
4343

4444
expect(container.firstChild).toHaveStyle(`
45-
background-color: ${SemanticColors.background.danger};
46-
border-color: ${SemanticColors.border.dangerEmphasized};
45+
background-color: ${getSemanticValue('background-surface-danger-default')};
46+
border-color: ${getSemanticValue('border-danger-default')};
4747
`);
4848
expect(screen.getByText('Lorem')).toHaveStyle(`
49-
color: ${SemanticColors.text.dangerInverted};
49+
color: ${getSemanticValue('foreground-danger-default')};
5050
`);
5151
expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
52-
color: ${SemanticColors.icon.danger};
52+
color: ${getSemanticValue('foreground-danger-default')};
5353
`);
5454
});
5555
});

‎src/components/Tag/Tag.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ const tagVariant = variant({
5050
borderColor: getSemanticValue('border-info-default'),
5151

5252
[`> ${TagText}`]: {
53-
color: get('semanticColors.text.link')
53+
color: getSemanticValue('foreground-info-default')
5454
},
5555

5656
[`> ${DismissIcon}`]: {
57-
color: get('semanticColors.icon.action')
57+
color: getSemanticValue('foreground-info-default')
5858
},
5959

6060
'&:hover': {
6161
backgroundColor: getSemanticValue('background-element-info-emphasized'),
62-
borderColor: get('semanticColors.border.infoEmphasized'),
62+
borderColor: getSemanticValue('border-info-default'),
6363

6464
[`> ${TagText}`]: {
6565
color: getSemanticValue('foreground-on-background-info')
@@ -71,38 +71,38 @@ const tagVariant = variant({
7171
}
7272
},
7373
disabled: {
74-
borderColor: get('semanticColors.border.primary'),
74+
borderColor: getSemanticValue('border-disabled'),
7575

7676
[`> ${TagText}`]: {
77-
color: get('semanticColors.text.disabled')
77+
color: getSemanticValue('foreground-disabled')
7878
},
7979

8080
[`> ${DismissIcon}`]: {
81-
color: get('semanticColors.icon.disabled')
81+
color: getSemanticValue('foreground-disabled')
8282
}
8383
},
8484
error: {
85-
backgroundColor: get('semanticColors.background.danger'),
86-
borderColor: get('semanticColors.border.dangerEmphasized'),
85+
backgroundColor: getSemanticValue('background-surface-danger-default'),
86+
borderColor: getSemanticValue('border-danger-default'),
8787

8888
[`> ${TagText}`]: {
89-
color: get('semanticColors.text.dangerInverted')
89+
color: getSemanticValue('foreground-danger-default')
9090
},
9191

9292
[`> ${DismissIcon}`]: {
93-
color: get('semanticColors.icon.danger')
93+
color: getSemanticValue('foreground-danger-default')
9494
},
9595

9696
'&:hover': {
97-
backgroundColor: get('semanticColors.background.dangerEmphasized'),
98-
borderColor: get('semanticColors.border.dangerEmphasized'),
97+
backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
98+
borderColor: getSemanticValue('border-danger-default'),
9999

100100
[`> ${TagText}`]: {
101-
color: get('semanticColors.text.primaryInverted')
101+
color: getSemanticValue('foreground-on-background-danger')
102102
},
103103

104104
[`> ${DismissIcon}`]: {
105-
color: get('semanticColors.icon.primaryInverted')
105+
color: getSemanticValue('foreground-on-background-danger')
106106
}
107107
}
108108
}
@@ -144,4 +144,4 @@ const Tag: FC<PropsWithChildren<TagProps>> = ({
144144
</TagWrapper>
145145
);
146146

147-
export { Tag, TagProps };
147+
export { Tag, TagProps };

0 commit comments

Comments
 (0)