feat: allow customizing sizes. DO NOT MERGE - test-custom-sizes.d.ts …

…just exists to prove it works

apps/storybook/test-custom-sizes.d.ts

@@ -0,0 +1,11 @@
+import type {} from '@digdir/designsystemet-react/sizes';
+
+declare module '@digdir/designsystemet-react/sizes' {
+  export interface SizeMap {
+    '2xs': never;
+    xs: never;
+    sm: 'small';
+    md: 'medium';
+    lg: 'laaaarge';
+  }
+}

apps/storybook/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "types": ["../../packages/theme/brand/colors.d.ts"]
+    "types": [
+      "./test-custom-sizes.d.ts",
+      "../../packages/theme/brand/colors.d.ts"
+    ]
   },
   "include": [".", "./.storybook/**/*", "../../packages/css/postcss.config.js"]
 }

packages/react/react-types.d.ts

@@ -1,5 +1,5 @@
-import type { Size } from '@digdir/designsystemet-react';
 import type { Color } from '@digdir/designsystemet-react/colors';
+import type { Size } from '@digdir/designsystemet-react/sizes';
 
 declare global {
   namespace React {

packages/react/src/components/Avatar/Avatar.tsx

@@ -2,7 +2,8 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { Fragment, forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
-import type { DefaultProps, Size } from '../../types';
+import type { GetSizes, Size } from '../../sizes';
+import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 
 export type AvatarProps = MergeRight<
@@ -15,7 +16,7 @@ export type AvatarProps = MergeRight<
     /**
      * The size of the avatar.
      */
-    'data-size'?: 'xs' | Size;
+    'data-size'?: GetSizes<'xs'> | Size;
     /**
      * The shape of the avatar.
      *

packages/react/src/components/Combobox/useFormField/useFormField.ts

@@ -2,7 +2,7 @@ import cl from 'clsx/lite';
 import { useContext, useId } from 'react';
 import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 
-import type { Size } from '../../../types';
+import type { Size } from '../../../sizes';
 import { FieldsetContext } from './FieldsetContext';
 
 export type FormFieldProps = {

packages/react/src/components/Heading/Heading.tsx

@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { ElementType, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { AllPossibleSizes, GetSizes } from '../../sizes';
 
 export type HeadingProps = {
   /**
@@ -11,7 +12,7 @@ export type HeadingProps = {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Changes text sizing
    */
-  'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  'data-size'?: GetSizes<AllPossibleSizes>;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false

packages/react/src/components/Paragraph/Paragraph.tsx

@@ -2,12 +2,13 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { GetSizes } from '../../sizes';
 
 export type ParagraphProps = {
   /**
    * Changes text sizing
    */
-  'data-size'?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  'data-size'?: GetSizes<'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
   /**
    *  Adjusts styling for paragraph length
    *  @default 'default'

packages/react/src/components/Spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import type { GetSizes } from '../../sizes';
 import { useSynchronizedAnimation } from '../../utilities';
 
 export type SpinnerProps = {
@@ -9,7 +10,7 @@ export type SpinnerProps = {
   /**
    * Spinner size
    */
-  'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  'data-size'?: GetSizes<'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
 } & ComponentPropsWithoutRef<'svg'> &
   (
     | { 'aria-label': string; 'aria-hidden'?: never }

packages/react/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './utilities';
-export type { Size } from './types';
+export type { Size } from './sizes';
+export type { Color } from './colors';

packages/react/src/sizes.ts

@@ -0,0 +1,38 @@
+/**
+ * Base interface for user-defined mappings from Designsystemet's internal size names
+ * to user-defined sizes. This allows a downstream library consumer to augment this
+ * interface to change or disable a given size.
+ *
+ * Why would you do this?
+ *   - It lets you change the sizing scale (e.g. map all sizes one size down)
+ *   - It allows you to rename the sizes as you please (e.g. "small", "medium", ...)
+ *     NB: This means you would have to bring your own `data-size` styling, as renaming
+ *     a size to one that doesn't already exist in Designsystemet opts out of the
+ *     built-in `data-size` styling.
+ * @example
+ * import type {} from '@digdir/designsystemet-react/sizes';
+ *
+ * // This will disable '2xs' and rename 'sm' to 'small'
+ * declare module '@digdir/designsystemet-react/sizes' {
+ *   export interface SizeMap {
+ *     '2xs': never;
+ *     sm: 'small';
+ *   }
+ * }
+ *
+ */
+// biome-ignore lint/suspicious/noEmptyInterface: used for interface augmentation
+export interface SizeMap {}
+
+export type AllPossibleSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+type DefaultSizeMap = {
+  [K in AllPossibleSizes]: K;
+};
+
+type CombinedSizeMap = Omit<DefaultSizeMap, keyof SizeMap> & SizeMap;
+
+/** Look up the actual size names for the given internal size names */
+export type GetSizes<T extends AllPossibleSizes> = CombinedSizeMap[T];
+
+export type Size = GetSizes<'sm' | 'md' | 'lg'>;

packages/react/src/types.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 import type { Color } from './colors';
-
-export type Size = 'sm' | 'md' | 'lg';
+import type { Size } from './sizes';
 
 export type DefaultProps = {
   /**

tsconfig.base.json

@@ -13,7 +13,8 @@
       "packages/*": ["this/dir/does/not/exist/*"],
       // Paths matching package.json exports section in @digdir/designsystem-react
       "@digdir/designsystemet-react": ["packages/react/src/index.ts"],
-      "@digdir/designsystemet-react/colors": ["packages/react/src/colors.ts"]
+      "@digdir/designsystemet-react/colors": ["packages/react/src/colors.ts"],
+      "@digdir/designsystemet-react/sizes": ["packages/react/src/sizes.ts"],
     },
     "target": "ES2022",
     "module": "ESNext",