fix(blade): chipgroup grid alignment

.changeset/two-cows-reply.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+fix(blade): allow consumers to align chips in chipgroup

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

@@ -14,7 +14,7 @@ const AnimatedChip = styled(BaseBox)<AnimatedChipProps>((props) => {
   );
   return {
     ...getAnimatedChipStyles(props),
-    width: 'fit-content',
+    width: '100%',
     transform: `scale(${props.isPressed ? '0.92' : '1'})`,
     transitionDuration: duration,
     transitionTimingFunction: easing,

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,
@@ -39,7 +40,19 @@ type OnChange = ({
 }) => void;
 
 const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
-  { isDisabled, value, children, icon: Icon, color, testID, _motionMeta, ...rest },
+  {
+    isDisabled,
+    value,
+    children,
+    icon: Icon,
+    color,
+    testID,
+    _motionMeta,
+    width,
+    maxWidth,
+    minWidth,
+    ...rest
+  },
   ref,
 ) => {
   const { theme } = useTheme();
@@ -72,6 +85,12 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
   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) {
@@ -158,9 +177,12 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
         onKeyDown={handleKeyboardPressedIn}
         onKeyUp={handleKeyboardPressedOut}
         inputProps={isReactNative() ? inputProps : {}}
-        style={{ cursor: _isDisabled ? 'not-allowed' : 'pointer' }}
+        style={{
+          cursor: _isDisabled ? 'not-allowed' : 'pointer',
+          ...selectorLabelStyles,
+        }}
       >
-        <BaseBox display="flex" flexDirection="column">
+        <BaseBox display="flex" flexDirection="column" width="100%">
           <BaseBox display="flex" alignItems="center" flexDirection="row">
             <SelectorInput
               hoverTokens={getChipInputHoverTokens(chipColor)}
@@ -201,6 +223,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                 }
                 height={makeSize(chipHeightTokens[_size])}
                 gap="spacing.3"
+                width="100%"
               >
                 {Icon ? (
                   <BaseBox display="flex">

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

@@ -727,3 +727,82 @@ chipRef.parameters = {
     exclude: ['icon'],
   },
 };
+
+export const CutomLayoutInChipGroup: StoryFn<typeof ChipGroupComponent> = () => {
+  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 (
+    <Box gap="spacing.3" display="flex" flexDirection="column">
+      <ChipGroupComponent
+        selectionType="single"
+        label="Select a gift card with value (without custom chipGroupContainerLayout)"
+      >
+        {chipArray.map((chip, index) => (
+          <ChipComponent key={index} value={chip.value}>
+            {chip.label}
+          </ChipComponent>
+        ))}
+      </ChipGroupComponent>
+      <ChipGroupComponent
+        selectionType="single"
+        label="Select a gift card with value (custom chipGroupContainerLayout)"
+      >
+        <Box
+          display="grid"
+          gridTemplateColumns="repeat(3, 1fr)"
+          gridTemplateRows="repeat(3, minmax(0, 30px))"
+          gap="spacing.3"
+        >
+          {chipArray.map((chip, index) => (
+            <ChipComponent key={index} value={chip.value} width="100%">
+              {chip.label}
+            </ChipComponent>
+          ))}
+        </Box>
+      </ChipGroupComponent>
+    </Box>
+  );
+};
+
+CutomLayoutInChipGroup.storyName = 'ChipGroup with Custom layout';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { chipGroupGapTokens, chipGroupLabelSizeTokens } from './chipTokens';
+import { chipGroupLabelSizeTokens, chipGroupGapTokens } from './chipTokens';
 import { ChipGroupProvider } from './ChipGroupContext';
 import { useChipGroup } from './useChipGroup';
 import type { ChipGroupProps } from './types';
@@ -96,18 +96,15 @@ const _ChipGroup = (
             <VisuallyHidden>
               <Text>{accessibilityLabel}</Text>
             </VisuallyHidden>
-            <BaseBox display="flex" flexDirection="row" flexWrap="wrap">
-              {React.Children.map(children, (child, index) => {
-                return (
-                  <BaseBox
-                    key={index}
-                    marginBottom={chipGroupGapTokens[size].bottom}
-                    marginRight={chipGroupGapTokens[size].right}
-                  >
-                    {child}
-                  </BaseBox>
-                );
-              })}
+            <BaseBox
+              display="flex"
+              flexDirection="row"
+              flexWrap="wrap"
+              rowGap={chipGroupGapTokens[size].bottom}
+              columnGap={chipGroupGapTokens[size].right}
+              marginBottom={chipGroupGapTokens[size].bottom}
+            >
+              {children}
             </BaseBox>
             <FormHint
               size={chipGroupLabelSizeTokens[size]}