feat(Alert): add shorthand sizes (#1995)

Co-authored-by: Michael Marszalek <[email protected]>
digdir · May 16, 2024 · 868d214 · 868d214
1 parent 7f694e0
commit 868d214
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/packages/css/alert.css b/packages/css/alert.css
@@ -51,17 +51,17 @@
     --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
   }
 
-  .fds-alert--small {
+  .fds-alert--sm {
     --fds-alert-padding: var(--fds-spacing-5);
     --fds-alert-icon-size: var(--fds-sizing-6);
   }
 
-  .fds-alert--medium {
+  .fds-alert--md {
     --fds-alert-padding: var(--fds-spacing-6);
     --fds-alert-icon-size: var(--fds-sizing-7);
   }
 
-  .fds-alert--large {
+  .fds-alert--lg {
     --fds-alert-padding: var(--fds-spacing-7);
     --fds-alert-icon-size: var(--fds-sizing-8);
   }

diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
@@ -9,6 +9,7 @@ import {
 import cl from 'clsx';
 
 import { Paragraph } from '..';
+import { getSize } from '../../utilities/getSize';
 
 const icons: Record<
   Severity,
@@ -28,6 +29,8 @@ const icons: Record<
 
 type Severity = 'info' | 'warning' | 'success' | 'danger';
 
+type OldAlertSizes = 'small' | 'medium' | 'large';
+
 export type AlertProps = {
   /** Sets color & icon according to severity */
   severity?: Severity;
@@ -38,26 +41,22 @@ export type AlertProps = {
    * Use this to inform screenreaders of severity.
    *  Defaults to Norwegian. */
   iconTitle?: string;
-  /** Sets the size of the alert.
+  /**
+   * Sets the size of the alert.
    * Does not affect font size.
    *
-   * @default 'medium'
+   * @default md
+   *
+   * @note `small`, `medium`, `large` is deprecated
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg' | OldAlertSizes;
 } & HTMLAttributes<HTMLDivElement>;
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
-    {
-      severity = 'info',
-      elevated,
-      iconTitle,
-      size,
-      children,
-      className,
-      ...rest
-    },
+    { severity = 'info', elevated, iconTitle, children, className, ...rest },
     ref,
   ) => {
+    const size = getSize(rest.size || 'md') as AlertProps['size'];
     const { Icon, title } = icons[severity];
 
     return (