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/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 };

packages/blade/src/components/Box/styledProps/getStyledProps.ts

@@ -144,5 +144,5 @@ const getStyledProps = (props: Record<string, any>): StyledPropsBlade => {
   return removeUndefinedStyledProps(makeStyledProps(props));
 };
 
-export type { StyledPropsBlade };
+export type { StyledPropsBlade, StyledPropsInputType };
 export { getStyledProps, makeStyledProps, removeUndefinedStyledProps };

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

@@ -39,7 +39,7 @@ 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, ...rest },
   ref,
 ) => {
   const { theme } = useTheme();
@@ -201,6 +201,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                 }
                 height={makeSize(chipHeightTokens[_size])}
                 gap="spacing.3"
+                width={width}
               >
                 {Icon ? (
                   <BaseBox display="flex">

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

@@ -727,3 +727,80 @@ chipRef.parameters = {
     exclude: ['icon'],
   },
 };
+
+export const MultiChipStory: 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, minmax(0,120px))"
+          gridTemplateRows="repeat(3, minmax(0,30px))"
+          gap="spacing.3"
+        >
+          {chipArray.map((chip, index) => (
+            <ChipComponent key={index} value={chip.value} width="120px">
+              {chip.label}
+            </ChipComponent>
+          ))}
+        </Box>
+      </ChipGroupComponent>
+    </Box>
+  );
+};

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';
@@ -12,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 = (
   {
@@ -68,6 +70,24 @@ const _ChipGroup = (
       });
     }
   }
+  const isWrapperLayoutControlled =
+    typeof children === 'object' && getComponentId(children) === 'Box';
+  const getChipGroupWrapperStyles = (): Record<string, unknown> => {
+    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 (
     <ChipGroupProvider value={contextValue}>
@@ -96,8 +116,13 @@ const _ChipGroup = (
             <VisuallyHidden>
               <Text>{accessibilityLabel}</Text>
             </VisuallyHidden>
-            <BaseBox display="flex" flexDirection="row" flexWrap="wrap">
-              {React.Children.map(children, (child, index) => {
+            <BaseBox
+              display="flex"
+              flexDirection="row"
+              flexWrap="wrap"
+              {...(isWrapperLayoutControlled ? getChipGroupWrapperStyles() : {})}
+            >
+              {React.Children.map(getChipWrapperChildren(), (child, index) => {
                 return (
                   <BaseBox
                     key={index}

packages/blade/src/components/Chip/types.ts

@@ -1,9 +1,24 @@
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { Theme } from '~components/BladeProvider';
 import type { IconComponent } from '~components/Icons';
-import type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types';
+import type {
+  DataAnalyticsAttribute,
+  PickCSSByPlatform,
+  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<PickCSSByPlatform<'display'> & FlexboxProps & GridProps>,
+  '__brand__'
+>;
 
 type ChipCommonProps = {
   /**
@@ -29,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 &
@@ -137,6 +156,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 +272,5 @@ export type {
   StyledChipWrapperProps,
   ChipBorderColors,
   ChipBackgroundColors,
+  ChipGroupContainerLayoutProps,
 };

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<string, any>;
+
+const makeStyledProps = (
+  props: StyledPropsInputType,
+): KeysRequired<ChipGroupContainerLayoutProps> => {
+  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<string, any>): ChipGroupContainerLayoutProps => {
+  return removeUndefinedStyledProps(makeStyledProps(props));
+};
+
+export { getLayOutProps };