feat: remove severity colors from default 'data-color' type (#3223)

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
digdir · Feb 26, 2025 · 763f55f · 763f55f
1 parent 3bfda95
commit 763f55f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 8 deletions.
diff --git a/.changeset/breezy-walls-change.md b/.changeset/breezy-walls-change.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+`SeverityColors` is removed from `Color` type. Components where we deem severity to be relevant, now explicitly have SeverityColors added to `data-color`. `Button` component only allows `"danger"`.
diff --git a/packages/react/src/colors.ts b/packages/react/src/colors.ts
@@ -16,13 +16,17 @@ export interface MainAndSupportColors {}
  * otherwise return the arbitrary string type.
  */
 type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject
-  ? string & {}
+  ? string
   : T;
 
-export type SeverityColors = 'info' | 'success' | 'warning' | 'danger';
+export type SeverityInfo = 'info';
+export type SeveritySuccess = 'success';
+export type SeverityWarning = 'warning';
+export type SeverityDanger = 'danger';
+export type SeverityColors =
+  | SeverityInfo
+  | SeveritySuccess
+  | SeverityWarning
+  | SeverityDanger;
 
-export type CustomColors = ColorWithFallback<
-  'neutral' | keyof MainAndSupportColors
->;
-
-export type Color = CustomColors | ColorWithFallback<SeverityColors>;
+export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
@@ -20,6 +24,10 @@ export type BadgeProps = MergeRight<
      * @default 'base'
      */
     'data-variant'?: 'base' | 'tinted';
+    /**
+     * Change the color scheme of the badge
+     */
+    'data-color'?: Color | SeverityColors;
     children?: never;
   }
 >;

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityDanger,
+} from '@digdir/designsystemet-react/colors';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
@@ -14,6 +18,10 @@ export type ButtonProps = MergeRight<
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Change the color scheme of the button
+     */
+    'data-color'?: Color | SeverityDanger;
     /**
      * Toggle icon only styling, pass icon as children
      * @default false

diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
@@ -1,3 +1,7 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import {
   autoUpdate,
   computePosition,
@@ -54,6 +58,10 @@ export type PopoverProps = MergeRight<
      * @default 'default'
      */
     'data-variant'?: 'default' | 'tinted';
+    /**
+     * Change the color scheme of the popover
+     */
+    'data-color'?: Color | SeverityColors;
     /**
      * Callback when the popover wants to open.
      */

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
@@ -1,9 +1,22 @@
+import type {
+  Color,
+  SeverityColors,
+} from '@digdir/designsystemet-react/colors';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
+import type { MergeRight } from '../../utilities';
 
-export type TagProps = DefaultProps & HTMLAttributes<HTMLSpanElement>;
+export type TagProps = MergeRight<
+  DefaultProps & HTMLAttributes<HTMLSpanElement>,
+  {
+    /**
+     * Change the color scheme of the tag
+     */
+    'data-color'?: Color | SeverityColors;
+  }
+>;
 
 /**
  * Use `Tag` to display categories or statuses.