From 39da6086b24c3507647b561e10a9c88800d4d625 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 10 Feb 2025 00:02:26 +0530 Subject: [PATCH 01/29] chore: expose grid and flexbox props --- .../Box/BaseBox/types/propsTypes.ts | 2 +- .../Box/styledProps/getStyledProps.ts | 2 +- .../src/components/Chip/ChipGroup.stories.tsx | 75 +++++++++++++++++++ .../blade/src/components/Chip/ChipGroup.tsx | 12 ++- packages/blade/src/components/Chip/types.ts | 21 +++++- packages/blade/src/components/Chip/utils.ts | 57 ++++++++++++++ 6 files changed, 165 insertions(+), 4 deletions(-) create mode 100644 packages/blade/src/components/Chip/utils.ts diff --git a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts index ef380945ba3..9c1185f5afd 100644 --- a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts +++ b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts @@ -332,5 +332,5 @@ type BoxRefType = Platform.Select<{ native: View; }>; -export type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps }; +export type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps, GridProps }; export { validBoxAsValues }; diff --git a/packages/blade/src/components/Box/styledProps/getStyledProps.ts b/packages/blade/src/components/Box/styledProps/getStyledProps.ts index 6d9eae5cd70..c6e038edc4e 100644 --- a/packages/blade/src/components/Box/styledProps/getStyledProps.ts +++ b/packages/blade/src/components/Box/styledProps/getStyledProps.ts @@ -144,5 +144,5 @@ const getStyledProps = (props: Record): StyledPropsBlade => { return removeUndefinedStyledProps(makeStyledProps(props)); }; -export type { StyledPropsBlade }; +export type { StyledPropsBlade, StyledPropsInputType }; export { getStyledProps, makeStyledProps, removeUndefinedStyledProps }; diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index 2485699e105..c489eff7427 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -727,3 +727,78 @@ chipRef.parameters = { exclude: ['icon'], }, }; + +export const MultiChipStory: StoryFn = (args) => { + const chipArray = [ + { + value: '100', + label: '₹100', + }, + { + value: '500', + label: '₹500', + }, + { + value: '1000', + label: '₹1000', + }, + { + value: '2000', + label: '₹2000', + }, + { + value: '5000', + label: '₹5000', + }, + { + value: '10000', + label: '₹10000', + }, + { + value: '20000', + label: '₹20000', + }, + { + value: '50000', + label: '₹50000', + }, + { + value: '100000', + label: '₹100000', + }, + { + value: '200000', + label: '₹200000', + }, + ]; + + return ( + + + {chipArray.map((chip, index) => ( + + {chip.label} + + ))} + + + {chipArray.map((chip, index) => ( + + {chip.label} + + ))} + + + ); +}; diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx index af2b0504781..7ec3fb11373 100644 --- a/packages/blade/src/components/Chip/ChipGroup.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.tsx @@ -3,6 +3,7 @@ import { chipGroupGapTokens, chipGroupLabelSizeTokens } from './chipTokens'; import { ChipGroupProvider } from './ChipGroupContext'; import { useChipGroup } from './useChipGroup'; import type { ChipGroupProps } from './types'; +import { getLayOutProps } from './utils'; import BaseBox from '~components/Box/BaseBox'; import { FormHint, FormLabel } from '~components/Form'; import { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField'; @@ -33,6 +34,7 @@ const _ChipGroup = ( color = 'primary', testID, selectionType = 'single', + chipGroupContainerLayout = {}, ...rest }: ChipGroupProps, ref: React.Ref, @@ -69,6 +71,9 @@ const _ChipGroup = ( } } + console.log('chipGroupContainerLayout', chipGroupContainerLayout); + console.log('stylesProps', getStyledProps(chipGroupContainerLayout)); + return ( @@ -96,7 +101,12 @@ const _ChipGroup = ( {accessibilityLabel} - + {React.Children.map(children, (child, index) => { return ( & FlexboxProps & GridProps>, + '__brand__' +>; type ChipCommonProps = { /** @@ -137,6 +148,13 @@ type ChipGroupCommonProps = { * @default "primary" */ color?: 'primary' | 'positive' | 'negative'; + /** + * Layout properties for the ChipGroup container + * currently supports `display`, flex and grid properties + * @default { display: 'flex', flexDirection: 'row', flexWrap: 'wrap' } + * + */ + chipGroupContainerLayout?: ChipGroupContainerLayoutProps; } & TestID & DataAnalyticsAttribute & StyledPropsBlade; @@ -246,4 +264,5 @@ export type { StyledChipWrapperProps, ChipBorderColors, ChipBackgroundColors, + ChipGroupContainerLayoutProps, }; diff --git a/packages/blade/src/components/Chip/utils.ts b/packages/blade/src/components/Chip/utils.ts new file mode 100644 index 00000000000..9361ad4bf14 --- /dev/null +++ b/packages/blade/src/components/Chip/utils.ts @@ -0,0 +1,57 @@ +// ref - /blade/packages/blade/src/components/Box/styledProps/getStyledProps.ts +// since here the use case is too specific that's why makeLayout Prop is inside Chip. + +import type { ChipGroupContainerLayoutProps } from './types'; +import { removeUndefinedStyledProps } from '~components/Box/styledProps'; +import type { KeysRequired } from '~utils/types'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type StyledPropsInputType = Record; + +const makeStyledProps = ( + props: StyledPropsInputType, +): KeysRequired => { + return { + display: props.display, + gridColumn: props.gridColumn, + gridRow: props.gridRow, + gridArea: props.gridArea, + alignSelf: props.alignSelf, + justifySelf: props.justifySelf, + placeSelf: props.placeSelf, + order: props.order, + gridColumnStart: props.gridColumnStart, + gridColumnEnd: props.gridColumnEnd, + alignContent: props.alignContent, + alignItems: props.alignItems, + columnGap: props.columnGap, + gap: props.gap, + gridAutoColumns: props.gridAutoColumns, + gridAutoFlow: props.gridAutoFlow, + gridAutoRows: props.gridAutoRows, + gridTemplateAreas: props.gridTemplateAreas, + grid: props.grid, + gridTemplate: props.gridTemplate, + gridTemplateColumns: props.gridTemplateColumns, + gridTemplateRows: props.gridTemplateRows, + justifyContent: props.justifyContent, + justifyItems: props.justifyItems, + rowGap: props.rowGap, + flexBasis: props.flexBasis, + flexDirection: props.flexDirection, + flexGrow: props.flexGrow, + flexShrink: props.flexShrink, + flexWrap: props.flexWrap, + flex: props.flex, + placeItems: props.placeItems, + gridRowEnd: props.gridRowEnd, + gridRowStart: props.gridRowStart, + }; +}; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const getLayOutProps = (props: Record): ChipGroupContainerLayoutProps => { + return removeUndefinedStyledProps(makeStyledProps(props)); +}; + +export { getLayOutProps }; From 67b9d5f5a35ef472f929c2a96b7f3bfc7bf2bde0 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 10 Feb 2025 00:04:50 +0530 Subject: [PATCH 02/29] fix: add changeset --- .changeset/two-cows-reply.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/two-cows-reply.md diff --git a/.changeset/two-cows-reply.md b/.changeset/two-cows-reply.md new file mode 100644 index 00000000000..dd9b01aff66 --- /dev/null +++ b/.changeset/two-cows-reply.md @@ -0,0 +1,5 @@ +--- +'@razorpay/blade': patch +--- + +fix(blade): allow consumers to align chips in chipgroup From fb84e537fcdc9d251f437bae465450563eb3eec0 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 10 Feb 2025 00:16:02 +0530 Subject: [PATCH 03/29] chore: update lint error --- packages/blade/src/components/Chip/ChipGroup.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index c489eff7427..c1d367e08e5 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -728,7 +728,7 @@ chipRef.parameters = { }, }; -export const MultiChipStory: StoryFn = (args) => { +export const MultiChipStory: StoryFn = () => { const chipArray = [ { value: '100', From 2481620c77c03fb04cd82723dafb13ca2d99980a Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 10 Feb 2025 12:45:50 +0530 Subject: [PATCH 04/29] feat: add width prop in chip --- packages/blade/src/components/Chip/Chip.tsx | 3 ++- .../blade/src/components/Chip/ChipGroup.stories.tsx | 4 ++-- packages/blade/src/components/Chip/types.ts | 10 +++++++++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index 01fa949c773..b833b7d4524 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -39,7 +39,7 @@ type OnChange = ({ }) => void; const _Chip: React.ForwardRefRenderFunction = ( - { isDisabled, value, children, icon: Icon, color, testID, _motionMeta, ...rest }, + { isDisabled, value, children, icon: Icon, color, testID, _motionMeta, width, ...rest }, ref, ) => { const { theme } = useTheme(); @@ -201,6 +201,7 @@ const _Chip: React.ForwardRefRenderFunction = ( } height={makeSize(chipHeightTokens[_size])} gap="spacing.3" + width={width} > {Icon ? ( diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index c1d367e08e5..d230a6ca842 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -789,12 +789,12 @@ export const MultiChipStory: StoryFn = () => { label="Select a gift card with value (custom chipGroupContainerLayout)" chipGroupContainerLayout={{ display: 'grid', - gridTemplateColumns: 'repeat(3, minmax(0,80px))', + gridTemplateColumns: 'repeat(3, minmax(0,120px))', gap: 'spacing.3', }} > {chipArray.map((chip, index) => ( - + {chip.label} ))} diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index a32b9989f4b..d287feb6643 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -9,7 +9,11 @@ import type { } from '~utils/types'; import type { DotNotationToken } from '~utils/lodashButBetter/get'; import type { MotionMetaProp } from '~components/BaseMotion'; -import type { FlexboxProps, GridProps } from '~components/Box/BaseBox/types/propsTypes'; +import type { + BaseBoxProps, + FlexboxProps, + GridProps, +} from '~components/Box/BaseBox/types/propsTypes'; type ChipGroupContainerLayoutProps = Omit< Partial & FlexboxProps & GridProps>, @@ -40,6 +44,10 @@ type ChipCommonProps = { * Use `onChange` to update its value */ value?: string; + /** + * width prop sets the width of the Chip + */ + width?: BaseBoxProps['width']; } & TestID & DataAnalyticsAttribute & StyledPropsBlade & From 1e89e9792df52fee987e8a2a687c5695b183de43 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 10 Feb 2025 15:16:42 +0530 Subject: [PATCH 05/29] feat: let user change the layout --- .../src/components/Chip/ChipGroup.stories.tsx | 22 ++++++++------- .../blade/src/components/Chip/ChipGroup.tsx | 27 ++++++++++++++----- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index d230a6ca842..beace24cfc9 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -787,17 +787,19 @@ export const MultiChipStory: StoryFn = () => { - {chipArray.map((chip, index) => ( - - {chip.label} - - ))} + + {chipArray.map((chip, index) => ( + + {chip.label} + + ))} + ); diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx index 7ec3fb11373..ea3d2a4c01e 100644 --- a/packages/blade/src/components/Chip/ChipGroup.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.tsx @@ -13,6 +13,7 @@ import { Text } from '~components/Typography'; import type { BladeElementRef } from '~utils/types'; import { throwBladeError } from '~utils/logger'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; +import { getComponentId } from '~utils/isValidAllowedChildren'; const _ChipGroup = ( { @@ -34,7 +35,6 @@ const _ChipGroup = ( color = 'primary', testID, selectionType = 'single', - chipGroupContainerLayout = {}, ...rest }: ChipGroupProps, ref: React.Ref, @@ -70,9 +70,24 @@ const _ChipGroup = ( }); } } - - console.log('chipGroupContainerLayout', chipGroupContainerLayout); - console.log('stylesProps', getStyledProps(chipGroupContainerLayout)); + const isWrapperLayoutControlled = + typeof children === 'object' && getComponentId(children) === 'Box'; + const getChipGroupWrapperStyles = (): Record => { + if (isWrapperLayoutControlled) { + return { + ...(React.isValidElement(children) ? getLayOutProps(children.props) : {}), + }; + } + return {}; + }; + const getChipWrapperChildren = (): React.ReactNode => { + if (isWrapperLayoutControlled) { + if (React.isValidElement(children) && children.props) { + return children.props.children; + } + } + return children; + }; return ( @@ -105,9 +120,9 @@ const _ChipGroup = ( display="flex" flexDirection="row" flexWrap="wrap" - {...getLayOutProps(chipGroupContainerLayout)} + {...(isWrapperLayoutControlled ? getChipGroupWrapperStyles() : {})} > - {React.Children.map(children, (child, index) => { + {React.Children.map(getChipWrapperChildren(), (child, index) => { return ( Date: Mon, 10 Feb 2025 17:16:51 +0530 Subject: [PATCH 06/29] chore: remove unsed commit types --- packages/blade/src/components/Chip/types.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index d287feb6643..2f1fb3be3b1 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -156,13 +156,6 @@ type ChipGroupCommonProps = { * @default "primary" */ color?: 'primary' | 'positive' | 'negative'; - /** - * Layout properties for the ChipGroup container - * currently supports `display`, flex and grid properties - * @default { display: 'flex', flexDirection: 'row', flexWrap: 'wrap' } - * - */ - chipGroupContainerLayout?: ChipGroupContainerLayoutProps; } & TestID & DataAnalyticsAttribute & StyledPropsBlade; From 18838c7c9b04e5689c7a96261fedc8d19ab9e4fd Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 01:32:32 +0530 Subject: [PATCH 07/29] chore: review changes --- packages/blade/src/components/Chip/Chip.tsx | 3 ++ .../blade/src/components/Chip/ChipGroup.tsx | 41 ++----------------- 2 files changed, 6 insertions(+), 38 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index b833b7d4524..926b71611d3 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -7,6 +7,7 @@ import { getChipInputHoverTokens, chipHeightTokens, chipHorizontalPaddingTokens, + chipGroupGapTokens, } from './chipTokens'; import type { ChipProps } from './types'; import { AnimatedChip } from './AnimatedChip'; @@ -142,6 +143,8 @@ const _Chip: React.ForwardRefRenderFunction = ( return ( => { - if (isWrapperLayoutControlled) { - return { - ...(React.isValidElement(children) ? getLayOutProps(children.props) : {}), - }; - } - return {}; - }; - const getChipWrapperChildren = (): React.ReactNode => { - if (isWrapperLayoutControlled) { - if (React.isValidElement(children) && children.props) { - return children.props.children; - } - } - return children; - }; return ( @@ -116,23 +96,8 @@ const _ChipGroup = ( {accessibilityLabel} - - {React.Children.map(getChipWrapperChildren(), (child, index) => { - return ( - - {child} - - ); - })} + + {React.Children.map(children, (child) => child)} Date: Tue, 11 Feb 2025 01:36:27 +0530 Subject: [PATCH 08/29] chore: update snap --- .../__snapshots__/Chip.native.test.tsx.snap | 2276 ++++++++--------- .../__snapshots__/Chip.ssr.test.tsx.snap | 287 +-- .../__snapshots__/Chip.web.test.tsx.snap | 838 +++--- .../ChipGroup.native.test.tsx.snap | 1470 +++++------ .../__snapshots__/ChipGroup.ssr.test.tsx.snap | 411 ++- .../__snapshots__/ChipGroup.web.test.tsx.snap | 458 ++-- 6 files changed, 2733 insertions(+), 3007 deletions(-) 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 c4e0e4a8441..0c5402c865b 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 @@ -120,10 +120,12 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup } > should prioritize Chip's isDisabled prop instead of ChipGroup } > - - - Apple - - + Apple + @@ -329,10 +319,12 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup should prioritize Chip's isDisabled prop instead of ChipGroup } > - - - Mango - - + Mango + @@ -664,10 +644,12 @@ exports[` should render chip 1`] = ` } > should render chip 1`] = ` } > - - - Apple - - + Apple + @@ -873,10 +843,12 @@ exports[` should render chip 1`] = ` should render chip 1`] = ` } > - - - Mango - - + Mango + @@ -1208,10 +1168,12 @@ exports[` should render chip with icon 1`] = ` } > should render chip with icon 1`] = ` } > - - - - - - + + - - - - - Apple - + } + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + + + Apple + @@ -1517,10 +1467,12 @@ exports[` should render chip with icon 1`] = ` should render chip with icon 1`] = ` } > - - - - - - + + - - - - - Mango - + } + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + + + Mango + @@ -1952,10 +1892,12 @@ exports[` should set disabled state with isDisabled 1`] = ` } > should set disabled state with isDisabled 1`] = ` } > - - - Apple - - + Apple + @@ -2161,10 +2091,12 @@ exports[` should set disabled state with isDisabled 1`] = ` should set disabled state with isDisabled 1`] = ` } > - - - Mango - - + Mango + 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 bcf1fad3d18..c2110dea07f 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 { @@ -27,18 +27,15 @@ exports[` should render with icon 2`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -52,12 +49,12 @@ exports[` should render with icon 2`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -85,14 +82,14 @@ exports[` should render with icon 2`] = ` border-style: solid; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -130,7 +127,7 @@ exports[` should render with icon 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -138,7 +135,7 @@ exports[` should render with icon 2`] = ` border-color: transparent; } -.c12.c12.c12.c12.c12:hover { +.c11.c11.c11.c11.c11:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -146,7 +143,7 @@ exports[` should render with icon 2`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -172,7 +169,7 @@ exports[` should render with icon 2`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -189,7 +186,7 @@ exports[` should render with icon 2`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -200,7 +197,7 @@ exports[` should render with icon 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c8.c8.c8.c8.c8:hover + div { +.c7.c7.c7.c7.c7:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -226,7 +223,7 @@ exports[` should render with icon 2`] = ` padding: 0; } -.c14.c14.c14.c14.c14 { +.c13.c13.c13.c13.c13 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -250,61 +247,61 @@ exports[` should render with icon 2`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @@ -343,173 +340,163 @@ 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 a4a32e803ca..93c5e6e2c73 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 @@ -25,18 +25,15 @@ exports[` should accept data-analytics-* 1`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -50,12 +47,12 @@ exports[` should accept data-analytics-* 1`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -83,7 +80,7 @@ exports[` should accept data-analytics-* 1`] = ` border-style: solid; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -121,7 +118,7 @@ exports[` should accept data-analytics-* 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -129,7 +126,7 @@ exports[` should accept data-analytics-* 1`] = ` border-color: transparent; } -.c12.c12.c12.c12.c12:hover { +.c11.c11.c11.c11.c11:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -137,7 +134,7 @@ exports[` should accept data-analytics-* 1`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -163,7 +160,7 @@ exports[` should accept data-analytics-* 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -180,7 +177,7 @@ exports[` should accept data-analytics-* 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -191,7 +188,7 @@ exports[` should accept data-analytics-* 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c8.c8.c8.c8.c8:hover + div { +.c7.c7.c7.c7.c7:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -217,7 +214,7 @@ exports[` should accept data-analytics-* 1`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -241,61 +238,61 @@ exports[` should accept data-analytics-* 1`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @@ -333,111 +330,101 @@ exports[` should accept data-analytics-* 1`] = ` >
-
-
+
-
-
+
@@ -471,18 +458,15 @@ exports[` should render chip 1`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -496,12 +480,12 @@ exports[` should render chip 1`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -529,7 +513,7 @@ exports[` should render chip 1`] = ` border-style: solid; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -567,7 +551,7 @@ exports[` should render chip 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -575,7 +559,7 @@ exports[` should render chip 1`] = ` border-color: transparent; } -.c12.c12.c12.c12.c12:hover { +.c11.c11.c11.c11.c11:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -583,7 +567,7 @@ exports[` should render chip 1`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -609,7 +593,7 @@ exports[` should render chip 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -626,7 +610,7 @@ exports[` should render chip 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -637,7 +621,7 @@ exports[` should render chip 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c8.c8.c8.c8.c8:hover + div { +.c7.c7.c7.c7.c7:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -663,7 +647,7 @@ exports[` should render chip 1`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -687,61 +671,61 @@ exports[` should render chip 1`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @@ -778,109 +762,99 @@ exports[` should render chip 1`] = ` >
-
-
+
-
-
+
@@ -914,18 +888,15 @@ exports[` should render chip with icon 1`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -939,12 +910,12 @@ exports[` should render chip with icon 1`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -972,14 +943,14 @@ exports[` should render chip with icon 1`] = ` border-style: solid; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -1017,7 +988,7 @@ exports[` should render chip with icon 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1025,7 +996,7 @@ exports[` should render chip with icon 1`] = ` border-color: transparent; } -.c12.c12.c12.c12.c12:hover { +.c11.c11.c11.c11.c11:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -1033,7 +1004,7 @@ exports[` should render chip with icon 1`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1059,7 +1030,7 @@ exports[` should render chip with icon 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -1076,7 +1047,7 @@ exports[` should render chip with icon 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -1087,7 +1058,7 @@ exports[` should render chip with icon 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c8.c8.c8.c8.c8:hover + div { +.c7.c7.c7.c7.c7:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -1113,7 +1084,7 @@ exports[` should render chip with icon 1`] = ` padding: 0; } -.c14.c14.c14.c14.c14 { +.c13.c13.c13.c13.c13 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -1137,61 +1108,61 @@ exports[` should render chip with icon 1`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @@ -1228,173 +1199,163 @@ exports[` should render chip with icon 1`] = ` >
-
-
+
-
-
+
@@ -1428,18 +1389,15 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1453,12 +1411,12 @@ exports[` should set disabled state with isDisabled 1`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(214,40%,92%,1); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1486,12 +1444,12 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; } -.c15.c15.c15.c15.c15 { +.c14.c14.c14.c14.c14 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c17.c17.c17.c17.c17 { +.c16.c16.c16.c16.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1519,7 +1477,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(214,40%,92%,1); @@ -1557,7 +1515,7 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c16.c16.c16.c16.c16 { +.c15.c15.c15.c15.c15 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -1595,7 +1553,7 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1603,7 +1561,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-color: transparent; } -.c18.c18.c18.c18.c18 { +.c17.c17.c17.c17.c17 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1611,7 +1569,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-color: transparent; } -.c18.c18.c18.c18.c18:hover { +.c17.c17.c17.c17.c17:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -1619,7 +1577,7 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1645,7 +1603,7 @@ exports[` should set disabled state with isDisabled 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -1662,7 +1620,7 @@ exports[` should set disabled state with isDisabled 1`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -1673,7 +1631,7 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c14.c14.c14.c14.c14 { +.c13.c13.c13.c13.c13 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -1690,7 +1648,7 @@ exports[` should set disabled state with isDisabled 1`] = ` word-wrap: normal; } -.c14.c14.c14.c14.c14:focus-visible + div { +.c13.c13.c13.c13.c13:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -1701,7 +1659,7 @@ exports[` should set disabled state with isDisabled 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c14.c14.c14.c14.c14:hover + div { +.c13.c13.c13.c13.c13:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -1727,7 +1685,7 @@ exports[` should set disabled state with isDisabled 1`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { color: hsla(211,20%,52%,0.32); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -1750,7 +1708,7 @@ exports[` should set disabled state with isDisabled 1`] = ` overflow-wrap: break-word; } -.c19.c19.c19.c19.c19 { +.c18.c18.c18.c18.c18 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -1774,121 +1732,121 @@ exports[` should set disabled state with isDisabled 1`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:320px) { - .c15.c15.c15.c15.c15 { + .c14.c14.c14.c14.c14 { border-style: solid; } } @media screen and (min-width:480px) { - .c15.c15.c15.c15.c15 { + .c14.c14.c14.c14.c14 { border-style: solid; } } @media screen and (min-width:768px) { - .c15.c15.c15.c15.c15 { + .c14.c14.c14.c14.c14 { border-style: solid; } } @media screen and (min-width:1024px) { - .c15.c15.c15.c15.c15 { + .c14.c14.c14.c14.c14 { border-style: solid; } } @media screen and (min-width:1200px) { - .c15.c15.c15.c15.c15 { + .c14.c14.c14.c14.c14 { border-style: solid; } } @media screen and (min-width:320px) { - .c17.c17.c17.c17.c17 { + .c16.c16.c16.c16.c16 { border-style: solid; } } @media screen and (min-width:480px) { - .c17.c17.c17.c17.c17 { + .c16.c16.c16.c16.c16 { border-style: solid; } } @media screen and (min-width:768px) { - .c17.c17.c17.c17.c17 { + .c16.c16.c16.c16.c16 { border-style: solid; } } @media screen and (min-width:1024px) { - .c17.c17.c17.c17.c17 { + .c16.c16.c16.c16.c16 { border-style: solid; } } @media screen and (min-width:1200px) { - .c17.c17.c17.c17.c17 { + .c16.c16.c16.c16.c16 { border-style: solid; } } @@ -1925,110 +1883,100 @@ exports[` should set disabled state with isDisabled 1`] = ` >
-
-
+
-
- -
+
+ 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 b8c53c3825c..35aee59476a 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 @@ -246,10 +246,12 @@ exports[` selectionType="multiple" should render with selectionType } > selectionType="multiple" should render with selectionType } > - - - Apple - - + Apple + @@ -454,10 +444,12 @@ exports[` selectionType="multiple" should render with selectionType selectionType="multiple" should render with selectionType } > - - - Mango - - + Mango + @@ -662,10 +642,12 @@ exports[` selectionType="multiple" should render with selectionType selectionType="multiple" should render with selectionType } > - - - Orange - - + Orange + @@ -1123,10 +1093,12 @@ exports[` selectionType="single" should render with selectionType=" } > selectionType="single" should render with selectionType=" } > - - - Apple - - + Apple + @@ -1332,10 +1292,12 @@ exports[` selectionType="single" should render with selectionType=" selectionType="single" should render with selectionType=" } > - - - Mango - - + Mango + @@ -1541,10 +1491,12 @@ exports[` selectionType="single" should render with selectionType=" selectionType="single" should render with selectionType=" } > - - - Orange - - + Orange + 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 87d0bad877b..9f8e911fdb6 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 { @@ -27,18 +27,15 @@ exports[` should render with selectionType="single" 2`] = ` } .c4.c4.c4.c4.c4 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c5.c5.c5.c5.c5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -52,12 +49,12 @@ exports[` should render with selectionType="single" 2`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -85,7 +82,7 @@ exports[` should render with selectionType="single" 2`] = ` border-style: solid; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -123,7 +120,7 @@ exports[` should render with selectionType="single" 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -131,7 +128,7 @@ exports[` should render with selectionType="single" 2`] = ` border-color: transparent; } -.c12.c12.c12.c12.c12:hover { +.c11.c11.c11.c11.c11:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -139,7 +136,7 @@ exports[` should render with selectionType="single" 2`] = ` transition-duration: 160ms; } -.c6.c6.c6.c6.c6 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -165,7 +162,7 @@ exports[` should render with selectionType="single" 2`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8 { +.c7.c7.c7.c7.c7 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -182,7 +179,7 @@ exports[` should render with selectionType="single" 2`] = ` word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c7.c7.c7.c7.c7:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -193,7 +190,7 @@ exports[` should render with selectionType="single" 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c8.c8.c8.c8.c8:hover + div { +.c7.c7.c7.c7.c7:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -219,7 +216,7 @@ exports[` should render with selectionType="single" 2`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -243,61 +240,61 @@ exports[` should render with selectionType="single" 2`] = ` } @media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { + .c8.c8.c8.c8.c8 { border-style: solid; } } @media screen and (min-width:320px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:480px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:768px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1024px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @media screen and (min-width:1200px) { - .c11.c11.c11.c11.c11 { + .c10.c10.c10.c10.c10 { border-style: solid; } } @@ -340,162 +337,147 @@ exports[` should render with selectionType="single" 2`] = ` >
-
-
+
-
-
+
-
-
+
@@ -532,159 +514,144 @@ exports[` should render with selectionType="single" 2`] = ` >
-
-
+
-
-
+
-
-
+
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 8522163c0fa..17fca5a3bb1 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 @@ -45,18 +45,15 @@ exports[` selectionType="multiple" should render with selectionType } .c7.c7.c7.c7.c7 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c8.c8.c8.c8.c8 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -70,12 +67,12 @@ exports[` selectionType="multiple" should render with selectionType align-items: center; } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c14.c14.c14.c14.c14 { +.c13.c13.c13.c13.c13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -103,7 +100,7 @@ exports[` selectionType="multiple" should render with selectionType border-style: solid; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -141,7 +138,7 @@ exports[` selectionType="multiple" should render with selectionType transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c15.c15.c15.c15.c15 { +.c14.c14.c14.c14.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -149,7 +146,7 @@ exports[` selectionType="multiple" should render with selectionType border-color: transparent; } -.c15.c15.c15.c15.c15:hover { +.c14.c14.c14.c14.c14:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -157,7 +154,7 @@ exports[` selectionType="multiple" should render with selectionType transition-duration: 160ms; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -183,7 +180,7 @@ exports[` selectionType="multiple" should render with selectionType word-wrap: normal; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -200,7 +197,7 @@ exports[` selectionType="multiple" should render with selectionType word-wrap: normal; } -.c11.c11.c11.c11.c11:focus-visible + div { +.c10.c10.c10.c10.c10:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -211,7 +208,7 @@ exports[` selectionType="multiple" should render with selectionType transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11:hover + div { +.c10.c10.c10.c10.c10:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -260,7 +257,7 @@ exports[` selectionType="multiple" should render with selectionType padding: 0; } -.c16.c16.c16.c16.c16 { +.c15.c15.c15.c15.c15 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -284,61 +281,61 @@ exports[` selectionType="multiple" should render with selectionType } @media screen and (min-width:320px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:480px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:768px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1024px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1200px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:320px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:480px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:768px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:1024px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:1200px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @@ -404,159 +401,144 @@ exports[` selectionType="multiple" should render with selectionType >
-
-
+
-
-
+
-
-
+
@@ -610,18 +592,15 @@ exports[` selectionType="single" should render with selectionType=" } .c7.c7.c7.c7.c7 { - margin-bottom: 8px; - margin-right: 8px; -} - -.c8.c8.c8.c8.c8 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + margin-bottom: 8px; + margin-right: 8px; } -.c10.c10.c10.c10.c10 { +.c9.c9.c9.c9.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -635,12 +614,12 @@ exports[` selectionType="single" should render with selectionType=" align-items: center; } -.c12.c12.c12.c12.c12 { +.c11.c11.c11.c11.c11 { border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c14.c14.c14.c14.c14 { +.c13.c13.c13.c13.c13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -668,7 +647,7 @@ exports[` selectionType="single" should render with selectionType=" border-style: solid; } -.c13.c13.c13.c13.c13 { +.c12.c12.c12.c12.c12 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -706,7 +685,7 @@ exports[` selectionType="single" should render with selectionType=" transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c15.c15.c15.c15.c15 { +.c14.c14.c14.c14.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -714,7 +693,7 @@ exports[` selectionType="single" should render with selectionType=" border-color: transparent; } -.c15.c15.c15.c15.c15:hover { +.c14.c14.c14.c14.c14:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -722,7 +701,7 @@ exports[` selectionType="single" should render with selectionType=" transition-duration: 160ms; } -.c9.c9.c9.c9.c9 { +.c8.c8.c8.c8.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -748,7 +727,7 @@ exports[` selectionType="single" should render with selectionType=" word-wrap: normal; } -.c11.c11.c11.c11.c11 { +.c10.c10.c10.c10.c10 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -765,7 +744,7 @@ exports[` selectionType="single" should render with selectionType=" word-wrap: normal; } -.c11.c11.c11.c11.c11:focus-visible + div { +.c10.c10.c10.c10.c10:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -776,7 +755,7 @@ exports[` selectionType="single" should render with selectionType=" transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11:hover + div { +.c10.c10.c10.c10.c10:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -825,7 +804,7 @@ exports[` selectionType="single" should render with selectionType=" padding: 0; } -.c16.c16.c16.c16.c16 { +.c15.c15.c15.c15.c15 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -849,61 +828,61 @@ exports[` selectionType="single" should render with selectionType=" } @media screen and (min-width:320px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:480px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:768px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1024px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1200px) { - .c12.c12.c12.c12.c12 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:320px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:480px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:768px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:1024px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @media screen and (min-width:1200px) { - .c14.c14.c14.c14.c14 { + .c13.c13.c13.c13.c13 { border-style: solid; } } @@ -969,162 +948,147 @@ exports[` selectionType="single" should render with selectionType=" >
-
-
+
-
-
+
-
-
+
From f280c95c3944abaf55c99732260ba80c365c42bc Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 11:47:42 +0530 Subject: [PATCH 09/29] chore: removed unused utils --- packages/blade/src/components/Chip/utils.ts | 57 --------------------- 1 file changed, 57 deletions(-) delete mode 100644 packages/blade/src/components/Chip/utils.ts diff --git a/packages/blade/src/components/Chip/utils.ts b/packages/blade/src/components/Chip/utils.ts deleted file mode 100644 index 9361ad4bf14..00000000000 --- a/packages/blade/src/components/Chip/utils.ts +++ /dev/null @@ -1,57 +0,0 @@ -// ref - /blade/packages/blade/src/components/Box/styledProps/getStyledProps.ts -// since here the use case is too specific that's why makeLayout Prop is inside Chip. - -import type { ChipGroupContainerLayoutProps } from './types'; -import { removeUndefinedStyledProps } from '~components/Box/styledProps'; -import type { KeysRequired } from '~utils/types'; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type StyledPropsInputType = Record; - -const makeStyledProps = ( - props: StyledPropsInputType, -): KeysRequired => { - return { - display: props.display, - gridColumn: props.gridColumn, - gridRow: props.gridRow, - gridArea: props.gridArea, - alignSelf: props.alignSelf, - justifySelf: props.justifySelf, - placeSelf: props.placeSelf, - order: props.order, - gridColumnStart: props.gridColumnStart, - gridColumnEnd: props.gridColumnEnd, - alignContent: props.alignContent, - alignItems: props.alignItems, - columnGap: props.columnGap, - gap: props.gap, - gridAutoColumns: props.gridAutoColumns, - gridAutoFlow: props.gridAutoFlow, - gridAutoRows: props.gridAutoRows, - gridTemplateAreas: props.gridTemplateAreas, - grid: props.grid, - gridTemplate: props.gridTemplate, - gridTemplateColumns: props.gridTemplateColumns, - gridTemplateRows: props.gridTemplateRows, - justifyContent: props.justifyContent, - justifyItems: props.justifyItems, - rowGap: props.rowGap, - flexBasis: props.flexBasis, - flexDirection: props.flexDirection, - flexGrow: props.flexGrow, - flexShrink: props.flexShrink, - flexWrap: props.flexWrap, - flex: props.flex, - placeItems: props.placeItems, - gridRowEnd: props.gridRowEnd, - gridRowStart: props.gridRowStart, - }; -}; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const getLayOutProps = (props: Record): ChipGroupContainerLayoutProps => { - return removeUndefinedStyledProps(makeStyledProps(props)); -}; - -export { getLayOutProps }; From 98296fb7f8da7dfbb9a9db44e5b7e0fa957ddf51 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 11:48:30 +0530 Subject: [PATCH 10/29] chore: remove types --- packages/blade/src/components/Chip/types.ts | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index 2f1fb3be3b1..06177c1372c 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -1,24 +1,10 @@ import type { StyledPropsBlade } from '~components/Box/styledProps'; import type { Theme } from '~components/BladeProvider'; import type { IconComponent } from '~components/Icons'; -import type { - DataAnalyticsAttribute, - PickCSSByPlatform, - StringChildrenType, - TestID, -} from '~utils/types'; +import type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types'; import type { DotNotationToken } from '~utils/lodashButBetter/get'; import type { MotionMetaProp } from '~components/BaseMotion'; -import type { - BaseBoxProps, - FlexboxProps, - GridProps, -} from '~components/Box/BaseBox/types/propsTypes'; - -type ChipGroupContainerLayoutProps = Omit< - Partial & FlexboxProps & GridProps>, - '__brand__' ->; +import type { BaseBoxProps } from '~components/Box/BaseBox/types/propsTypes'; type ChipCommonProps = { /** From 7c9803ad4e9f3aef9ba3137c7cfb957c60392d69 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 11:59:27 +0530 Subject: [PATCH 11/29] chore: update ts --- packages/blade/src/components/Chip/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index 06177c1372c..e5a85a1ff8f 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -251,5 +251,4 @@ export type { StyledChipWrapperProps, ChipBorderColors, ChipBackgroundColors, - ChipGroupContainerLayoutProps, }; From f3633f3ef35737031f38d897c54fa6b458fcb089 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 12:35:06 +0530 Subject: [PATCH 12/29] chore: review change --- packages/blade/src/components/Chip/Chip.tsx | 3 --- packages/blade/src/components/Chip/ChipGroup.tsx | 11 +++++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index 926b71611d3..b833b7d4524 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -7,7 +7,6 @@ import { getChipInputHoverTokens, chipHeightTokens, chipHorizontalPaddingTokens, - chipGroupGapTokens, } from './chipTokens'; import type { ChipProps } from './types'; import { AnimatedChip } from './AnimatedChip'; @@ -143,8 +142,6 @@ const _Chip: React.ForwardRefRenderFunction = ( return ( {accessibilityLabel} - + {React.Children.map(children, (child) => child)} Date: Tue, 11 Feb 2025 12:38:49 +0530 Subject: [PATCH 13/29] chore: update snap --- .../__snapshots__/Chip.native.test.tsx.snap | 36 ++++++++++--------- .../__snapshots__/Chip.ssr.test.tsx.snap | 8 +++-- .../__snapshots__/Chip.web.test.tsx.snap | 24 ++++++++----- .../ChipGroup.native.test.tsx.snap | 22 ++++++------ .../__snapshots__/ChipGroup.ssr.test.tsx.snap | 8 +++-- .../__snapshots__/ChipGroup.web.test.tsx.snap | 12 ++++--- 6 files changed, 64 insertions(+), 46 deletions(-) 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 0c5402c865b..98c725d981f 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 @@ -105,16 +105,21 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup should prioritize Chip's isDisabled prop instead of ChipGroup [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -325,8 +328,6 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -629,16 +630,21 @@ exports[` should render chip 1`] = ` should render chip 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -849,8 +853,6 @@ exports[` should render chip 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1153,16 +1155,21 @@ exports[` should render chip with icon 1`] = ` should render chip with icon 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1473,8 +1478,6 @@ exports[` should render chip with icon 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1877,16 +1880,21 @@ exports[` should set disabled state with isDisabled 1`] = ` should set disabled state with isDisabled 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -2097,8 +2103,6 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } 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 c2110dea07f..e92f72cb8e6 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 { @@ -24,6 +24,10 @@ exports[` should render with icon 2`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -31,8 +35,6 @@ exports[` should render with icon 2`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { 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 93c5e6e2c73..91808515b7b 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 @@ -22,6 +22,10 @@ exports[` should accept data-analytics-* 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -29,8 +33,6 @@ exports[` should accept data-analytics-* 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { @@ -455,6 +457,10 @@ exports[` should render chip 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -462,8 +468,6 @@ exports[` should render chip 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { @@ -885,6 +889,10 @@ exports[` should render chip with icon 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -892,8 +900,6 @@ exports[` should render chip with icon 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { @@ -1386,6 +1392,10 @@ exports[` should set disabled state with isDisabled 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -1393,8 +1403,6 @@ exports[` should set disabled state with isDisabled 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { 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 35aee59476a..9eacb303a2d 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 @@ -231,16 +231,21 @@ exports[` selectionType="multiple" should render with selectionType /> selectionType="multiple" should render with selectionType [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -450,8 +453,6 @@ exports[` selectionType="multiple" should render with selectionType [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -648,8 +649,6 @@ exports[` selectionType="multiple" should render with selectionType [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1078,16 +1077,21 @@ exports[` selectionType="single" should render with selectionType=" /> selectionType="single" should render with selectionType=" [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1298,8 +1300,6 @@ exports[` selectionType="single" should render with selectionType=" [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } @@ -1497,8 +1497,6 @@ exports[` selectionType="single" should render with selectionType=" [ { "display": "flex", - "marginBottom": 8, - "marginRight": 8, }, ] } 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 9f8e911fdb6..056aa60ced9 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 { @@ -24,6 +24,10 @@ exports[` should render with selectionType="single" 2`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c4.c4.c4.c4.c4 { @@ -31,8 +35,6 @@ exports[` should render with selectionType="single" 2`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c6.c6.c6.c6.c6 { 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 17fca5a3bb1..52d0d9eade0 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 @@ -42,6 +42,10 @@ exports[` selectionType="multiple" should render with selectionType -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c7.c7.c7.c7.c7 { @@ -49,8 +53,6 @@ exports[` selectionType="multiple" should render with selectionType display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c9.c9.c9.c9.c9 { @@ -589,6 +591,10 @@ exports[` selectionType="single" should render with selectionType=" -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + margin-bottom: 8px; + row-gap: 8px; + -webkit-column-gap: 8px; + column-gap: 8px; } .c7.c7.c7.c7.c7 { @@ -596,8 +602,6 @@ exports[` selectionType="single" should render with selectionType=" display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-bottom: 8px; - margin-right: 8px; } .c9.c9.c9.c9.c9 { From dc6fa5a0e7c3e675fef7c95fcfdb109865140ecd Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 13:54:25 +0530 Subject: [PATCH 14/29] chore : review change --- packages/blade/src/components/Chip/ChipGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx index 6c557043884..83fb0c5f04e 100644 --- a/packages/blade/src/components/Chip/ChipGroup.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.tsx @@ -104,7 +104,7 @@ const _ChipGroup = ( columnGap={chipGroupGapTokens[size].right} marginBottom={chipGroupGapTokens[size].bottom} > - {React.Children.map(children, (child) => child)} + {children} Date: Tue, 11 Feb 2025 13:55:50 +0530 Subject: [PATCH 15/29] chore: review changes --- packages/blade/src/components/Box/BaseBox/types/propsTypes.ts | 2 +- packages/blade/src/components/Box/styledProps/getStyledProps.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts index 9c1185f5afd..ef380945ba3 100644 --- a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts +++ b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts @@ -332,5 +332,5 @@ type BoxRefType = Platform.Select<{ native: View; }>; -export type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps, GridProps }; +export type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps }; export { validBoxAsValues }; diff --git a/packages/blade/src/components/Box/styledProps/getStyledProps.ts b/packages/blade/src/components/Box/styledProps/getStyledProps.ts index c6e038edc4e..6d9eae5cd70 100644 --- a/packages/blade/src/components/Box/styledProps/getStyledProps.ts +++ b/packages/blade/src/components/Box/styledProps/getStyledProps.ts @@ -144,5 +144,5 @@ const getStyledProps = (props: Record): StyledPropsBlade => { return removeUndefinedStyledProps(makeStyledProps(props)); }; -export type { StyledPropsBlade, StyledPropsInputType }; +export type { StyledPropsBlade }; export { getStyledProps, makeStyledProps, removeUndefinedStyledProps }; From f4652cb78cdb075046b0a7e78a990c440ca91c63 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 14:03:51 +0530 Subject: [PATCH 16/29] chore: addMaxWidth , minWidth --- packages/blade/src/components/Chip/Chip.tsx | 16 +++++++++++++++- packages/blade/src/components/Chip/types.ts | 8 ++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index b833b7d4524..f519c1c874d 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -39,7 +39,19 @@ type OnChange = ({ }) => void; const _Chip: React.ForwardRefRenderFunction = ( - { isDisabled, value, children, icon: Icon, color, testID, _motionMeta, width, ...rest }, + { + isDisabled, + value, + children, + icon: Icon, + color, + testID, + _motionMeta, + width, + maxWidth, + minWidth, + ...rest + }, ref, ) => { const { theme } = useTheme(); @@ -202,6 +214,8 @@ const _Chip: React.ForwardRefRenderFunction = ( height={makeSize(chipHeightTokens[_size])} gap="spacing.3" width={width} + maxWidth={maxWidth} + minWidth={minWidth} > {Icon ? ( diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index e5a85a1ff8f..e3f7f6b5318 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -34,6 +34,14 @@ type ChipCommonProps = { * width prop sets the width of the Chip */ width?: BaseBoxProps['width']; + /** + * maxWidth prop sets the maxWidth of the Chip + */ + maxWidth: BaseBoxProps['maxWidth']; + /** + * min prop sets the minWidth of the Chip + */ + minWidth: BaseBoxProps['minWidth']; } & TestID & DataAnalyticsAttribute & StyledPropsBlade & From bb40a3f0ce8e6c4a1cb93ee8a2c443d10a9e03ea Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 14:07:31 +0530 Subject: [PATCH 17/29] chore: expose maxWidth , minWidth --- packages/blade/src/components/Chip/ChipGroup.stories.tsx | 2 +- packages/blade/src/components/Chip/types.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index beace24cfc9..60ae6d12099 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -795,7 +795,7 @@ export const MultiChipStory: StoryFn = () => { gap="spacing.3" > {chipArray.map((chip, index) => ( - + {chip.label} ))} diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index e3f7f6b5318..18f157e5cae 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -37,11 +37,11 @@ type ChipCommonProps = { /** * maxWidth prop sets the maxWidth of the Chip */ - maxWidth: BaseBoxProps['maxWidth']; + maxWidth?: BaseBoxProps['maxWidth']; /** * min prop sets the minWidth of the Chip */ - minWidth: BaseBoxProps['minWidth']; + minWidth?: BaseBoxProps['minWidth']; } & TestID & DataAnalyticsAttribute & StyledPropsBlade & From 62f74c1a74c607f06bb5b580f38395f461016e14 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 14:45:42 +0530 Subject: [PATCH 18/29] chore: update chipgroup width --- .../src/components/Chip/AnimatedChip.web.tsx | 4 ++- packages/blade/src/components/Chip/Chip.tsx | 30 +++++++++++++++++-- .../src/components/Chip/ChipGroup.stories.tsx | 6 ++-- packages/blade/src/components/Chip/types.ts | 3 ++ 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx index 724fb9f7c93..585ea786e48 100644 --- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx +++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx @@ -14,7 +14,9 @@ const AnimatedChip = styled(BaseBox)((props) => { ); return { ...getAnimatedChipStyles(props), - width: 'fit-content', + width: props?.width ? (props.width as string | number) : 'fit-content', + maxWidth: props?.maxWidth as string | number, + minWidth: props?.minWidth as string | number, transform: `scale(${props.isPressed ? '0.92' : '1'})`, transitionDuration: duration, transitionTimingFunction: easing, diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index f519c1c874d..fbccfca119d 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -159,6 +159,9 @@ const _Chip: React.ForwardRefRenderFunction = ( {...makeAnalyticsAttribute(rest)} display={(isReactNative() ? 'flex' : 'inline-flex') as never} ref={getOuterMotionRef({ _motionMeta, ref })} + width={width} + maxWidth={maxWidth} + minWidth={minWidth} > = ( onKeyDown={handleKeyboardPressedIn} onKeyUp={handleKeyboardPressedOut} inputProps={isReactNative() ? inputProps : {}} - style={{ cursor: _isDisabled ? 'not-allowed' : 'pointer' }} + style={{ + cursor: _isDisabled ? 'not-allowed' : 'pointer', + width: width as string | number, + maxWidth: maxWidth as string | number, + minWidth: minWidth as string | number, + }} > - - + + = ( isDisabled={_isDisabled} isPressed={isPressed} isDesktop={matchedDeviceType === 'desktop'} + width={width} + maxWidth={maxWidth} + minWidth={minWidth} > = () => { > {chipArray.map((chip, index) => ( - + {chip.label} ))} diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts index 18f157e5cae..a7f58cfd43a 100644 --- a/packages/blade/src/components/Chip/types.ts +++ b/packages/blade/src/components/Chip/types.ts @@ -239,6 +239,9 @@ type AnimatedChipProps = { isDesktop?: boolean; theme: Theme; children: React.ReactNode; + width?: BaseBoxProps['width']; + maxWidth?: BaseBoxProps['maxWidth']; + minWidth?: BaseBoxProps['minWidth']; }; type StyledChipWrapperProps = { From 2a32ed1c89746dc21b2f4f0d61232e10f9baa843 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 11 Feb 2025 14:49:28 +0530 Subject: [PATCH 19/29] chore: more refactor --- packages/blade/src/components/Chip/Chip.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index fbccfca119d..5fe0b1ecdf8 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -159,9 +159,6 @@ const _Chip: React.ForwardRefRenderFunction = ( {...makeAnalyticsAttribute(rest)} display={(isReactNative() ? 'flex' : 'inline-flex') as never} ref={getOuterMotionRef({ _motionMeta, ref })} - width={width} - maxWidth={maxWidth} - minWidth={minWidth} > = ( maxWidth={maxWidth} minWidth={minWidth} > - + Date: Tue, 11 Feb 2025 15:15:08 +0530 Subject: [PATCH 20/29] chore: update snap --- .../Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap | 3 +-- .../Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap | 5 ----- .../Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap | 3 +-- .../Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap | 2 -- 4 files changed, 2 insertions(+), 11 deletions(-) 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 e92f72cb8e6..dea2b1dbcbb 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 { @@ -116,7 +116,6 @@ exports[` should render with icon 2`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; 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 91808515b7b..6630b4d91ab 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 @@ -107,7 +107,6 @@ exports[` should accept data-analytics-* 1`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; @@ -542,7 +541,6 @@ exports[` should render chip 1`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; @@ -981,7 +979,6 @@ exports[` should render chip with icon 1`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; @@ -1510,7 +1507,6 @@ exports[` should set disabled state with isDisabled 1`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; @@ -1548,7 +1544,6 @@ exports[` should set disabled state with isDisabled 1`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; 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 056aa60ced9..c7d6feb4d9f 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 { @@ -109,7 +109,6 @@ exports[` should render with selectionType="single" 2`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; 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 52d0d9eade0..f3f1288c1a6 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 @@ -127,7 +127,6 @@ exports[` selectionType="multiple" should render with selectionType justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; @@ -676,7 +675,6 @@ exports[` selectionType="single" should render with selectionType=" justify-content: center; text-align: left; text-overflow: ellipsis; - max-width: 420px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; From c02f1e91f20e33bd24d48b5d49eafbbd827cb958 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 10:50:56 +0530 Subject: [PATCH 21/29] chore: chipgroup custom layout --- packages/blade/src/components/Chip/ChipGroup.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx index ca4178dad62..a82899b937b 100644 --- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx +++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx @@ -728,7 +728,7 @@ chipRef.parameters = { }, }; -export const MultiChipStory: StoryFn = () => { +export const CutomLayoutInChipGroup: StoryFn = () => { const chipArray = [ { value: '100', @@ -804,3 +804,5 @@ export const MultiChipStory: StoryFn = () => { ); }; + +CutomLayoutInChipGroup.storyName = 'ChipGroup with Custom layout'; From 1836fdc45c02d54189b9bb45a1d9daebe9019cf9 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 16:30:35 +0530 Subject: [PATCH 22/29] chore: change to getBaseBoxStyles --- packages/blade/src/components/Chip/Chip.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index 5fe0b1ecdf8..6b4df2d8e01 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -27,6 +27,7 @@ import { Text } from '~components/Typography'; import { useTheme } from '~components/BladeProvider'; import { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; +import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; type OnChange = ({ isChecked, @@ -84,6 +85,12 @@ const _Chip: React.ForwardRefRenderFunction = ( const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox; const _size = groupProps?.size || 'small'; const chipColor = color ?? groupProps?.color ?? 'primary'; + const selectorLabelStyles = getBaseBoxStyles({ + width, + minWidth, + maxWidth, + theme, + }); const handleChange: OnChange = ({ isChecked, value }) => { if (isChecked) { @@ -172,9 +179,7 @@ const _Chip: React.ForwardRefRenderFunction = ( inputProps={isReactNative() ? inputProps : {}} style={{ cursor: _isDisabled ? 'not-allowed' : 'pointer', - width: width as string | number, - maxWidth: maxWidth as string | number, - minWidth: minWidth as string | number, + ...selectorLabelStyles, }} > Date: Wed, 12 Feb 2025 16:42:58 +0530 Subject: [PATCH 23/29] chore: refactor width --- .../src/components/Chip/AnimatedChip.web.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx index 585ea786e48..0e0544628f1 100644 --- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx +++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx @@ -6,17 +6,28 @@ import getIn from '~utils/lodashButBetter/get'; import BaseBox from '~components/Box/BaseBox'; import { makeMotionTime } from '~utils/makeMotionTime'; import { castWebType } from '~utils'; +import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; +import { useTheme } from '~components/BladeProvider'; const AnimatedChip = styled(BaseBox)((props) => { const easing = getIn(props.theme.motion, chipMotionTokens.easing); const duration = castWebType( makeMotionTime(getIn(props.theme.motion, chipMotionTokens.duration)), ); + const { theme } = useTheme(); + const animatedChipStyles = getBaseBoxStyles({ + width: props?.width, + maxWidth: props?.maxWidth, + minWidth: props?.minWidth, + theme, + }); + return { ...getAnimatedChipStyles(props), - width: props?.width ? (props.width as string | number) : 'fit-content', - maxWidth: props?.maxWidth as string | number, - minWidth: props?.minWidth as string | number, + ...animatedChipStyles, + ...(!props?.width && { + width: 'fit-content', + }), transform: `scale(${props.isPressed ? '0.92' : '1'})`, transitionDuration: duration, transitionTimingFunction: easing, From 3443de87f12cd58291409db19146cf8f5cad8b55 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 16:50:49 +0530 Subject: [PATCH 24/29] chore: refactor --- .../src/components/Chip/AnimatedChip.web.tsx | 11 ----------- .../components/Chip/getAnimatedChipStyles.ts | 17 ++++++++++++++++- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx index 0e0544628f1..66508ba066c 100644 --- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx +++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx @@ -6,25 +6,14 @@ import getIn from '~utils/lodashButBetter/get'; import BaseBox from '~components/Box/BaseBox'; import { makeMotionTime } from '~utils/makeMotionTime'; import { castWebType } from '~utils'; -import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; -import { useTheme } from '~components/BladeProvider'; const AnimatedChip = styled(BaseBox)((props) => { const easing = getIn(props.theme.motion, chipMotionTokens.easing); const duration = castWebType( makeMotionTime(getIn(props.theme.motion, chipMotionTokens.duration)), ); - const { theme } = useTheme(); - const animatedChipStyles = getBaseBoxStyles({ - width: props?.width, - maxWidth: props?.maxWidth, - minWidth: props?.minWidth, - theme, - }); - return { ...getAnimatedChipStyles(props), - ...animatedChipStyles, ...(!props?.width && { width: 'fit-content', }), diff --git a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts index 00a7a327d58..0878b4e086d 100644 --- a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts +++ b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts @@ -2,9 +2,24 @@ import type { CSSObject } from 'styled-components'; import type { AnimatedChipProps } from './types'; import getIn from '~utils/lodashButBetter/get'; import { makeBorderSize } from '~utils/makeBorderSize'; +import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; -const getAnimatedChipStyles = ({ theme, isDesktop, borderColor }: AnimatedChipProps): CSSObject => { +const getAnimatedChipStyles = ({ + theme, + isDesktop, + borderColor, + width, + maxWidth, + minWidth, +}: AnimatedChipProps): CSSObject => { + const animatedChipStyles = getBaseBoxStyles({ + width, + maxWidth, + minWidth, + theme, + }); return { + ...animatedChipStyles, backgroundColor: 'transparent', borderRadius: makeBorderSize(theme.border.radius.max), borderColor: getIn(theme.colors, borderColor), From 17744215926b7c7d5c30b6a76aeb691af97802be Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 17:08:53 +0530 Subject: [PATCH 25/29] chore: more changes --- packages/blade/src/components/Chip/Chip.tsx | 16 +++------------- .../components/Chip/getAnimatedChipStyles.ts | 17 +---------------- 2 files changed, 4 insertions(+), 29 deletions(-) diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx index 6b4df2d8e01..152968c03db 100644 --- a/packages/blade/src/components/Chip/Chip.tsx +++ b/packages/blade/src/components/Chip/Chip.tsx @@ -182,13 +182,7 @@ const _Chip: React.ForwardRefRenderFunction = ( ...selectorLabelStyles, }} > - + = ( isDisabled={_isDisabled} isPressed={isPressed} isDesktop={matchedDeviceType === 'desktop'} - width={width} - maxWidth={maxWidth} - minWidth={minWidth} + width="100%" > = ( } height={makeSize(chipHeightTokens[_size])} gap="spacing.3" - width={width} - maxWidth={maxWidth} - minWidth={minWidth} + width="100%" > {Icon ? ( diff --git a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts index 0878b4e086d..00a7a327d58 100644 --- a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts +++ b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts @@ -2,24 +2,9 @@ import type { CSSObject } from 'styled-components'; import type { AnimatedChipProps } from './types'; import getIn from '~utils/lodashButBetter/get'; import { makeBorderSize } from '~utils/makeBorderSize'; -import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; -const getAnimatedChipStyles = ({ - theme, - isDesktop, - borderColor, - width, - maxWidth, - minWidth, -}: AnimatedChipProps): CSSObject => { - const animatedChipStyles = getBaseBoxStyles({ - width, - maxWidth, - minWidth, - theme, - }); +const getAnimatedChipStyles = ({ theme, isDesktop, borderColor }: AnimatedChipProps): CSSObject => { return { - ...animatedChipStyles, backgroundColor: 'transparent', borderRadius: makeBorderSize(theme.border.radius.max), borderColor: getIn(theme.colors, borderColor), From 833b335d914dc903f2a0e07a9113652eec4a2171 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 17:15:47 +0530 Subject: [PATCH 26/29] chore: snap update --- .../__snapshots__/Chip.native.test.tsx.snap | 32 ++ .../__snapshots__/Chip.ssr.test.tsx.snap | 89 +++-- .../__snapshots__/Chip.web.test.tsx.snap | 370 ++++++++++-------- .../ChipGroup.native.test.tsx.snap | 24 ++ .../__snapshots__/ChipGroup.ssr.test.tsx.snap | 135 ++++--- .../__snapshots__/ChipGroup.web.test.tsx.snap | 188 +++++---- 6 files changed, 480 insertions(+), 358 deletions(-) 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 98c725d981f..5c20cc12202 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 @@ -190,9 +190,11 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should prioritize Chip's isDisabled prop instead of ChipGroup "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -279,6 +282,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup }, ] } + width="100%" > should prioritize Chip's isDisabled prop instead of ChipGroup { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should prioritize Chip's isDisabled prop instead of ChipGroup "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -476,6 +483,7 @@ exports[` should prioritize Chip's isDisabled prop instead of ChipGroup }, ] } + width="100%" > should render chip 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should render chip 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -804,6 +815,7 @@ exports[` should render chip 1`] = ` }, ] } + width="100%" > should render chip 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should render chip 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -1001,6 +1016,7 @@ exports[` should render chip 1`] = ` }, ] } + width="100%" > should render chip with icon 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should render chip with icon 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -1329,6 +1348,7 @@ exports[` should render chip with icon 1`] = ` }, ] } + width="100%" > should render chip with icon 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should render chip with icon 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -1626,6 +1649,7 @@ exports[` should render chip with icon 1`] = ` }, ] } + width="100%" > should set disabled state with isDisabled 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should set disabled state with isDisabled 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -2054,6 +2081,7 @@ exports[` should set disabled state with isDisabled 1`] = ` }, ] } + width="100%" > should set disabled state with isDisabled 1`] = ` { "display": "flex", "flexDirection": "column", + "width": "100%", }, ] } + width="100%" > should set disabled state with isDisabled 1`] = ` "overflow": "hidden", "paddingLeft": 12, "paddingRight": 12, + "width": "100%", }, { "borderColor": "transparent", @@ -2251,6 +2282,7 @@ exports[` should set disabled state with isDisabled 1`] = ` }, ] } + width="100%" > 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 { @@ -38,6 +38,17 @@ exports[` should render with icon 2`] = ` } .c6.c6.c6.c6.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.c7.c7.c7.c7.c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -51,12 +62,13 @@ exports[` should render with icon 2`] = ` align-items: center; } -.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9 { + width: 100%; border-color: hsla(211,20%,52%,0.18); border-style: solid; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -76,6 +88,7 @@ exports[` should render with icon 2`] = ` padding-right: 12px; padding-left: 12px; height: 28px; + width: 100%; gap: 8px; background-color: hsla(0,0%,100%,1); border-radius: 9999px; @@ -84,14 +97,14 @@ exports[` should render with icon 2`] = ` border-style: solid; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { background-color: transparent; border-radius: 9999px; border-color: hsla(211,20%,52%,0.18); @@ -116,9 +129,7 @@ exports[` should render with icon 2`] = ` justify-content: center; text-align: left; text-overflow: ellipsis; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; + max-width: 420px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); @@ -128,7 +139,7 @@ exports[` should render with icon 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -136,7 +147,7 @@ exports[` should render with icon 2`] = ` border-color: transparent; } -.c11.c11.c11.c11.c11:hover { +.c12.c12.c12.c12.c12:hover { background-color: hsla(211,20%,52%,0.06); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -170,7 +181,7 @@ exports[` should render with icon 2`] = ` word-wrap: normal; } -.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -187,7 +198,7 @@ exports[` should render with icon 2`] = ` word-wrap: normal; } -.c7.c7.c7.c7.c7:focus-visible + div { +.c8.c8.c8.c8.c8:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -198,7 +209,7 @@ exports[` should render with icon 2`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c7.c7.c7.c7.c7:hover + div { +.c8.c8.c8.c8.c8:hover + div { border-color: hsla(211,20%,52%,0.18); background-color: hsla(0,0%,100%,0); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); @@ -224,7 +235,7 @@ exports[` should render with icon 2`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -248,61 +259,61 @@ exports[` should render with icon 2`] = ` } @media screen and (min-width:320px) { - .c8.c8.c8.c8.c8 { + .c9.c9.c9.c9.c9 { border-style: solid; } } @media screen and (min-width:480px) { - .c8.c8.c8.c8.c8 { + .c9.c9.c9.c9.c9 { border-style: solid; } } @media screen and (min-width:768px) { - .c8.c8.c8.c8.c8 { + .c9.c9.c9.c9.c9 { border-style: solid; } } @media screen and (min-width:1024px) { - .c8.c8.c8.c8.c8 { + .c9.c9.c9.c9.c9 { border-style: solid; } } @media screen and (min-width:1200px) { - .c8.c8.c8.c8.c8 { + .c9.c9.c9.c9.c9 { border-style: solid; } } @media screen and (min-width:320px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:480px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:768px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1024px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @media screen and (min-width:1200px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { border-style: solid; } } @@ -346,14 +357,13 @@ exports[` should render with icon 2`] = `