diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 59f8df4aff0..1e3004f6899 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -28,6 +28,7 @@ const config: StorybookConfig = { '../../src/components/Indicator/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Button/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Divider/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Chip/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Carousel/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/List/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Link/**/*.stories.@(ts|tsx|js|jsx)', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index 333f33693a2..16516112fa9 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -12,6 +12,8 @@ const rebrandedComponents = [ 'Link', 'Popover', 'Counter', + 'Chip', + 'ChipGroup', 'Badge', 'Indicator', 'IconButton', diff --git a/packages/blade/src/components/Chip/AnimatedChip.native.tsx b/packages/blade/src/components/Chip/AnimatedChip.native.tsx index 3a87b1f4ffd..062249df9c6 100644 --- a/packages/blade/src/components/Chip/AnimatedChip.native.tsx +++ b/packages/blade/src/components/Chip/AnimatedChip.native.tsx @@ -22,8 +22,8 @@ const AnimatedChip = ({ }: Omit): React.ReactElement => { const { theme } = useTheme(); - const easing = getIn(theme, chipMotionTokens.easing); - const duration = getIn(theme, chipMotionTokens.duration); + const easing = getIn(theme.motion, chipMotionTokens.easing); + const duration = getIn(theme.motion, chipMotionTokens.duration); const chipAnimation = useAnimatedStyle(() => { return { diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx index 9cc85fe9e82..724fb9f7c93 100644 --- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx +++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx @@ -8,8 +8,10 @@ import { makeMotionTime } from '~utils/makeMotionTime'; import { castWebType } from '~utils'; const AnimatedChip = styled(BaseBox)((props) => { - const easing = getIn(props.theme, chipMotionTokens.easing); - const duration = castWebType(makeMotionTime(getIn(props.theme, chipMotionTokens.duration))); + const easing = getIn(props.theme.motion, chipMotionTokens.easing); + const duration = castWebType( + makeMotionTime(getIn(props.theme.motion, chipMotionTokens.duration)), + ); return { ...getAnimatedChipStyles(props), width: 'fit-content', diff --git a/packages/blade/src/components/Chip/Chip.stories.tsx b/packages/blade/src/components/Chip/Chip.stories.tsx index fdb4b9dd249..2c05c063b49 100644 --- a/packages/blade/src/components/Chip/Chip.stories.tsx +++ b/packages/blade/src/components/Chip/Chip.stories.tsx @@ -76,29 +76,16 @@ export default { }, }, }, - intent: { - description: 'This is deprecated in favor of the `color` prop.', - table: { - category: propsCategory.CHIP, - type: { - summary: '"none" | "positive" | "negative"', - }, - }, - options: ['none', 'positive', 'negative'], - control: { - type: 'radio', - }, - }, color: { description: 'Sets the color of the Chip. This overwrites the color set by the parent `ChipGroup` component', table: { category: propsCategory.CHIP, type: { - summary: '"default" | "positive" | "negative"', + summary: '"primary" | "positive" | "negative"', }, }, - options: ['default', 'positive', 'negative'], + options: ['primary', 'positive', 'negative'], control: { type: 'radio', }, @@ -133,5 +120,5 @@ const ChipTemplate: StoryFn = ({ children, ...args }) => { export const Default = ChipTemplate.bind({}); Default.storyName = 'Default'; Default.args = { - color: 'default', + color: 'primary', }; diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index 922e723810f..854fd2e7f97 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -37,7 +37,7 @@ type OnChange = ({ }) => void; const _Chip: React.ForwardRefRenderFunction = ( - { isDisabled, value, children, icon: Icon, intent, color, testID, ...styledProps }, + { isDisabled, value, children, icon: Icon, color, testID, ...styledProps }, ref, ) => { const { theme } = useTheme(); @@ -67,10 +67,7 @@ const _Chip: React.ForwardRefRenderFunction = ( : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox; const _size = groupProps?.size || 'small'; - const _intent = intent ?? groupProps?.intent; - // If intent is proovided and it's not none, use intent otherwise use color - const _color = color ?? groupProps?.color ?? 'default'; - const chipColor = _intent && _intent !== 'none' ? _intent : _color; + const chipColor = color ?? groupProps?.color ?? 'primary'; const handleChange: OnChange = ({ isChecked, value }) => { if (isChecked) { @@ -129,13 +126,13 @@ const _Chip: React.ForwardRefRenderFunction = ( const chipTextColor = chipColorTokens.text[textVariant]; const chipIconColor = chipColorTokens.icon[textVariant]; - let intentVariant = 'unchecked'; + let colorVariant = 'unchecked'; const stateVariant = _isDisabled ? 'disabled' : 'default'; if (_isChecked && chipColor) { - intentVariant = chipColor; + colorVariant = chipColor; } - const chipBackgroundColor = chipColorTokens.background[intentVariant][stateVariant]; - const chipBorderColor = chipColorTokens.border[intentVariant][stateVariant]; + const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant]; + const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant]; return ( = ( ) : null} - + {children} diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index 1ab2d5e47e6..c60c34306f9 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -16,8 +16,8 @@ import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import iconMap from '~components/Icons/iconMap'; -import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown'; -import { ActionList, ActionListItem } from '~components/ActionList'; +// import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown'; +// import { ActionList, ActionListItem } from '~components/ActionList'; import type { BladeElementRef } from '~utils/types'; import { Button } from '~components/Button'; import { Link } from '~components/Link'; @@ -167,28 +167,15 @@ export default { }, }, }, - intent: { - description: `This prop is deprecated, use 'color' instead.`, - table: { - category: propsCategory.CHIP_GROUP, - type: { - summary: '"none" | "positive" | "negative"', - }, - }, - options: ['none', 'positive', 'negative'], - control: { - type: 'select', - }, - }, color: { description: `Sets the ChipGroups's visual color, it will propagate down to all the Chips`, table: { category: propsCategory.CHIP_GROUP, type: { - summary: '"default" | "positive" | "negative"', + summary: '"primary" | "positive" | "negative"', }, }, - options: ['default', 'positive', 'negative'], + options: ['primary', 'positive', 'negative'], control: { type: 'select', }, @@ -336,102 +323,104 @@ DefaultMultiSelected.argTypes = { }, }; -const ControlledSingleSelectionTemplate: StoryFn = ({ ...args }) => { - const chipValues = ['Proprietorship', 'Public', 'Small Business']; - const [value, setValue] = React.useState('Proprietorship'); - return ( - - - Business Type - - - {chipValues.map((chipValue: string) => ( - setValue(name)} - isSelected={value === chipValue} - /> - ))} - - - - - setValue(values[0])} - > - {chipValues.map((chipValue: string) => ( - - {chipValue} - - ))} - - - ); -}; - -export const ControlledSingleSelection = ControlledSingleSelectionTemplate.bind({}); -ControlledSingleSelection.storyName = 'Controlled Single Selection'; -ControlledSingleSelection.args = { - accessibilityLabel: 'Choose one business type from the options below', - selectionType: 'single', -}; - -const ControlledMultiSelectionTemplate: StoryFn = (args) => { - const chipValues = [ - 'Automated Payment Links', - 'Wallet on My App', - 'Offer discounts, Pay Later & EMI options', - ]; - const [values, setValues] = React.useState(['Automated Payment Links']); - return ( - - - What other capabilities are you looking for? - - - {chipValues.map((chipValue: string) => ( - - value - ? setValues(values.filter((v) => v !== name)) - : setValues(values.concat([name])) - } - isSelected={values.includes(chipValue)} - /> - ))} - - - - setValues(values)} - value={values} - > - {chipValues.map((chipValue: string) => ( - - {chipValue} - - ))} - - - ); -}; - -export const ControlledMultiSelection = ControlledMultiSelectionTemplate.bind({}); -ControlledMultiSelection.storyName = 'Controlled Multiple Selection'; -ControlledMultiSelection.args = { - accessibilityLabel: 'Select other capabilities you are looking for from the options below', - selectionType: 'multiple', -}; +// TODO(Rebranding): Uncomment this story after Dropdown rebranding +// const ControlledSingleSelectionTemplate: StoryFn = ({ ...args }) => { +// const chipValues = ['Proprietorship', 'Public', 'Small Business']; +// const [value, setValue] = React.useState('Proprietorship'); +// return ( +// +// +// Business Type +// +// +// {chipValues.map((chipValue: string) => ( +// setValue(name)} +// isSelected={value === chipValue} +// /> +// ))} +// +// +// + +// setValue(values[0])} +// > +// {chipValues.map((chipValue: string) => ( +// +// {chipValue} +// +// ))} +// +// +// ); +// }; + +// export const ControlledSingleSelection = ControlledSingleSelectionTemplate.bind({}); +// ControlledSingleSelection.storyName = 'Controlled Single Selection'; +// ControlledSingleSelection.args = { +// accessibilityLabel: 'Choose one business type from the options below', +// selectionType: 'single', +// }; + +// TODO(Rebranding): Uncomment this story after Dropdown rebranding +// const ControlledMultiSelectionTemplate: StoryFn = (args) => { +// const chipValues = [ +// 'Automated Payment Links', +// 'Wallet on My App', +// 'Offer discounts, Pay Later & EMI options', +// ]; +// const [values, setValues] = React.useState(['Automated Payment Links']); +// return ( +// +// +// What other capabilities are you looking for? +// +// +// {chipValues.map((chipValue: string) => ( +// +// value +// ? setValues(values.filter((v) => v !== name)) +// : setValues(values.concat([name])) +// } +// isSelected={values.includes(chipValue)} +// /> +// ))} +// +// +// +// setValues(values)} +// value={values} +// > +// {chipValues.map((chipValue: string) => ( +// +// {chipValue} +// +// ))} +// +// +// ); +// }; + +// export const ControlledMultiSelection = ControlledMultiSelectionTemplate.bind({}); +// ControlledMultiSelection.storyName = 'Controlled Multiple Selection'; +// ControlledMultiSelection.args = { +// accessibilityLabel: 'Select other capabilities you are looking for from the options below', +// selectionType: 'multiple', +// }; export const Disabled = ChipTemplate.bind({}); Disabled.storyName = 'Disabled'; @@ -477,7 +466,7 @@ ChipWithIcon.parameters = { const ChipColorsTemplate: StoryFn = (args) => { return ( - + Is the result helpful? @@ -493,13 +482,13 @@ const ChipColorsTemplate: StoryFn = (args) => { ); }; -export const ChipWithIntent = ChipColorsTemplate.bind({}); -ChipWithIntent.storyName = 'With Color'; -ChipWithIntent.args = { +export const ChipWithColor = ChipColorsTemplate.bind({}); +ChipWithColor.storyName = 'With Color'; +ChipWithColor.args = { selectionType: 'single', accessibilityLabel: 'Is the result helpful? Please select either yer or no', }; -ChipWithIntent.parameters = { +ChipWithColor.parameters = { controls: { exclude: ['icon'], }, @@ -541,7 +530,7 @@ const AllChipSizesTemplate: StoryFn = ({ children, .. {sizes.map((size, index) => ( - + {size} diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx index ebf97514513..0deecd25aef 100644 --- a/packages/blade/src/components/Chip/ChipGroup.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.tsx @@ -19,8 +19,7 @@ const ChipGroup = ({ onChange, value, size = 'small', - intent = 'none', - color, + color = 'primary', testID, selectionType = 'single', ...styledProps @@ -32,7 +31,6 @@ const ChipGroup = ({ isDisabled, name, size, - intent, color, selectionType, }); diff --git a/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx b/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx index 4bc808b947b..ece17d72734 100644 --- a/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx +++ b/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx @@ -8,8 +8,8 @@ import { castWebType } from '~utils'; const StyledChipWrapper = styled(BaseBox)( ({ theme, borderColor, isChecked, isDisabled, color }) => { - const easing = getIn(theme, chipMotionTokens.easing); - const duration = castWebType(makeMotionTime(getIn(theme, chipMotionTokens.duration))); + const easing = getIn(theme.motion, chipMotionTokens.easing); + const duration = castWebType(makeMotionTime(getIn(theme.motion, chipMotionTokens.duration))); return { display: 'flex', diff --git a/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx b/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx index 59a42ceae44..d24c2417af1 100644 --- a/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx +++ b/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx @@ -39,22 +39,6 @@ describe('', () => { expect(getByRole('radio', { name: 'Mango' })).toBeInTheDocument(); }); - it('should render chip with intent', () => { - const { getByRole } = renderWithTheme( - - - Yes - - - No - - , - ); - - expect(getByRole('radio', { name: 'Yes' })).toBeInTheDocument(); - expect(getByRole('radio', { name: 'No' })).toBeInTheDocument(); - }); - it('should render chip with color', () => { const { getByRole } = renderWithTheme( diff --git a/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx b/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx index dd507316001..3e2b0d9972f 100644 --- a/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx +++ b/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx @@ -9,8 +9,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native'; const selectionTypes: ChipGroupProps['selectionType'][] = ['single', 'multiple']; const sizes: ChipGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large']; -const intents: ChipGroupProps['intent'][] = ['none', 'positive', 'negative']; -const colors: ChipGroupProps['color'][] = ['default', 'positive', 'negative']; +const colors: ChipGroupProps['color'][] = ['primary', 'positive', 'negative']; beforeAll(() => jest.spyOn(console, 'error').mockImplementation()); afterAll(() => jest.restoreAllMocks()); @@ -49,26 +48,6 @@ describe('', () => { }); }); - intents.forEach((intent) => { - it(`should render with intent="${intent}"`, () => { - const { getByText } = renderWithTheme( - - Apple - Mango - Orange - , - ); - - expect(getByText('Apple')).toBeDefined(); - expect(getByText('Mango')).toBeDefined(); - expect(getByText('Orange')).toBeDefined(); - }); - }); - colors.forEach((color) => { it(`should render with color="${color}"`, () => { const { getByText } = renderWithTheme( diff --git a/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx b/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx index 7a9897c879a..dc4f776fda0 100644 --- a/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx +++ b/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx @@ -7,8 +7,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web'; const selectionTypes: ChipGroupProps['selectionType'][] = ['single', 'multiple']; const sizes: ChipGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large']; -const intents: ChipGroupProps['intent'][] = ['none', 'positive', 'negative']; -const colors: ChipGroupProps['color'][] = ['default', 'positive', 'negative']; +const colors: ChipGroupProps['color'][] = ['primary', 'positive', 'negative']; describe('', () => { for (const selectionType of selectionTypes) { @@ -48,28 +47,6 @@ describe('', () => { }); }); - intents.forEach((intent) => { - it(`should render with intent="${intent}"`, () => { - const { getByRole } = renderWithTheme( - - Apple - Mango - Orange - , - ); - - const chipRole = selectionType === 'single' ? 'radio' : 'checkbox'; - const chipGroupRole = selectionType === 'single' ? 'radiogroup' : 'group'; - expect(getByRole(chipGroupRole)).toBeInTheDocument(); - expect(getByRole(chipRole, { name: 'Apple' })).toBeInTheDocument(); - expect(getByRole(chipRole, { name: 'Mango' })).toBeInTheDocument(); - }); - }); - colors.forEach((color) => { it(`should render with color="${color}"`, () => { const { getByRole } = renderWithTheme( diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap index e78e6333e81..2a59f94a51c 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap @@ -71,7 +71,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup > should prioritize Chip's isDisabled prop instead of ChipGroup style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -216,7 +216,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup } > should prioritize Chip's isDisabled prop instead of ChipGroup "alignItems": "center", "alignSelf": "center", "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -248,10 +248,10 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup should prioritize Chip's isDisabled prop instead of ChipGroup [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -286,7 +286,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup > should prioritize Chip's isDisabled prop instead of ChipGroup style={ [ { - "color": "hsla(214, 18%, 69%, 1)", + "color": "hsla(211, 20%, 52%, 0.32)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -423,7 +423,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup } > should prioritize Chip's isDisabled prop instead of ChipGroup "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -455,10 +455,10 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup should prioritize Chip's isDisabled prop instead of ChipGroup [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -493,7 +493,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup > should prioritize Chip's isDisabled prop instead of ChipGroup style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -611,7 +611,7 @@ exports[` should render chip 1`] = ` > should render chip 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -756,7 +756,7 @@ exports[` should render chip 1`] = ` } > should render chip 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -788,10 +788,10 @@ exports[` should render chip 1`] = ` should render chip 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -826,7 +826,7 @@ exports[` should render chip 1`] = ` > should render chip 1`] = ` style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -963,7 +963,7 @@ exports[` should render chip 1`] = ` } > should render chip 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -995,10 +995,10 @@ exports[` should render chip 1`] = ` should render chip 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1033,7 +1033,7 @@ exports[` should render chip 1`] = ` > should render chip 1`] = ` style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1151,7 +1151,7 @@ exports[` should render chip with icon 1`] = ` > should render chip with icon 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1296,7 +1296,7 @@ exports[` should render chip with icon 1`] = ` } > should render chip with icon 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -1328,10 +1328,10 @@ exports[` should render chip with icon 1`] = ` should render chip with icon 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1419,7 +1419,7 @@ exports[` should render chip with icon 1`] = ` > should render chip with icon 1`] = ` /> should render chip with icon 1`] = ` should render chip with icon 1`] = ` should render chip with icon 1`] = ` style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1589,7 +1589,7 @@ exports[` should render chip with icon 1`] = ` } > should render chip with icon 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -1621,10 +1621,10 @@ exports[` should render chip with icon 1`] = ` should render chip with icon 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1712,7 +1712,7 @@ exports[` should render chip with icon 1`] = ` > should render chip with icon 1`] = ` /> should render chip with icon 1`] = ` should render chip with icon 1`] = ` should render chip with icon 1`] = ` style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1863,7 +1863,7 @@ exports[` should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2008,7 +2008,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } > should set disabled state with isDisabled 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -2040,10 +2040,10 @@ exports[` should set disabled state with isDisabled 1`] = ` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -2078,7 +2078,7 @@ exports[` should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(214, 18%, 69%, 1)", + "color": "hsla(211, 20%, 52%, 0.32)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2215,7 +2215,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } > should set disabled state with isDisabled 1`] = ` "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -2247,10 +2247,10 @@ exports[` should set disabled state with isDisabled 1`] = ` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -2285,7 +2285,7 @@ exports[` should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap index 9939ff0f52a..a45ee6579a6 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render with icon 1`] = `"

Select fruits

"`; +exports[` should render with icon 1`] = `"

Select fruits

"`; exports[` should render with icon 2`] = ` .c0.c0.c0.c0.c0 { @@ -63,7 +63,7 @@ exports[` should render with icon 2`] = ` } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -87,10 +87,10 @@ exports[` should render with icon 2`] = ` padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -105,7 +105,7 @@ exports[` should render with icon 2`] = ` .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -149,7 +149,7 @@ exports[` should render with icon 2`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -200,12 +200,19 @@ exports[` should render with icon 2`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -213,7 +220,7 @@ exports[` should render with icon 2`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -230,7 +237,7 @@ exports[` should render with icon 2`] = ` } .c15.c15.c15.c15.c15 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -399,18 +406,18 @@ exports[` should render with icon 2`] = ` @@ -484,18 +491,18 @@ exports[` should render with icon 2`] = ` diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap index 028e6c6126f..05c5e5c078f 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap @@ -61,7 +61,7 @@ exports[` should render chip 1`] = ` } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -85,17 +85,17 @@ exports[` should render chip 1`] = ` padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -139,7 +139,7 @@ exports[` should render chip 1`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -190,12 +190,19 @@ exports[` should render chip 1`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -203,7 +210,7 @@ exports[` should render chip 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -220,7 +227,7 @@ exports[` should render chip 1`] = ` } .c14.c14.c14.c14.c14 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -505,7 +512,7 @@ exports[` should render chip with icon 1`] = ` } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -529,10 +536,10 @@ exports[` should render chip with icon 1`] = ` padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -547,7 +554,7 @@ exports[` should render chip with icon 1`] = ` .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -591,7 +598,7 @@ exports[` should render chip with icon 1`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -642,12 +649,19 @@ exports[` should render chip with icon 1`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -655,7 +669,7 @@ exports[` should render chip with icon 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -672,7 +686,7 @@ exports[` should render chip with icon 1`] = ` } .c15.c15.c15.c15.c15 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -839,18 +853,18 @@ exports[` should render chip with icon 1`] = ` @@ -924,18 +938,18 @@ exports[` should render chip with icon 1`] = ` @@ -1021,7 +1035,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(214,40%,92%,1); border-style: solid; } @@ -1045,17 +1059,49 @@ exports[` should set disabled state with isDisabled 1`] = ` padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(214,40%,92%,1); + border-style: solid; +} + +.c16.c16.c16.c16.c16 { + border-color: hsla(211,20%,52%,0.18); + border-style: solid; +} + +.c18.c18.c18.c18.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + overflow: hidden; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding-right: 12px; + padding-left: 12px; + height: 28px; + background-color: hsla(0,0%,100%,0); + border-radius: 9999px; + border-width: 0.5px; + border-color: hsla(211,20%,52%,0.18); border-style: solid; } .c11.c11.c11.c11.c11 { background-color: transparent; border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(214,40%,92%,1); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -1090,10 +1136,10 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c16.c16.c16.c16.c16 { +.c17.c17.c17.c17.c17 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -1136,7 +1182,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-color: transparent; } -.c17.c17.c17.c17.c17 { +.c19.c19.c19.c19.c19 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1144,8 +1190,8 @@ exports[` should set disabled state with isDisabled 1`] = ` border-color: transparent; } -.c17.c17.c17.c17.c17:hover { - background-color: hsla(216,15%,54%,0.09); +.c19.c19.c19.c19.c19:hover { + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -1196,8 +1242,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c15.c15.c15.c15.c15 { @@ -1218,12 +1270,19 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c15.c15.c15.c15.c15:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c15.c15.c15.c15.c15:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -1231,7 +1290,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -1248,7 +1307,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c14.c14.c14.c14.c14 { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -1269,8 +1328,8 @@ exports[` should set disabled state with isDisabled 1`] = ` -webkit-box-orient: vertical; } -.c18.c18.c18.c18.c18 { - color: hsla(216,27%,36%,1); +.c20.c20.c20.c20.c20 { + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -1351,13 +1410,73 @@ exports[` should set disabled state with isDisabled 1`] = ` } } +@media screen and (min-width:320px) { + .c16.c16.c16.c16.c16 { + border-style: solid; + } +} + +@media screen and (min-width:480px) { + .c16.c16.c16.c16.c16 { + border-style: solid; + } +} + +@media screen and (min-width:768px) { + .c16.c16.c16.c16.c16 { + border-style: solid; + } +} + +@media screen and (min-width:1024px) { + .c16.c16.c16.c16.c16 { + border-style: solid; + } +} + +@media screen and (min-width:1200px) { + .c16.c16.c16.c16.c16 { + border-style: solid; + } +} + +@media screen and (min-width:320px) { + .c18.c18.c18.c18.c18 { + border-style: solid; + } +} + +@media screen and (min-width:480px) { + .c18.c18.c18.c18.c18 { + border-style: solid; + } +} + +@media screen and (min-width:768px) { + .c18.c18.c18.c18.c18 { + border-style: solid; + } +} + +@media screen and (min-width:1024px) { + .c18.c18.c18.c18.c18 { + border-style: solid; + } +} + +@media screen and (min-width:1200px) { + .c18.c18.c18.c18.c18 { + border-style: solid; + } +} +
should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` value="mango" />

Mango diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap index 487840b95a9..e22a1b59b74 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap @@ -17,7 +17,7 @@ exports[` selectionType="multiple" should render with selectionType } > selectionType="multiple" should render with selectionType > selectionType="multiple" should render with selectionType style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -214,7 +214,7 @@ exports[` selectionType="multiple" should render with selectionType } > selectionType="multiple" should render with selectionType "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -246,10 +246,10 @@ exports[` selectionType="multiple" should render with selectionType selectionType="multiple" should render with selectionType [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -284,7 +284,7 @@ exports[` selectionType="multiple" should render with selectionType > selectionType="multiple" should render with selectionType style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -420,7 +420,7 @@ exports[` selectionType="multiple" should render with selectionType } > selectionType="multiple" should render with selectionType "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -452,10 +452,10 @@ exports[` selectionType="multiple" should render with selectionType selectionType="multiple" should render with selectionType [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -490,7 +490,7 @@ exports[` selectionType="multiple" should render with selectionType > selectionType="multiple" should render with selectionType style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -626,7 +626,7 @@ exports[` selectionType="multiple" should render with selectionType } > selectionType="multiple" should render with selectionType "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -658,10 +658,10 @@ exports[` selectionType="multiple" should render with selectionType selectionType="multiple" should render with selectionType [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -696,7 +696,7 @@ exports[` selectionType="multiple" should render with selectionType > selectionType="multiple" should render with selectionType style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -814,7 +814,7 @@ exports[` selectionType="single" should render with selectionType=" > selectionType="single" should render with selectionType=" style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -959,7 +959,7 @@ exports[` selectionType="single" should render with selectionType=" } > selectionType="single" should render with selectionType=" "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -991,10 +991,10 @@ exports[` selectionType="single" should render with selectionType=" selectionType="single" should render with selectionType=" [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1029,7 +1029,7 @@ exports[` selectionType="single" should render with selectionType=" > selectionType="single" should render with selectionType=" style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1166,7 +1166,7 @@ exports[` selectionType="single" should render with selectionType=" } > selectionType="single" should render with selectionType=" "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -1198,10 +1198,10 @@ exports[` selectionType="single" should render with selectionType=" selectionType="single" should render with selectionType=" [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1236,7 +1236,7 @@ exports[` selectionType="single" should render with selectionType=" > selectionType="single" should render with selectionType=" style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1373,7 +1373,7 @@ exports[` selectionType="single" should render with selectionType=" } > selectionType="single" should render with selectionType=" "alignItems": "center", "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", - "borderColor": "hsla(216, 19%, 89%, 1)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -1405,10 +1405,10 @@ exports[` selectionType="single" should render with selectionType=" selectionType="single" should render with selectionType=" [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 19%, 89%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 20%, 52%, 0.18)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 0.5, @@ -1443,7 +1443,7 @@ exports[` selectionType="single" should render with selectionType=" > selectionType="single" should render with selectionType=" style={ [ { - "color": "hsla(216, 27%, 36%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap index 8b98466cda9..b29fdec702a 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render with selectionType="single" 1`] = `"

Select fruits

Select flowers

"`; +exports[` should render with selectionType="single" 1`] = `"

Select fruits

Select flowers

"`; exports[` should render with selectionType="single" 2`] = ` .c0.c0.c0.c0.c0 { @@ -63,7 +63,7 @@ exports[` should render with selectionType="single" 2`] = ` } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -87,17 +87,17 @@ exports[` should render with selectionType="single" 2`] = ` padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -141,7 +141,7 @@ exports[` should render with selectionType="single" 2`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -192,12 +192,19 @@ exports[` should render with selectionType="single" 2`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -205,7 +212,7 @@ exports[` should render with selectionType="single" 2`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -222,7 +229,7 @@ exports[` should render with selectionType="single" 2`] = ` } .c14.c14.c14.c14.c14 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap index 6b96d0d3bc4..4c65da820db 100644 --- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap +++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap @@ -61,7 +61,7 @@ exports[` selectionType="multiple" should render with selectionType } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -85,17 +85,17 @@ exports[` selectionType="multiple" should render with selectionType padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -139,7 +139,7 @@ exports[` selectionType="multiple" should render with selectionType } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -190,12 +190,19 @@ exports[` selectionType="multiple" should render with selectionType } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -203,7 +210,7 @@ exports[` selectionType="multiple" should render with selectionType } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -220,7 +227,7 @@ exports[` selectionType="multiple" should render with selectionType } .c14.c14.c14.c14.c14 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -307,7 +314,7 @@ exports[` selectionType="multiple" should render with selectionType data-blade-component="base-box" >
selectionType="single" should render with selectionType=" } .c10.c10.c10.c10.c10 { - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } @@ -579,17 +586,17 @@ exports[` selectionType="single" should render with selectionType=" padding-right: 12px; padding-left: 12px; height: 28px; - background-color: transparent; + background-color: hsla(0,0%,100%,0); border-radius: 9999px; border-width: 0.5px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-style: solid; } .c11.c11.c11.c11.c11 { background-color: hsla(0,0%,100%,1); border-radius: 9999px; - border-color: hsla(216,19%,89%,1); + border-color: hsla(211,20%,52%,0.18); border-width: 1px; display: -webkit-box; display: -webkit-flex; @@ -633,7 +640,7 @@ exports[` selectionType="single" should render with selectionType=" } .c13.c13.c13.c13.c13:hover { - background-color: hsla(216,15%,54%,0.09); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 150ms; @@ -684,12 +691,19 @@ exports[` selectionType="single" should render with selectionType=" } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); + border-color: hsla(211,27%,76%,1); + background-color: hsla(0,0%,100%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -697,7 +711,7 @@ exports[` selectionType="single" should render with selectionType=" } .c2.c2.c2.c2.c2 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -714,7 +728,7 @@ exports[` selectionType="single" should render with selectionType=" } .c14.c14.c14.c14.c14 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; diff --git a/packages/blade/src/components/Chip/chipTokens.ts b/packages/blade/src/components/Chip/chipTokens.ts index 69830663d64..084a3cb9a98 100644 --- a/packages/blade/src/components/Chip/chipTokens.ts +++ b/packages/blade/src/components/Chip/chipTokens.ts @@ -1,10 +1,11 @@ import type { ChipGroupProps } from './ChipGroup'; -import type { Theme } from '~components/BladeProvider'; -import type { DotNotationColorStringToken, DotNotationSpacingStringToken } from '~utils/types'; +import type { ChipBorderColors, ChipBackgroundColors } from './types'; +import type { DotNotationSpacingStringToken } from '~utils/types'; import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; -import { size } from '~tokens/global'; import type { IconProps } from '~components/Icons'; import type { BaseTextProps } from '~components/Typography/BaseText/types'; +import type { DurationString, EasingString } from '~tokens/global'; +import { size } from '~tokens/global'; const chipGroupGapTokens = { xsmall: { @@ -74,103 +75,71 @@ const chipHorizontalPaddingTokens: ChipHorizontalPaddingTokens = { }, }; -type FeedbackActionBackgroundColors< - T extends 'positive' | 'negative' -> = `feedback.${T}.action.background.primary.${DotNotationColorStringToken< - Theme['colors']['feedback'][T]['action']['background']['primary'] ->}`; -type FeedbackActionBorderColors< - T extends 'positive' | 'negative' -> = `feedback.${T}.action.border.${DotNotationColorStringToken< - Theme['colors']['feedback'][T]['action']['border'] ->}`; type TextColorTokens = BaseTextProps['color']; type IconColorTokens = IconProps['color']; type ChipColorTokens = { text: Record; - icon: Record; - background: Record< - string, - Record< - string, - | FeedbackActionBackgroundColors<'positive'> - | FeedbackActionBackgroundColors<'negative'> - | 'transparent' - | 'brand.gray.a50.lowContrast' - | 'brand.primary.300' - | 'brand.primary.400' - > - >; - border: Record< - string, - Record< - string, - | FeedbackActionBorderColors<'positive'> - | FeedbackActionBorderColors<'negative'> - | 'brand.gray.400.lowContrast' - | 'brand.gray.a100.lowContrast' - | 'brand.gray.a50.lowContrast' - | 'brand.primary.500' - > - >; + icon: Record; + background: Record>; + border: Record>; }; const chipColorTokens: ChipColorTokens = { text: { - unchecked: 'surface.text.subtle.lowContrast', - disabled: 'surface.text.placeholder.lowContrast', - default: 'action.text.secondary.default', - positive: 'feedback.text.positive.lowContrast', - negative: 'feedback.text.negative.lowContrast', + unchecked: 'interactive.text.gray.subtle', + disabled: 'interactive.text.gray.disabled', + primary: 'interactive.text.primary.normal', + positive: 'interactive.text.positive.normal', + negative: 'interactive.text.negative.normal', }, icon: { - unchecked: 'surface.text.subtle.lowContrast', - disabled: 'surface.text.placeholder.lowContrast', - default: 'action.icon.secondary.default', - positive: 'feedback.icon.positive.lowContrast', - negative: 'feedback.icon.negative.lowContrast', + unchecked: 'interactive.icon.gray.subtle', + disabled: 'interactive.icon.gray.disabled', + primary: 'interactive.icon.primary.normal', + positive: 'interactive.icon.positive.normal', + negative: 'interactive.icon.negative.normal', }, background: { unchecked: { default: 'transparent', - hover: 'brand.gray.a50.lowContrast', + hover: 'interactive.background.gray.faded', disabled: 'transparent', }, - default: { - default: 'brand.primary.300', - hover: 'brand.primary.400', - disabled: 'brand.gray.a50.lowContrast', + primary: { + default: 'interactive.background.primary.faded', + hover: 'interactive.background.primary.fadedHighlighted', + disabled: 'interactive.background.primary.disabled', }, positive: { - default: 'feedback.positive.action.background.primary.default.lowContrast', - hover: 'feedback.positive.action.background.primary.hover.lowContrast', - disabled: 'brand.gray.a50.lowContrast', + default: 'interactive.background.positive.faded', + hover: 'interactive.background.positive.fadedHighlighted', + disabled: 'interactive.background.positive.disabled', }, negative: { - default: 'feedback.negative.action.background.primary.default.lowContrast', - hover: 'feedback.negative.action.background.primary.hover.lowContrast', - disabled: 'brand.gray.a50.lowContrast', + default: 'interactive.background.negative.faded', + hover: 'interactive.background.negative.fadedHighlighted', + disabled: 'interactive.background.negative.disabled', }, }, border: { unchecked: { - default: 'brand.gray.400.lowContrast', - disabled: 'brand.gray.400.lowContrast', + default: 'interactive.border.gray.faded', + disabled: 'interactive.border.gray.disabled', }, - default: { - default: 'brand.primary.500', - hover: 'brand.primary.500', - disabled: 'brand.gray.a100.lowContrast', + primary: { + default: 'interactive.border.primary.default', + hover: 'interactive.border.primary.default', + disabled: 'interactive.border.primary.disabled', }, positive: { - default: 'feedback.positive.action.border.primary.default.lowContrast', - hover: 'feedback.positive.action.border.primary.hover.lowContrast', - disabled: 'brand.gray.a100.lowContrast', + default: 'interactive.border.positive.default', + hover: 'interactive.border.positive.default', + disabled: 'interactive.border.positive.disabled', }, negative: { - default: 'feedback.negative.action.border.primary.default.lowContrast', - hover: 'feedback.negative.action.border.primary.hover.lowContrast', - disabled: 'brand.gray.a50.lowContrast', + default: 'interactive.border.negative.default', + hover: 'interactive.border.negative.default', + disabled: 'interactive.border.negative.disabled', }, }, }; @@ -179,12 +148,12 @@ const getChipInputHoverTokens = (color: ChipGroupProps['color']): SelectorInputH return { default: { background: { - checked: 'transparent', - unchecked: 'transparent', + checked: 'colors.interactive.background.staticWhite.default', + unchecked: 'colors.interactive.background.staticWhite.default', }, border: { checked: `colors.${chipColorTokens.border[color || 'default'].hover}` as never, - unchecked: 'colors.brand.gray.500.lowContrast', + unchecked: 'colors.interactive.border.gray.default', }, }, }; @@ -216,9 +185,9 @@ const chipTextSizes = { }, } as const; -const chipMotionTokens = { - duration: 'motion.duration.xquick', - easing: 'motion.easing.standard.effective', +const chipMotionTokens: Record<'duration' | 'easing', DurationString | EasingString> = { + duration: 'duration.xquick', + easing: 'easing.standard.effective', }; export { diff --git a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts index 69d4cf7f1e4..5b401e04ee4 100644 --- a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts +++ b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts @@ -12,7 +12,7 @@ const getAnimatedChipStyles = ({ return { backgroundColor: isDisabled ? 'transparent' - : getIn(theme.colors, 'surface.background.level2.lowContrast'), + : getIn(theme.colors, 'interactive.background.staticWhite.default'), borderRadius: makeBorderSize(theme.border.radius.max), borderColor: getIn(theme.colors, borderColor), borderWidth: getIn(theme, 'border.width.thin'), diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index 478616851f1..f05041a6140 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -1,7 +1,8 @@ import type { StyledPropsBlade } from '~components/Box/styledProps'; import type { Theme } from '~components/BladeProvider'; import type { IconComponent } from '~components/Icons'; -import type { DotNotationColorStringToken, StringChildrenType, TestID } from '~utils/types'; +import type { StringChildrenType, TestID } from '~utils/types'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; type ChipProps = { /** @@ -14,17 +15,11 @@ type ChipProps = { * */ icon?: IconComponent; - /** - * This is deprecated in favor of the `color` prop. - * - * @deprecated Use the `color` prop instead. - */ - intent?: 'positive' | 'negative' | 'none'; /** * Sets the Chip's visual color. * */ - color?: 'positive' | 'negative' | 'default'; + color?: 'primary' | 'positive' | 'negative'; /** * If `true`, the Chip will be disabled * @@ -91,18 +86,12 @@ type ChipGroupProps = { * Use `onChange` to update its value */ value?: string | string[]; - /** - * This is deprecated in favor of the `color` prop. - * - * @default "none" - * @deprecated Use the `color` prop instead. - */ - intent?: 'positive' | 'negative' | 'none'; /** * Sets the ChipGroups's visual color, it will propagate down to all the Chips * + * @default "primary" */ - color?: 'positive' | 'negative' | 'default'; + color?: 'primary' | 'positive' | 'negative'; } & TestID & StyledPropsBlade; @@ -115,19 +104,35 @@ type State = { type ChipGroupContextType = Pick< ChipGroupProps, - | 'isDisabled' - | 'name' - | 'defaultValue' - | 'value' - | 'onChange' - | 'size' - | 'intent' - | 'color' - | 'selectionType' + 'isDisabled' | 'name' | 'defaultValue' | 'value' | 'onChange' | 'size' | 'color' | 'selectionType' > & { state?: State }; +type InteractiveBackgroundColors< + T extends 'positive' | 'negative' | 'primary' +> = `interactive.background.${T}.${DotNotationToken< + Theme['colors']['interactive']['background'][T] +>}`; + +type InteractiveBorderColors< + T extends 'positive' | 'negative' | 'primary' +> = `interactive.border.${T}.${DotNotationToken}`; + +type ChipBackgroundColors = + | InteractiveBackgroundColors<'positive'> + | InteractiveBackgroundColors<'negative'> + | InteractiveBackgroundColors<'primary'> + | 'transparent' + | 'interactive.background.gray.faded'; + +type ChipBorderColors = + | InteractiveBorderColors<'positive'> + | InteractiveBorderColors<'negative'> + | InteractiveBorderColors<'primary'> + | 'interactive.border.gray.faded' + | 'interactive.border.gray.disabled'; + type AnimatedChipProps = { - borderColor: DotNotationColorStringToken; + borderColor: ChipBorderColors; isPressed?: boolean; isDisabled?: boolean; isDesktop?: boolean; @@ -137,7 +142,7 @@ type AnimatedChipProps = { type StyledChipWrapperProps = { color: ChipGroupProps['color']; - borderColor: DotNotationColorStringToken; + borderColor: ChipBorderColors; isChecked?: boolean; isDisabled?: boolean; theme: Theme; @@ -151,4 +156,6 @@ export type { ChipProps, State, StyledChipWrapperProps, + ChipBorderColors, + ChipBackgroundColors, }; diff --git a/packages/blade/src/components/Chip/useChipGroup.ts b/packages/blade/src/components/Chip/useChipGroup.ts index 5c8c41e0976..cf968e47e2f 100644 --- a/packages/blade/src/components/Chip/useChipGroup.ts +++ b/packages/blade/src/components/Chip/useChipGroup.ts @@ -6,15 +6,7 @@ import { useId } from '~utils/useId'; type UseChipGroupProps = Pick< ChipGroupProps, - | 'isDisabled' - | 'name' - | 'value' - | 'defaultValue' - | 'onChange' - | 'size' - | 'intent' - | 'color' - | 'selectionType' + 'isDisabled' | 'name' | 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'selectionType' >; type UseChipGroupReturn = { state: State; @@ -29,7 +21,6 @@ const useChipGroup = ({ onChange, name, size, - intent, color, selectionType, }: UseChipGroupProps): UseChipGroupReturn => { @@ -91,11 +82,10 @@ const useChipGroup = ({ name, state, size, - intent, color, selectionType, }; - }, [isDisabled, name, state, size, intent, color, selectionType]); + }, [isDisabled, name, state, size, color, selectionType]); return { state, contextValue, ids: { labelId } }; }; diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index dadf2de78c7..00a4df842b4 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -7,6 +7,7 @@ export * from './Box'; export * from './Button'; export * from './Button/IconButton'; export * from './Card'; +export * from './Chip'; export * from './Counter'; export * from './Collapsible'; export * from './Carousel'; diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index 866c21276e9..2b19789544a 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -1,6 +1,7 @@ # Upgrade Guide for v11 (Brand Refresh) ## Upgrade Workflow Overview + All the rebranding upgrade activity starts at the design end and is then followed by engineering Upgrade Workflow Overview @@ -66,7 +67,6 @@ npx jscodeshift ./PATH_TO_YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/ + Hello ``` - - With Blade v11, we have removed `highContrast` & `lowContrast` terminology from color tokens. If you have used any color token which has `highContrast` in its name or `contrast="high"` prop in typography components, the codemod will replace it with `"UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"` string. You will have to discuss these instances with designers & manually update this value with a new color token that matches the contrast you need. ```diff @@ -77,9 +77,11 @@ npx jscodeshift ./PATH_TO_YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/ **Step 5**: Test your page and make sure everything works as expected. Once the migration is complete for all pages, you can remove the old version of Blade from your project. ## Available Rebranded Components + To check out the list of available components, visit [Blade Component Status](https://blade.razorpay.com/?path=/docs/guides-component-status--docs). ## Manual Migration Guide + Only use this if you're unable to run the codemod described above. ### Theme Tokens