From 0314d6214ddf1025653f436eb5b980a9ad546fa0 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Mon, 24 Jul 2023 11:03:10 +0200
Subject: [PATCH] refactor(Chip): :recycle: Improve `Chip.Group` application of
 childrens sizes (#675)

---
 .../src/components/Chip/Chip.stories.tsx      |  2 +-
 .../react/src/components/Chip/Group/Group.tsx | 26 +++++++++++--------
 .../src/components/Chip/Toggle/Toggle.tsx     |  1 +
 .../components/Chip/_ChipBase/ChipBase.tsx    | 10 +++++--
 packages/react/src/components/Chip/index.ts   |  8 ++++++
 5 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Chip/Chip.stories.tsx b/packages/react/src/components/Chip/Chip.stories.tsx
index a2e2c04020..59ae45b7b5 100644
--- a/packages/react/src/components/Chip/Chip.stories.tsx
+++ b/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',
diff --git a/packages/react/src/components/Chip/Group/Group.tsx b/packages/react/src/components/Chip/Group/Group.tsx
index 13bcbb9fa3..5a7260b79a 100644
--- a/packages/react/src/components/Chip/Group/Group.tsx
+++ b/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>
   ),
 );
diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
index 0ce27cd1b5..afa1409c79 100644
--- a/packages/react/src/components/Chip/Toggle/Toggle.tsx
+++ b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -12,6 +12,7 @@ export type ToggleChipProps = {
    */
   checkmark?: boolean;
 } & ChipBaseProps;
+
 export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
   (
     {
diff --git a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx b/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
index 3f2324f2e0..033a6fb3b4 100644
--- a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
+++ b/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'
diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts
index dbe0f79171..fa0bf88441 100644
--- a/packages/react/src/components/Chip/index.ts
+++ b/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;