Skip to content

Commit bd16c18

Browse files
author
Martí Malek
committed
feat(selectlist): use css variables in variants
1 parent 76bcdd2 commit bd16c18

File tree

2 files changed

+18
-20
lines changed

2 files changed

+18
-20
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 };

0 commit comments

Comments
 (0)