refactor(Chip): ♻️ Improve Chip.Group application of childrens sizes (

#675)

packages/react/src/components/Chip/Chip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Chip } from './index';
 
-type Story = StoryObj<typeof Chip>;
+type Story = StoryObj<typeof Chip.Toggle>;
 
 export default {
   title: 'Kjernekomponenter/Chip',

packages/react/src/components/Chip/Group/Group.tsx

@@ -1,14 +1,20 @@
 import type { HTMLAttributes } from 'react';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, createContext } from 'react';
 import cn from 'classnames';
 
 import type { ChipBaseProps } from '../_ChipBase';
 
 import classes from './Group.module.css';
 
+export type ChipGroupContext = {
+  size?: ChipBaseProps['size'];
+};
+
+export const ChipGroupContext = createContext<ChipGroupContext | null>(null);
+
 export type ChipGroupProps = {
   /**
-   * Changes padding, font-sizes and gap between chips.
+   * Changes Chip size and gap between chips.
    */
   size?: 'xsmall' | 'small';
 } & HTMLAttributes<HTMLUListElement>;
@@ -20,15 +26,13 @@ export const Group = forwardRef<HTMLUListElement, ChipGroupProps>(
       ref={ref}
       className={cn(classes.groupContainer, classes[size], rest.className)}
     >
-      {React.Children.toArray(children).map((child, index) =>
-        React.isValidElement(child) ? (
-          <li key={`${child.toString()}-${index}`}>
-            {React.cloneElement(child as React.ReactElement<ChipBaseProps>, {
-              size,
-            })}
-          </li>
-        ) : null,
-      )}
+      <ChipGroupContext.Provider value={{ size }}>
+        {React.Children.toArray(children).map((child, index) =>
+          React.isValidElement(child) ? (
+            <li key={`${child.toString()}-${index}`}>{child}</li>
+          ) : null,
+        )}
+      </ChipGroupContext.Provider>
     </ul>
   ),
 );

packages/react/src/components/Chip/Toggle/Toggle.tsx

@@ -12,6 +12,7 @@ export type ToggleChipProps = {
    */
   checkmark?: boolean;
 } & ChipBaseProps;
+
 export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
   (
     {

packages/react/src/components/Chip/_ChipBase/ChipBase.tsx

@@ -1,9 +1,10 @@
 import type { ButtonHTMLAttributes } from 'react';
-import React, { forwardRef } from 'react';
+import React, { useContext, forwardRef } from 'react';
 import cn from 'classnames';
 
 import { Paragraph } from '../../Typography';
 import type { OverridableComponent } from '../../../types/OverridableComponent';
+import { ChipGroupContext } from '../Group';
 
 import classes from './ChipBase.module.css';
 
@@ -31,12 +32,17 @@ export const ChipBase: OverridableComponent<ChipBaseProps, HTMLLabelElement> =
       },
       ref,
     ): JSX.Element => {
+      const group = useContext(ChipGroupContext);
       return (
         <Component
           {...rest}
           ref={ref}
           aria-pressed={selected}
-          className={cn(classes.chipButton, classes[size], className)}
+          className={cn(
+            classes.chipButton,
+            classes[group?.size || size],
+            className,
+          )}
         >
           <Paragraph
             as='span'

packages/react/src/components/Chip/index.ts

@@ -6,6 +6,14 @@ import { ToggleChip } from './Toggle';
 import type { ToggleChipProps } from './Toggle/';
 
 type ChipComponent = {
+  /**
+   * Grouping  multiple `Chip` together. Avoid mixing different kind of chips.
+   * @example
+   * <Chip.Group>
+   *    <Chip.Removable>Tekst</Chip.Removable>
+   *    <Chip.Removable>Tekst</Chip.Removable>
+   * </Chip.Group>
+   */
   Group: typeof Group;
   Removable: typeof RemovableChip;
   Toggle: typeof ToggleChip;