feat(Chips): add shorthand sizes (#2007)

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
digdir · May 16, 2024 · 318d1ee · 318d1ee
1 parent 62caef5
commit 318d1ee
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 48 deletions.
diff --git a/packages/css/chip.css b/packages/css/chip.css
@@ -57,11 +57,11 @@
     min-height: var(--fdsc-chip-height);
   }
 
-  .fds-chip--removable.fds-chip--small {
+  .fds-chip--removable.fds-chip--sm {
     padding-right: var(--fds-spacing-1);
   }
 
-  .fds-chip--removable.fds-chip--large {
+  .fds-chip--removable.fds-chip--lg {
     padding-right: var(--fds-spacing-2);
   }
 
@@ -80,17 +80,17 @@
     padding-left: var(--fds-spacing-2) !important;
   }
 
-  .fds-chip--small .fds-chip__checkmark-icon {
+  .fds-chip--sm .fds-chip__checkmark-icon {
     height: var(--fds-sizing-5);
     width: auto;
   }
 
-  .fds-chip--medium .fds-chip__checkmark-icon {
+  .fds-chip--md .fds-chip__checkmark-icon {
     height: 24px;
     width: auto;
   }
 
-  .fds-chip--large .fds-chip__checkmark-icon {
+  .fds-chip--lg .fds-chip__checkmark-icon {
     height: 26px;
     width: auto;
   }
@@ -105,15 +105,15 @@
     margin: 0;
   }
 
-  .fds-chip--group-container.fds-chip--small {
+  .fds-chip--group-container.fds-chip--sm {
     --fdsc-gap: var(--fds-spacing-2);
   }
 
-  .fds-chip--group-container.fds-chip--medium {
+  .fds-chip--group-container.fds-chip--md {
     --fdsc-gap: var(--fds-spacing-2);
   }
 
-  .fds-chip--group-container.fds-chip--large {
+  .fds-chip--group-container.fds-chip--lg {
     --fdsc-gap: var(--fds-spacing-2);
   }
 
@@ -150,21 +150,21 @@
     --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
   }
 
-  .fds-chip--small {
+  .fds-chip--sm {
     --fdsc-chip-height: var(--fds-sizing-7);
     --fdsc-chip-padding: var(--fds-spacing-3);
     --fdsc-removable-chip-xmark-size: var(--fds-sizing-5);
     --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-1);
   }
 
-  .fds-chip--medium {
+  .fds-chip--md {
     --fdsc-chip-height: var(--fds-sizing-8);
     --fdsc-chip-padding: var(--fds-spacing-3);
     --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
     --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-2);
   }
 
-  .fds-chip--large {
+  .fds-chip--lg {
     --fdsc-chip-height: var(--fds-sizing-9);
     --fdsc-chip-padding: var(--fds-spacing-4);
     --fdsc-removable-chip-xmark-size: var(--fds-sizing-7);

diff --git a/packages/react/src/components/Chip/Chip.stories.tsx b/packages/react/src/components/Chip/Chip.stories.tsx
@@ -12,7 +12,7 @@ export default {
 export const Preview: Story = {
   args: {
     children: 'Nynorsk',
-    size: 'medium',
+    size: 'md',
     selected: false,
     checkmark: false,
   },

diff --git a/packages/react/src/components/Chip/Group/Group.stories.tsx b/packages/react/src/components/Chip/Group/Group.stories.tsx
@@ -21,5 +21,5 @@ export const Preview: Story = (args) => (
 );
 
 Preview.args = {
-  size: 'small',
+  size: 'sm',
 };
diff --git a/packages/react/src/components/Chip/Group/Group.tsx b/packages/react/src/components/Chip/Group/Group.tsx
@@ -2,37 +2,49 @@ import type { HTMLAttributes } from 'react';
 import { Children, isValidElement, forwardRef, createContext } from 'react';
 import cl from 'clsx/lite';
 
+import { getSize } from '../../../utilities/getSize';
+
+type OldChipSizes = 'small' | 'medium' | 'large';
+
 export type ChipGroupContext = {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg' | OldChipSizes;
 };
 
 export const ChipGroupContext = createContext<ChipGroupContext | null>(null);
 
 export type ChipGroupProps = {
   /**
    * Changes Chip size and gap between chips.
+   * @default md
+   * @note `small`, `medium`, `large` is deprecated
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ChipGroupContext['size'];
 } & HTMLAttributes<HTMLUListElement>;
 
 export const Group = forwardRef<HTMLUListElement, ChipGroupProps>(
-  ({ children, size = 'medium', className, ...rest }: ChipGroupProps, ref) => (
-    <ul
-      ref={ref}
-      className={cl(
-        `fds-chip--group-container`,
-        `fds-chip--${size}`,
-        className,
-      )}
-      {...rest}
-    >
-      <ChipGroupContext.Provider value={{ size }}>
-        {Children.toArray(children).map((child, index) =>
-          isValidElement(child) ? <li key={`chip-${index}`}>{child}</li> : null,
+  ({ children, className, ...rest }: ChipGroupProps, ref) => {
+    const size = getSize(rest.size || 'md') as ChipGroupContext['size'];
+
+    return (
+      <ul
+        ref={ref}
+        className={cl(
+          `fds-chip--group-container`,
+          `fds-chip--${size}`,
+          className,
         )}
-      </ChipGroupContext.Provider>
-    </ul>
-  ),
+        {...rest}
+      >
+        <ChipGroupContext.Provider value={{ size }}>
+          {Children.toArray(children).map((child, index) =>
+            isValidElement(child) ? (
+              <li key={`chip-${index}`}>{child}</li>
+            ) : null,
+          )}
+        </ChipGroupContext.Provider>
+      </ul>
+    );
+  },
 );
 
 Group.displayName = 'ChipGroup';
diff --git a/packages/react/src/components/Chip/Removable/Removable.stories.tsx b/packages/react/src/components/Chip/Removable/Removable.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof RemovableChip>;
 export const Preview: Story = {
   args: {
     children: 'Nynorsk',
-    size: 'medium',
+    size: 'md',
     'aria-label': 'Slett nynorsk',
     disabled: false,
   },

diff --git a/packages/react/src/components/Chip/Removable/Removable.tsx b/packages/react/src/components/Chip/Removable/Removable.tsx
@@ -5,18 +5,21 @@ import cl from 'clsx/lite';
 
 import { Paragraph } from '../../Typography';
 import { ChipGroupContext } from '../Group/Group';
+import { getSize } from '../../../utilities/getSize';
 
 export type RemovableChipProps = {
   /**
-   * Changes padding and font-sizes.
-   * @default medium
+   * Changes Chip size and gap between chips.
+   * @default 'md'
+   * @note `small`, `medium`, `large` is deprecated
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ChipGroupContext['size'];
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const RemovableChip = forwardRef<HTMLButtonElement, RemovableChipProps>(
-  ({ children, size = 'medium', className, ...rest }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
+    const size = getSize(rest.size || 'md') as ChipGroupContext['size'];
 
     return (
       <button

diff --git a/packages/react/src/components/Chip/Toggle/Toggle.stories.tsx b/packages/react/src/components/Chip/Toggle/Toggle.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof ToggleChip>;
 export const Preview: Story = {
   args: {
     children: 'Nynorsk',
-    size: 'medium',
+    size: 'md',
     selected: false,
     checkmark: false,
     disabled: false,

diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -5,17 +5,19 @@ import cl from 'clsx/lite';
 
 import { Paragraph } from '../../Typography';
 import { ChipGroupContext } from '../Group/Group';
+import { getSize } from '../../../utilities/getSize';
 
 export type ToggleChipProps = {
   /**
    * Enables check mark icon
    */
   checkmark?: boolean;
   /**
-   * Changes padding and font-sizes.
-   * @default medium
+   * Changes Chip size and gap between chips.
+   * @default 'md'
+   * @note `small`, `medium`, `large` is deprecated
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ChipGroupContext['size'];
   /**
    * Toggles `aria-pressed` and visual-changes
    * */
@@ -26,7 +28,6 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
   (
     {
       children,
-      size = 'medium',
       selected = false,
       checkmark = true,
       className,
@@ -36,6 +37,7 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
   ) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
+    const size = getSize(rest.size || 'md') as ChipGroupContext['size'];
 
     return (
       <button

diff --git a/packages/react/src/components/form/useFormField.test.tsx b/packages/react/src/components/form/useFormField.test.tsx
@@ -126,30 +126,29 @@ describe('useFormField', () => {
   });
 
   test('has correct size', () => {
-    const { result } = renderHook(
-      () => useFormField({ size: 'small' }, 'test'),
-      { wrapper: createWrapper(Fieldset) },
-    );
+    const { result } = renderHook(() => useFormField({ size: 'sm' }, 'test'), {
+      wrapper: createWrapper(Fieldset),
+    });
 
     const field = result.current;
 
-    expect(field.size).toEqual('small');
+    expect(field.size).toEqual('sm');
   });
   test('has correct values inherited from Fieldset', () => {
     const { result } = renderHook<FormField, FieldsetProps>(
       () => useFormField({}, 'test'),
       {
         wrapper: createWrapper(Fieldset, {
           disabled: true,
-          size: 'small',
+          size: 'sm',
           legend: 'Wrapper',
         }),
       },
     );
 
     const field = result.current;
 
-    expect(field.size).toEqual('small');
+    expect(field.size).toEqual('sm');
     expect(field.inputProps.disabled).toBeTruthy();
   });