Merge pull request #2643 from epam/2620-size-tokens-des-dev-alert

[Alert]: Added support for size theming

app/src/docs/_examples/alert/Sizes.example.tsx

@@ -15,6 +15,7 @@ export default function BasicAlertExample() {
                 {' '}
             </SuccessAlert>
             <WarningAlert
+                size="48"
                 onClose={ () => alert('close action') }
                 actions={ [{ name: 'ACTION 1', action: () => null }, { name: 'ACTION 2', action: () => null }] }
             >

changelog.md

@@ -1,6 +1,7 @@
 # 5.xx.xx - xx.xx.2024
 
 **What's New**
+* [Alert]: added support for size theming
 * [DataTable]: added support of column groups in table header. Read more - https://uui.epam.com/documents?id=advancedTables&mode=doc&category=tables&theme=electric#table_with_header_groups
 * [ErrorPage]: added field for additional message with support link (it works with `500, 503, default` errors), added support link for the site
 

epam-assets/theme/variables/6px_grid.scss

@@ -313,4 +313,15 @@
             --uui-vertical-padding: 3px;
         }
     }
+
+    .uui-alert {
+        &.uui-size-36 {
+            --uui-alert-indicator-border-width: 3px;
+            --uui-alert-gap-h: 12px;
+            --uui-alert-gap-v: 3px;
+            --uui-alert-padding-h: 9px;
+            --uui-alert-padding-v: 3px;
+            --uui-alert-caption-gap-h: 9px;
+        }
+    }
 }

uui-build/linting/stylelintrc.base.js

@@ -73,6 +73,12 @@ const SCSS_COMMON_RULES = {
     'scss/selector-no-redundant-nesting-selector': null,
     'scss/dollar-variable-pattern': null,
     'scss/no-global-function-names': null,
+    'length-zero-no-unit': [
+        true, {
+            ignore: ['custom-properties'],
+            ignoreFunctions: ['var', '/^--/'],
+        },
+    ],
 };
 
 module.exports = {

uui/components/overlays/Alert.module.scss

@@ -5,79 +5,90 @@
     --uui-alert-bg: var(--uui-color-10);
     --uui-alert-border: var(--uui-color-50);
     --uui-alert-icon: var(--uui-color-50);
-    --uui-alert-border-radius: var(--uui-border-radius);
-    //
-    background-color: var(--uui-alert-bg);
-    border-left: 6px solid var(--uui-alert-border);
-
-    :global(.uui-text) {
-        color: var(--uui-alert-text);
-    }
 
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-alert-icon);
-        }
-    }
-}
+    --uui-alert-min-height: var(--uui-size);
+    --uui-alert-min-width: 170px;
+    --uui-alert-border-radius: var(--uui-border-radius);
+    --uui-alert-border-width: 0px;
+    --uui-alert-indicator-border-width: 6px;
+    --uui-alert-gap-h: 12px;
+    --uui-alert-gap-v: 0px;
+    --uui-alert-padding-h: 18px;
+    --uui-alert-padding-v: 9px;
+    --uui-alert-caption-gap-h: 12px;
+    --uui-alert-icon-size: var(--uui-icon-size);
 
-.alert-wrapper {
+    //
     box-sizing: border-box;
     display: flex;
     align-items: center;
     overflow: hidden;
-    min-width: 170px;
     border-radius: var(--uui-alert-border-radius);
-}
+    background-color: var(--uui-alert-bg);
+    border-width: var(--uui-alert-border-width);
+    border-inline-start: var(--uui-alert-indicator-border-width) solid var(--uui-alert-border);
+    padding-inline-start: calc(var(--uui-alert-padding-h) - var(--uui-alert-indicator-border-width));
+    padding-inline-end: var(--uui-alert-padding-h);
+    padding-top: var(--uui-alert-padding-v);
+    padding-bottom: var(--uui-alert-padding-v);
+    min-height: var(--uui-alert-min-height);
+    min-width: var(--uui-alert-min-width);
 
-.size-48 {
-    padding: 9px 18px 9px 12px;
-    min-height: 48px;
+    .main-path {
+        width: 100%;
+        display: flex;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-    @include scalable-icon-size(48);
-}
+    .content-wrapper {
+        display: flex;
+        column-gap: var(--uui-alert-caption-gap-h);
+        width: 100%;
+    }
 
-.size-36 {
-    padding: 3px 9px;
-    min-height: 36px;
-    border-left-width: 3px;
+    .content {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: var(--uui-alert-gap-h);
+        row-gap: var(--uui-alert-gap-v);
+        width: 100%;
+    }
 
-    @include scalable-icon-size(36);
-}
+    .action-wrapper {
+        display: flex;
+        align-items: center;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-.icon-wrapper {
-    height: 100%;
-    margin-inline-end: 12px;
-}
+    :global(.uui-text) {
+        color: var(--uui-alert-text);
+    }
 
-.action-wrapper {
-    display: flex;
-    align-items: center;
-}
+    svg {
+        height: var(--uui-alert-icon-size);
+        width: inherit;
+    }
 
-.action-icon {
-    min-height: 30px;
-}
+    .icon-wrapper {
+        height: 100%;
 
-.action-link:not(:last-child) {
-    margin-inline-end: 12px;
-}
+        :global(.uui-icon) {
+            fill: var(--uui-alert-icon);
+        }
+    }
 
-.close-icon {
-    margin-inline-start: 17px;
-    min-height: 30px;
-    min-width: fit-content;
-    align-self: flex-start;
-}
+    .icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+    }
 
-.main-path {
-    width: 100%;
-    display: flex;
+    .close-icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+        min-width: fit-content;
+        align-self: flex-start;
+    }
 }
 
-.content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-}
+
+

uui/components/overlays/Alert.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IHasChildren, IHasCX, Icon, IHasRawProps } from '@epam/uui-core';
 import { IconContainer } from '@epam/uui-components';
-import { IconButton, LinkButton } from '../buttons';
+import { IconButton, LinkButton, LinkButtonProps } from '../buttons';
 import { ReactComponent as SuccessIcon } from '@epam/assets/icons/notification-check-fill.svg';
 import { ReactComponent as WarningIcon } from '@epam/assets/icons/notification-warning-fill.svg';
 import { ReactComponent as ErrorIcon } from '@epam/assets/icons/notification-error-fill.svg';
 import { ReactComponent as HintIcon } from '@epam/assets/icons/notification-info-fill.svg';
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/navigation-close-outline.svg';
+import { settings } from '../../settings';
+
 import css from './Alert.module.scss';
 
 interface AlertNotificationAction {
@@ -51,29 +53,30 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) =
             cx(
                 'uui-alert',
                 css.root,
-                css.alertWrapper,
                 props.color && `uui-color-${props.color}`,
                 props.cx,
-                (props.size === '36' ? css.size36 : css.size48),
+                `uui-size-${props.size || settings.sizes.defaults.alert}`,
             )
         }
         { ...props.rawProps }
     >
         <div className={ css.mainPath }>
-            {props.icon && (
-                <div className={ css.iconWrapper }>
-                    <IconContainer icon={ props.icon } cx={ css.actionIcon } />
-                </div>
-            )}
-            <div className={ css.content }>
-                {props.children}
-                {props.actions && (
-                    <div className={ css.actionWrapper }>
-                        {props.actions.map((action) => (
-                            <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ props?.size === '36' ? '24' : '30' } />
-                        ))}
+            <div className={ css.contentWrapper }>
+                {props.icon && (
+                    <div className={ css.iconWrapper }>
+                        <IconContainer icon={ props.icon } cx={ css.icon } />
                     </div>
                 )}
+                <div className={ css.content }>
+                    {props.children}
+                    {props.actions && (
+                        <div className={ css.actionWrapper }>
+                            {props.actions.map((action) => (
+                                <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ settings.sizes.alert.action[props.size || settings.sizes.defaults.alert] as LinkButtonProps['size'] } />
+                            ))}
+                        </div>
+                    )}
+                </div>
             </div>
             {props.onClose && <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />}
         </div>