Skip to content

Commit 3c040f6

Browse files
snitin315snitin315
authored
feat: add icon only chip (#2522)
1 parent 3be3f0f commit 3c040f6

10 files changed

+97
-15
lines changed

‎.changeset/nervous-coats-mate.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@razorpay/blade": patch
3+
---
4+
5+
feat: add icon only chip

‎packages/blade/src/components/Chip/Chip.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -200,15 +200,18 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
200200
]
201201
}
202202
height={makeSize(chipHeightTokens[_size])}
203+
gap="spacing.3"
203204
>
204205
{Icon ? (
205-
<BaseBox paddingRight="spacing.3" display="flex">
206+
<BaseBox display="flex">
206207
<Icon color={chipIconColor} size={chipIconSizes[_size]} />
207208
</BaseBox>
208209
) : null}
209-
<Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>
210-
{children}
211-
</Text>
210+
{children ? (
211+
<Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>
212+
{children}
213+
</Text>
214+
) : null}
212215
</StyledChipWrapper>
213216
</AnimatedChip>
214217
</BaseBox>

‎packages/blade/src/components/Chip/ChipGroup.stories.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,33 @@ ChipWithColor.parameters = {
579579
},
580580
};
581581

582+
const ChipIconOnlyTemplate: StoryFn<typeof ChipGroupComponent> = (args) => {
583+
return (
584+
<Box display="flex" flexDirection="column">
585+
<Text size="large" weight="semibold" marginBottom="spacing.3">
586+
Is the result helpful?
587+
</Text>
588+
589+
<ChipGroupComponent defaultValue="yes" {...args}>
590+
<ChipComponent color="positive" value="yes" icon={ThumbsUpIcon} />
591+
<ChipComponent color="negative" value="no" icon={ThumbsDownIcon} />
592+
</ChipGroupComponent>
593+
</Box>
594+
);
595+
};
596+
597+
export const ChipIconOnly = ChipIconOnlyTemplate.bind({});
598+
ChipIconOnly.storyName = 'Icon Only';
599+
ChipIconOnly.args = {
600+
selectionType: 'single',
601+
accessibilityLabel: 'Is the result helpful? Please select either yer or no',
602+
};
603+
ChipIconOnly.parameters = {
604+
controls: {
605+
exclude: ['icon', 'children'],
606+
},
607+
};
608+
582609
const TextTransformationTemplate: StoryFn<typeof ChipGroupComponent> = ({ children, ...args }) => {
583610
const chipValues = ['Proprietorship', 'Public', 'Small Business'];
584611
return (

‎packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap

+16-2
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
255255
data-blade-component="base-box"
256256
display="flex"
257257
flexDirection="row"
258+
gap="spacing.3"
258259
height="28px"
259260
isChecked={false}
260261
isDisabled={true}
@@ -271,6 +272,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
271272
"borderWidth": 0.5,
272273
"display": "flex",
273274
"flexDirection": "row",
275+
"gap": 8,
274276
"height": 28,
275277
"justifyContent": "center",
276278
"overflow": "hidden",
@@ -462,6 +464,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
462464
data-blade-component="base-box"
463465
display="flex"
464466
flexDirection="row"
467+
gap="spacing.3"
465468
height="28px"
466469
isChecked={false}
467470
isDisabled={false}
@@ -478,6 +481,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
478481
"borderWidth": 0.5,
479482
"display": "flex",
480483
"flexDirection": "row",
484+
"gap": 8,
481485
"height": 28,
482486
"justifyContent": "center",
483487
"overflow": "hidden",
@@ -795,6 +799,7 @@ exports[`<Chip /> should render chip 1`] = `
795799
data-blade-component="base-box"
796800
display="flex"
797801
flexDirection="row"
802+
gap="spacing.3"
798803
height="28px"
799804
isChecked={false}
800805
isDisabled={false}
@@ -811,6 +816,7 @@ exports[`<Chip /> should render chip 1`] = `
811816
"borderWidth": 0.5,
812817
"display": "flex",
813818
"flexDirection": "row",
819+
"gap": 8,
814820
"height": 28,
815821
"justifyContent": "center",
816822
"overflow": "hidden",
@@ -1002,6 +1008,7 @@ exports[`<Chip /> should render chip 1`] = `
10021008
data-blade-component="base-box"
10031009
display="flex"
10041010
flexDirection="row"
1011+
gap="spacing.3"
10051012
height="28px"
10061013
isChecked={false}
10071014
isDisabled={false}
@@ -1018,6 +1025,7 @@ exports[`<Chip /> should render chip 1`] = `
10181025
"borderWidth": 0.5,
10191026
"display": "flex",
10201027
"flexDirection": "row",
1028+
"gap": 8,
10211029
"height": 28,
10221030
"justifyContent": "center",
10231031
"overflow": "hidden",
@@ -1335,6 +1343,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
13351343
data-blade-component="base-box"
13361344
display="flex"
13371345
flexDirection="row"
1346+
gap="spacing.3"
13381347
height="28px"
13391348
isChecked={false}
13401349
isDisabled={false}
@@ -1351,6 +1360,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
13511360
"borderWidth": 0.5,
13521361
"display": "flex",
13531362
"flexDirection": "row",
1363+
"gap": 8,
13541364
"height": 28,
13551365
"justifyContent": "center",
13561366
"overflow": "hidden",
@@ -1371,7 +1381,6 @@ exports[`<Chip /> should render chip with icon 1`] = `
13711381
[
13721382
{
13731383
"display": "flex",
1374-
"paddingRight": 8,
13751384
},
13761385
]
13771386
}
@@ -1643,6 +1652,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
16431652
data-blade-component="base-box"
16441653
display="flex"
16451654
flexDirection="row"
1655+
gap="spacing.3"
16461656
height="28px"
16471657
isChecked={false}
16481658
isDisabled={false}
@@ -1659,6 +1669,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
16591669
"borderWidth": 0.5,
16601670
"display": "flex",
16611671
"flexDirection": "row",
1672+
"gap": 8,
16621673
"height": 28,
16631674
"justifyContent": "center",
16641675
"overflow": "hidden",
@@ -1679,7 +1690,6 @@ exports[`<Chip /> should render chip with icon 1`] = `
16791690
[
16801691
{
16811692
"display": "flex",
1682-
"paddingRight": 8,
16831693
},
16841694
]
16851695
}
@@ -2077,6 +2087,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
20772087
data-blade-component="base-box"
20782088
display="flex"
20792089
flexDirection="row"
2090+
gap="spacing.3"
20802091
height="28px"
20812092
isChecked={false}
20822093
isDisabled={true}
@@ -2093,6 +2104,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
20932104
"borderWidth": 0.5,
20942105
"display": "flex",
20952106
"flexDirection": "row",
2107+
"gap": 8,
20962108
"height": 28,
20972109
"justifyContent": "center",
20982110
"overflow": "hidden",
@@ -2284,6 +2296,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
22842296
data-blade-component="base-box"
22852297
display="flex"
22862298
flexDirection="row"
2299+
gap="spacing.3"
22872300
height="28px"
22882301
isChecked={false}
22892302
isDisabled={false}
@@ -2300,6 +2313,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
23002313
"borderWidth": 0.5,
23012314
"display": "flex",
23022315
"flexDirection": "row",
2316+
"gap": 8,
23032317
"height": 28,
23042318
"justifyContent": "center",
23052319
"overflow": "hidden",

‎packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 gtqnRq cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 gtqnRq cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
3+
exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
44

55
exports[`<Chip /> should render with icon 2`] = `
66
.c0.c0.c0.c0.c0 {
@@ -77,6 +77,7 @@ exports[`<Chip /> should render with icon 2`] = `
7777
padding-right: 12px;
7878
padding-left: 12px;
7979
height: 28px;
80+
gap: 8px;
8081
background-color: hsla(0,0%,100%,1);
8182
border-radius: 9999px;
8283
border-width: 0.5px;
@@ -89,7 +90,6 @@ exports[`<Chip /> should render with icon 2`] = `
8990
display: -webkit-flex;
9091
display: -ms-flexbox;
9192
display: flex;
92-
padding-right: 8px;
9393
}
9494
9595
.c10.c10.c10.c10.c10 {

0 commit comments

Comments
 (0)