Skip to content

Commit

Permalink
feat: migrate tag and selectlist variant colors to css vars (#381)
Browse files Browse the repository at this point in the history 
* feat(tag): use css variables in variants

* feat(selectlist): use css variables in variants
  • Loading branch information
@martimalek
martimalek authored Sep 29, 2023
1 parent df98bb9 commit e11833c
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 43 deletions.
12 changes: 6 additions & 6 deletions src/components/SelectList/SelectList.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import * as React from 'react';
import { SelectList } from './SelectList';
import { SemanticColors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';

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

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

const errorTag = screen.getByText('Marketing').parentElement;
expect(errorTag).toHaveStyle(`
background-color: transparent;
border-color: ${SemanticColors.border.dangerEmphasized};
border-color: ${getSemanticValue('border-danger-default')};
`);
});

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

const errorTag = screen.getByText('Marketing').parentElement;
expect(errorTag).toHaveStyle(`
background-color: transparent;
border-color: ${SemanticColors.border.primary};
border-color: ${getSemanticValue('border-disabled')};
`);
});
});
26 changes: 12 additions & 14 deletions src/components/SelectList/SelectList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@ const getOptionVariant = (selectProps: Props, option: unknown): 'default' | 'dis
return 'default';
};

const getColor = (key: string, props: Props) => String(get(key)(props));

const customStyles: StylesConfig = {
container: (provided, { selectProps }: WithSelectProps<Props>) => {
const bSize = {
Expand Down Expand Up @@ -219,27 +217,27 @@ const customStyles: StylesConfig = {
borderColor: getSemanticValue('border-disabled'),

'> [role="button"]': {
color: getColor('semanticColors.icon.disabled', selectProps)
color: getSemanticValue('foreground-disabled')
}
};
case 'error':
return {
...styles,
color: getColor('semanticColors.text.dangerInverted', selectProps),
color: getSemanticValue('foreground-danger-default'),
backgroundColor: 'transparent',
borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
borderColor: getSemanticValue('border-danger-default'),

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

'&:hover': {
color: getColor('semanticColors.text.primaryInverted', selectProps),
backgroundColor: getColor('semanticColors.background.dangerEmphasized', selectProps),
borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
color: getSemanticValue('foreground-on-background-danger'),
backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
borderColor: getSemanticValue('border-danger-default'),

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

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

'&:hover': {
color: getSemanticValue('foreground-on-background-primary'),
backgroundColor: getSemanticValue('background-element-info-emphasized'),
borderColor: getColor('semanticColors.border.infoEmphasized', selectProps),
borderColor: getSemanticValue('border-info-default'),

'> [role="button"]': {
color: getColor('semanticColors.icon.primaryInverted', selectProps)
color: getSemanticValue('foreground-on-background-info')
}
}
};
Expand Down Expand Up @@ -362,4 +360,4 @@ SelectList.defaultProps = {
size: 'medium'
};

export { SelectList };
export { SelectList };
16 changes: 8 additions & 8 deletions src/components/Tag/Tag.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { render, fireEvent, screen } from '@testing-library/react';
import * as React from 'react';
import { Tag } from './Tag';
import { SemanticColors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';

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

expect(container.firstChild).toHaveStyle(`
border-color: ${SemanticColors.border.primary};
border-color: ${getSemanticValue('border-disabled')};
`);
expect(screen.getByText('Lorem')).toHaveStyle(`
color: ${SemanticColors.text.disabled};
color: ${getSemanticValue('foreground-disabled')};
`);
expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
color: ${SemanticColors.icon.disabled};
color: ${getSemanticValue('foreground-disabled')};
`);
});

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

expect(container.firstChild).toHaveStyle(`
background-color: ${SemanticColors.background.danger};
border-color: ${SemanticColors.border.dangerEmphasized};
background-color: ${getSemanticValue('background-surface-danger-default')};
border-color: ${getSemanticValue('border-danger-default')};
`);
expect(screen.getByText('Lorem')).toHaveStyle(`
color: ${SemanticColors.text.dangerInverted};
color: ${getSemanticValue('foreground-danger-default')};
`);
expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
color: ${SemanticColors.icon.danger};
color: ${getSemanticValue('foreground-danger-default')};
`);
});
});
30 changes: 15 additions & 15 deletions src/components/Tag/Tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,16 @@ const tagVariant = variant({
borderColor: getSemanticValue('border-info-default'),

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

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

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

[`> ${TagText}`]: {
color: getSemanticValue('foreground-on-background-info')
Expand All @@ -71,38 +71,38 @@ const tagVariant = variant({
}
},
disabled: {
borderColor: get('semanticColors.border.primary'),
borderColor: getSemanticValue('border-disabled'),

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

[`> ${DismissIcon}`]: {
color: get('semanticColors.icon.disabled')
color: getSemanticValue('foreground-disabled')
}
},
error: {
backgroundColor: get('semanticColors.background.danger'),
borderColor: get('semanticColors.border.dangerEmphasized'),
backgroundColor: getSemanticValue('background-surface-danger-default'),
borderColor: getSemanticValue('border-danger-default'),

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

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

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

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

[`> ${DismissIcon}`]: {
color: get('semanticColors.icon.primaryInverted')
color: getSemanticValue('foreground-on-background-danger')
}
}
}
Expand Down Expand Up @@ -144,4 +144,4 @@ const Tag: FC<PropsWithChildren<TagProps>> = ({
</TagWrapper>
);

export { Tag, TagProps };
export { Tag, TagProps };

0 comments on commit e11833c

Please sign in to comment.