From 94230d928b1c1f43eb2c0949c8ce6116b8000fe0 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Sat, 16 Nov 2024 17:50:28 +0300 Subject: [PATCH 1/6] [Alert]: Added support for size theming --- changelog.md | 5 + epam-assets/theme/variables/6px_grid.scss | 11 ++ uui/components/overlays/Alert.module.scss | 132 +++++++++++++--------- uui/components/overlays/Alert.tsx | 33 +++--- uui/settings.ts | 7 ++ uui/settings.types.ts | 6 + 6 files changed, 123 insertions(+), 71 deletions(-) diff --git a/changelog.md b/changelog.md index d5a11b9028..c489411ef6 100644 --- 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 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/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss index 04312e5fbf..bcd07d710b 100644 --- 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 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/settings.ts b/uui/settings.ts index c54a314bf3..49522d3566 100644 --- 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 index 431213abec..469b262327 100644 --- 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; From 4f1e9ee07c0288963e044c1521cf1abf0113e9d2 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Tue, 26 Nov 2024 17:22:00 +0300 Subject: [PATCH 2/6] [Alert]: updated example, updated stylelint config --- app/src/docs/_examples/alert/Sizes.example.tsx | 1 + uui-build/linting/stylelintrc.base.js | 6 ++++++ uui/components/overlays/Alert.module.scss | 11 +---------- 3 files changed, 8 insertions(+), 10 deletions(-) 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/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/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss index bcd07d710b..7afef19994 100644 --- a/uui/components/overlays/Alert.module.scss +++ b/uui/components/overlays/Alert.module.scss @@ -6,11 +6,8 @@ --uui-alert-border: var(--uui-color-50); --uui-alert-icon: var(--uui-color-50); - //--uui-alert-font: var(--uui-font); - //--uui-alert-font-weight: var(--uui-font-weight, 400); - --uui-alert-min-height: var(--uui-size); - --uui-alert-min-width: 170px; // TODO: need clarify + --uui-alert-min-width: 170px; --uui-alert-border-radius: var(--uui-border-radius); --uui-alert-border-width: 0px; --uui-alert-indicator-border-width: 6px; @@ -20,8 +17,6 @@ --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); // box-sizing: border-box; @@ -59,10 +54,6 @@ 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); } .action-wrapper { From c7bdb63b00b3ed1c0f380d075e029626f6156c0a Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Tue, 26 Nov 2024 17:29:49 +0300 Subject: [PATCH 3/6] changelog updated --- changelog.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/changelog.md b/changelog.md index 1626bd66e2..17bb054de9 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 * [ErrorPage]: Added field for additional message with support link (it works with `500, 503, default` errors), added support link for the site **What's Fixed** @@ -10,11 +11,6 @@ # 5.11.0 - 15.11.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. From 8551bf7dd3e6457ff104557a03b8909ffecaa178 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Tue, 26 Nov 2024 17:47:13 +0300 Subject: [PATCH 4/6] snapshots updated --- .../__snapshots__/Alert.test.tsx.snap | 154 ++++++++++-------- 1 file changed, 89 insertions(+), 65 deletions(-) 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 +
+ +