diff --git a/packages/css/alert.css b/packages/css/alert.css index a24db3bb66..1be4d3ccab 100644 --- 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 index e8a0db1e6b..3c9fddb1c9 100644 --- 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; export const Alert = forwardRef( ( - { - 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 (