diff --git a/app/src/docs/_examples/alert/Sizes.example.tsx b/app/src/docs/_examples/alert/Sizes.example.tsx index 1752b2a689..1df0b99520 100644 --- a/app/src/docs/_examples/alert/Sizes.example.tsx +++ b/app/src/docs/_examples/alert/Sizes.example.tsx @@ -15,6 +15,7 @@ export default function BasicAlertExample() { {' '} alert('close action') } actions={ [{ name: 'ACTION 1', action: () => null }, { name: 'ACTION 2', action: () => null }] } > diff --git a/changelog.md b/changelog.md index f936856ecb..7dc2f29be9 100644 --- a/changelog.md +++ b/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 diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss index 68d983a429..ba6a694d0a 100644 --- 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-build/linting/stylelintrc.base.js b/uui-build/linting/stylelintrc.base.js index 76a4f75c8b..d866d8a536 100644 --- a/uui-build/linting/stylelintrc.base.js +++ b/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 = { diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png index 9dcf0afbd2..f0e21b79f4 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png index b4df3222cc..3c80b51dc2 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png index e7c52e3d32..bb4c665702 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png index e21d697bfe..225edeb0a6 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png index 73fc697105..10f074b44f 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png index dd87b58f25..c595b814ff 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png index 3d8c2485d0..1dc05ab83b 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png index 2250c0e500..df3f4e5207 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png index a847df2d4b..51956c6ec5 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png index e155be6c90..61deded213 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png index 3ba7d384ee..34f720cdb3 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png index 6911e8f148..59a446c750 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png index 64e54ad229..26417987ca 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png index 220f78f7af..0a147dd306 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png index 506462968d..f5224e333d 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png index b2c740bb13..c3c55d4105 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png index 60a0ad96de..db0313fdf9 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png index 549e4edcbe..10d327210d 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png index 1e470f1c51..fb0a3762ab 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png index 85caee40a1..340cbd556e 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png index a070b32bb9..3f9d43aa6a 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png index d0dc5bf8e9..b954929345 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png index b017ec83d7..d8b4b1af20 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png differ diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png index 81e5d5160a..7bd7a5599c 100644 Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png differ diff --git a/uui/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss index 04312e5fbf..7afef19994 100644 --- a/uui/components/overlays/Alert.module.scss +++ b/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%; -} + + diff --git a/uui/components/overlays/Alert.tsx b/uui/components/overlays/Alert.tsx index 58e0c3dce9..11fe0e09b8 100644 --- 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((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 } >
- {props.icon && ( -
- -
- )} -
- {props.children} - {props.actions && ( -
- {props.actions.map((action) => ( - - ))} +
+ {props.icon && ( +
+
)} +
+ {props.children} + {props.actions && ( +
+ {props.actions.map((action) => ( + + ))} +
+ )} +
{props.onClose && }
diff --git a/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap index 12ebc121ab..2d99899cba 100644 --- a/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap @@ -2,42 +2,46 @@ exports[`Alert should render with maximum props 1`] = `
- +
+ +
-
-
- +
+ ACTION 1 +
+ +