[Alert]: Added support for size theming

epam · Nov 16, 2024 · 94230d9 · 94230d9
1 parent f7fe841
commit 94230d9
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 71 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,10 @@
 # 5.*.* - **.**.2024
 
+**What's New**
+* [Alert]: Added support for size theming
+
+# 5.*.* - **.**.2024
+
 **What's New**
 * [FlexRow][Breaking Change]: Only for `@epam/loveship` package. Now spacing default value works based on `columnGap` props. It shouldn't affect general cases, but previous spacing implementation require additional hack when it was needed to add negative margin value for container to remove corner paddings in multiline case. Now this hack should be removed, since `columnGap` implementation doesn't produce such bug for multiline.
 * [useTableState][Breaking Change]: columns prop is removed, since it's not needed now. Just remove it from `useTableState` provided props.

diff --git a/epam-assets/theme/variables/6px_grid.scss b/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;
+        }
+    }
 }
diff --git a/uui/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss
@@ -5,79 +5,99 @@
     --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);
-    }
+    //--uui-alert-font: var(--uui-font);
+    //--uui-alert-font-weight: var(--uui-font-weight, 400);
 
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-alert-icon);
-        }
-    }
-}
+    --uui-alert-min-height: var(--uui-size);
+    --uui-alert-min-width: 170px; // TODO: need clarify
+    --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);
+    //--uui-alert-line-height: var(--uui-line-height);
+    //--uui-alert-font-size: var(--uui-font-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%;
+        //font-family: var(--uui-alert-font);
+        //font-weight: var(--uui-alert-font-weight);
+        //line-height: var(--uui-alert-line-height);
+        //font-size: var(--uui-alert-font-size);
+    }
 
-    @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%;
-}
+
+
diff --git a/uui/components/overlays/Alert.tsx b/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>

diff --git a/uui/settings.ts b/uui/settings.ts
@@ -3,6 +3,7 @@ import type { Settings } from './settings.types';
 export const settings: Settings = {
     sizes: {
         defaults: {
+            alert: '48',
             badge: '36',
             button: '36',
             checkbox: '18',
@@ -23,6 +24,12 @@ export const settings: Settings = {
             paginator: '30',
             rating: '18',
         },
+        alert: {
+            action: {
+                36: '24',
+                48: '30',
+            },
+        },
         tag: {
             countIndicator: {
                 18: '12',

diff --git a/uui/settings.types.ts b/uui/settings.types.ts
@@ -1,4 +1,5 @@
 interface DefaultSizes {
+    alert: string;
     badge: string;
     button: string;
     checkbox: string;
@@ -35,6 +36,10 @@ interface UppercaseTextSize {
     uppercase: string;
 }
 
+interface AlertSizes {
+    action: Sizes;
+}
+
 interface TagSizes {
     countIndicator: Sizes;
 }
@@ -235,6 +240,7 @@ interface ModalSizes {
 
 interface SizesSettings {
     defaults: DefaultSizes;
+    alert: AlertSizes;
     tag: TagSizes;
     pickerInput: PickerInputSizes;
     rowAddons: RowAddonsSizes;