Skip to content

Commit 18fe539

Browse files
tewarigtewarig
authored
fix(blade): chipgroup grid alignment (#2536)
* chore: expose grid and flexbox props * fix: add changeset * chore: update lint error * feat: add width prop in chip * feat: let user change the layout * chore: remove unsed commit types * chore: review changes * chore: update snap * chore: removed unused utils * chore: remove types * chore: update ts * chore: review change * chore: update snap * chore : review change * chore: review changes * chore: addMaxWidth , minWidth * chore: expose maxWidth , minWidth * chore: update chipgroup width * chore: more refactor * chore: update snap * chore: chipgroup custom layout * chore: change to getBaseBoxStyles * chore: refactor width * chore: refactor * chore: more changes * chore: snap update * chore: change to width 100% * chore: update snaps * chore: review changes * chore: docs update * chore: change baseBoxProps to box props
1 parent 1f5c522 commit 18fe539

12 files changed

+2873
-2879
lines changed

‎.changeset/two-cows-reply.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@razorpay/blade': patch
3+
---
4+
5+
fix(blade): allow consumers to align chips in chipgroup

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const AnimatedChip = styled(BaseBox)<AnimatedChipProps>((props) => {
1414
);
1515
return {
1616
...getAnimatedChipStyles(props),
17-
width: 'fit-content',
17+
width: '100%',
1818
transform: `scale(${props.isPressed ? '0.92' : '1'})`,
1919
transitionDuration: duration,
2020
transitionTimingFunction: easing,

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

+22-4
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,19 @@ type OnChange = ({
3939
}) => void;
4040

4141
const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
42-
{ isDisabled, value, children, icon: Icon, color, testID, _motionMeta, ...rest },
42+
{
43+
isDisabled,
44+
value,
45+
children,
46+
icon: Icon,
47+
color,
48+
testID,
49+
_motionMeta,
50+
width,
51+
maxWidth,
52+
minWidth,
53+
...rest
54+
},
4355
ref,
4456
) => {
4557
const { theme } = useTheme();
@@ -72,7 +84,6 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
7284
const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;
7385
const _size = groupProps?.size || 'small';
7486
const chipColor = color ?? groupProps?.color ?? 'primary';
75-
7687
const handleChange: OnChange = ({ isChecked, value }) => {
7788
if (isChecked) {
7889
groupProps?.state?.addValue(value!);
@@ -147,6 +158,9 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
147158
{...makeAnalyticsAttribute(rest)}
148159
display={(isReactNative() ? 'flex' : 'inline-flex') as never}
149160
ref={getOuterMotionRef({ _motionMeta, ref })}
161+
width={width}
162+
maxWidth={maxWidth}
163+
minWidth={minWidth}
150164
>
151165
<SelectorLabel
152166
componentName={MetaConstants.ChipLabel}
@@ -158,9 +172,12 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
158172
onKeyDown={handleKeyboardPressedIn}
159173
onKeyUp={handleKeyboardPressedOut}
160174
inputProps={isReactNative() ? inputProps : {}}
161-
style={{ cursor: _isDisabled ? 'not-allowed' : 'pointer' }}
175+
style={{
176+
cursor: _isDisabled ? 'not-allowed' : 'pointer',
177+
width: '100%',
178+
}}
162179
>
163-
<BaseBox display="flex" flexDirection="column">
180+
<BaseBox display="flex" flexDirection="column" width="100%">
164181
<BaseBox display="flex" alignItems="center" flexDirection="row">
165182
<SelectorInput
166183
hoverTokens={getChipInputHoverTokens(chipColor)}
@@ -201,6 +218,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
201218
}
202219
height={makeSize(chipHeightTokens[_size])}
203220
gap="spacing.3"
221+
width="100%"
204222
>
205223
{Icon ? (
206224
<BaseBox display="flex">

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

+79
Original file line numberDiff line numberDiff line change
@@ -727,3 +727,82 @@ chipRef.parameters = {
727727
exclude: ['icon'],
728728
},
729729
};
730+
731+
export const CutomLayoutInChipGroup: StoryFn<typeof ChipGroupComponent> = () => {
732+
const chipArray = [
733+
{
734+
value: '100',
735+
label: '₹100',
736+
},
737+
{
738+
value: '500',
739+
label: '₹500',
740+
},
741+
{
742+
value: '1000',
743+
label: '₹1000',
744+
},
745+
{
746+
value: '2000',
747+
label: '₹2000',
748+
},
749+
{
750+
value: '5000',
751+
label: '₹5000',
752+
},
753+
{
754+
value: '10000',
755+
label: '₹10000',
756+
},
757+
{
758+
value: '20000',
759+
label: '₹20000',
760+
},
761+
{
762+
value: '50000',
763+
label: '₹50000',
764+
},
765+
{
766+
value: '100000',
767+
label: '₹100000',
768+
},
769+
{
770+
value: '200000',
771+
label: '₹200000',
772+
},
773+
];
774+
775+
return (
776+
<Box gap="spacing.3" display="flex" flexDirection="column">
777+
<ChipGroupComponent
778+
selectionType="single"
779+
label="Select a gift card with value (with default layout)"
780+
>
781+
{chipArray.map((chip, index) => (
782+
<ChipComponent key={index} value={chip.value}>
783+
{chip.label}
784+
</ChipComponent>
785+
))}
786+
</ChipGroupComponent>
787+
<ChipGroupComponent
788+
selectionType="single"
789+
label="Select a gift card with value (with custom layout)"
790+
>
791+
<Box
792+
display="grid"
793+
gridTemplateColumns="repeat(3, 1fr)"
794+
gridTemplateRows="repeat(3, minmax(0, 30px))"
795+
gap="spacing.3"
796+
>
797+
{chipArray.map((chip, index) => (
798+
<ChipComponent key={index} value={chip.value} width="100%">
799+
{chip.label}
800+
</ChipComponent>
801+
))}
802+
</Box>
803+
</ChipGroupComponent>
804+
</Box>
805+
);
806+
};
807+
808+
CutomLayoutInChipGroup.storyName = 'ChipGroup with Custom layout';

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

+10-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { chipGroupGapTokens, chipGroupLabelSizeTokens } from './chipTokens';
2+
import { chipGroupLabelSizeTokens, chipGroupGapTokens } from './chipTokens';
33
import { ChipGroupProvider } from './ChipGroupContext';
44
import { useChipGroup } from './useChipGroup';
55
import type { ChipGroupProps } from './types';
@@ -96,18 +96,15 @@ const _ChipGroup = (
9696
<VisuallyHidden>
9797
<Text>{accessibilityLabel}</Text>
9898
</VisuallyHidden>
99-
<BaseBox display="flex" flexDirection="row" flexWrap="wrap">
100-
{React.Children.map(children, (child, index) => {
101-
return (
102-
<BaseBox
103-
key={index}
104-
marginBottom={chipGroupGapTokens[size].bottom}
105-
marginRight={chipGroupGapTokens[size].right}
106-
>
107-
{child}
108-
</BaseBox>
109-
);
110-
})}
99+
<BaseBox
100+
display="flex"
101+
flexDirection="row"
102+
flexWrap="wrap"
103+
rowGap={chipGroupGapTokens[size].bottom}
104+
columnGap={chipGroupGapTokens[size].right}
105+
marginBottom={chipGroupGapTokens[size].bottom}
106+
>
107+
{children}
111108
</BaseBox>
112109
<FormHint
113110
size={chipGroupLabelSizeTokens[size]}

0 commit comments

Comments
 (0)