diff --git a/playground/entries/Notice.tsx b/playground/entries/Notice.tsx index 29e0d36c97..b583ee9c3c 100644 --- a/playground/entries/Notice.tsx +++ b/playground/entries/Notice.tsx @@ -32,10 +32,10 @@ function getJSX(props: NoticeJSXProps) { {props.title || props.label || props.closable ? {props.message} : props.message} {props.actions && ( - - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0422d7bd04..d98f788460 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1471,6 +1471,9 @@ importers: '@semcore/icon': specifier: workspace:* version: link:../icon + '@semcore/illustration': + specifier: workspace:* + version: link:../illustration '@semcore/testing-utils': specifier: workspace:* version: link:../../tools/testing-utils diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index 8aaae36f87..f95858aff4 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index fa8095fe78..847496ea78 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index 12abb0918f..ac9a5ddea4 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index a33081ee46..acf194b3e8 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index 6392eeaafa..3b2b0e9434 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index 43a5f82a78..2e6281b2fc 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png index 4f561ca52d..f15eebf057 100644 Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png and b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png differ diff --git a/semcore/dropdown/src/style/dropdownNotice.shadow.css b/semcore/dropdown/src/style/dropdownNotice.shadow.css index b063a57ace..5e7b676858 100644 --- a/semcore/dropdown/src/style/dropdownNotice.shadow.css +++ b/semcore/dropdown/src/style/dropdownNotice.shadow.css @@ -4,8 +4,8 @@ SDropdownNotice { border-left: none; border-right: none; border-bottom: none; - border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); - border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-left-radius: calc(var(--intergalactic-rounded-small, 4px) + 1px); + border-bottom-right-radius: calc(var(--intergalactic-rounded-small, 4px) + 1px); border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png index 243d994842..e30dabe77d 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png index 8993221e55..0b4805ab3f 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png index 57f53dbe93..ff8f76bcba 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-advanced-mode-rendering-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png index 0eac94f408..aac261cf09 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png index 45888f2229..e4a32de5f2 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png index adbbc64967..45d659b021 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-false-showActions-false-iconType-ai-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png index 549ed29c2c..c1a5a7a6c2 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png index cb8212a648..51ce2fce87 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png index 399090d8c5..943f1559c2 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-Notice-FH-Verify-Notice-showTitle-true-showActions-true-iconType-mail-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/src/components/notice/Notice.type.ts b/semcore/feature-highlight/src/components/notice/Notice.type.ts index 2e1219bce3..1f4b251ce6 100644 --- a/semcore/feature-highlight/src/components/notice/Notice.type.ts +++ b/semcore/feature-highlight/src/components/notice/Notice.type.ts @@ -1,32 +1,31 @@ import type { Intergalactic } from '@semcore/core'; -import type { NSNoticeSmart } from '@semcore/notice'; -import type Notice from '@semcore/notice'; +import type { NSNotice, NSNoticeSmart } from '@semcore/notice'; declare namespace NSNoticeFH { - type Props = NSNoticeSmart.Props; + type Props = NSNotice.Props & NSNoticeSmart.Props; namespace Label { - type Component = typeof Notice['Label']; + type Component = NSNotice.Label.Component; } namespace Actions { - type Component = typeof Notice['Actions']; + type Component = NSNotice.Actions.Component; } namespace Content { - type Component = typeof Notice['Content']; + type Component = NSNotice.Content.Component; } namespace Title { - type Component = typeof Notice['Title']; + type Component = NSNotice.Title.Component; } namespace Text { - type Component = typeof Notice['Text']; + type Component = NSNotice.Text.Component; } namespace Close { - type Component = typeof Notice['Close']; + type Component = NSNotice.Close.Component; } type Component = Intergalactic.Component<'div', Props> & { diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-chromium-linux.png index 7e8faefefb..1e07e08a79 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-firefox-linux.png index ff5e747a31..3fdd66589d 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-loading-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-chromium-linux.png index 00b742e48f..f92d69eb75 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-firefox-linux.png index 5f40f3f10d..31157bba5c 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-webkit-linux.png index 01e3799d1a..631919dc1a 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-chromium-linux.png index 76f6053a2c..51bd6582a7 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-firefox-linux.png index ccd2c9128e..beafdd94ab 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-webkit-linux.png index 9b9842ef65..27ea1ce085 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-chromium-linux.png index ca1215190c..d45d04f357 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-firefox-linux.png index 04fc16848d..ff318444cd 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png index 66be82e01c..a49a9b6158 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-3-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png index 2a23da8483..ff0d9110e8 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-firefox-linux.png index 169d8a654d..0df1299960 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png index 320a3dfc8f..0dbfa37b01 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-4-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-chromium-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-chromium-linux.png index 7c06357f52..1f39d1ea57 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-chromium-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-firefox-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-firefox-linux.png index 354be1d477..4532aafd37 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-firefox-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png index 1749637675..ea195e0d75 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png index d455b2294d..cc37277ec3 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png index 26eb03532d..eca861f073 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png index 2300c350fa..c312f6f308 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-illustration-and-feature-highlight-notice-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png index 0101a02f16..15c51df45e 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png index 16799cbab8..3c6f3b512e 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png index d70a46a568..1b57f44691 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png index 3b43dd4c2b..6c5d300eaa 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png index 5b9e054b35..ca18326d4d 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png index 4acde0ff70..7ebde6910f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png index 04b7d25115..32e8145a64 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png index 50c5049a7c..796ff063ff 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png index a6b6f673f0..e949ca09d9 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png index e432d09d71..9053658fd9 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png index daa2713763..a1bd89d9f4 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png index fb0d972b5b..ddf9e9ccb9 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png index 129de23250..23a0d3ffe0 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png index fa7e78959d..72966d318d 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png index 607819d798..ee8126728d 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png index 6f0d1a5a77..188012d830 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png index 6a211c1ca9..aade4f31d4 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png index 1c97fb7c53..05bc25dce8 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png index 0114764543..94b30e8f9f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png index ea65d8b498..99431dcd8e 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png index 6184ce7fad..7483da22e1 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png index 3cfa35a283..bb0f45466f 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png index 2ccff6b4a2..083e94dd7c 100644 Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png index 33799ca79c..353b5d5d90 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png index e835632c6d..cef4a745b4 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png index 104f2fe5de..5a18e25d58 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png index f7840d03a2..70b207bcfa 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png index d7b06f400b..724fbc53f0 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png index bc5a1b311a..1568ea77b9 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png index db6c4c7d09..002a92f2d1 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png index c77a545c8e..81a6b762d5 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png differ diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png index 39b98b46f1..3b124214fd 100644 Binary files a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png and b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png differ diff --git a/semcore/feedback-form/package.json b/semcore/feedback-form/package.json index 850716280d..75af305a1a 100644 --- a/semcore/feedback-form/package.json +++ b/semcore/feedback-form/package.json @@ -46,6 +46,7 @@ "@semcore/core": "workspace:*", "@semcore/base-components": "workspace:*", "@semcore/icon": "workspace:*", + "@semcore/notice": "workspace:*", "@types/final-form-focus": "1.1.7", "@semcore/testing-utils": "workspace:*" }, diff --git a/semcore/feedback-form/src/FeedbackRating.type.ts b/semcore/feedback-form/src/FeedbackRating.type.ts index 746b70f149..e7896bf717 100644 --- a/semcore/feedback-form/src/FeedbackRating.type.ts +++ b/semcore/feedback-form/src/FeedbackRating.type.ts @@ -1,6 +1,6 @@ import type { Intergalactic } from '@semcore/core'; import type { IllustrationProps } from '@semcore/illustration'; -import type Notice from '@semcore/notice'; +import type { NSNotice } from '@semcore/notice'; import type { Text } from '@semcore/typography'; import type React from 'react'; @@ -50,7 +50,7 @@ declare namespace NSFeedbackRating { /** Illustration element */ Illustration?: Intergalactic.Component<'svg', IllustrationProps>; /** Notice component */ - Notice?: typeof Notice; + Notice?: NSNotice.Component; }; type DefaultProps = { onSubmit: () => void; diff --git a/semcore/notice-bubble/__tests__/notice-bubble.browser-test.tsx-snapshots/-visual-Verify-Notice-not-in-portal-1-chromium-linux.png b/semcore/notice-bubble/__tests__/notice-bubble.browser-test.tsx-snapshots/-visual-Verify-Notice-not-in-portal-1-chromium-linux.png index 78061ddf11..817e99f9d9 100644 Binary files a/semcore/notice-bubble/__tests__/notice-bubble.browser-test.tsx-snapshots/-visual-Verify-Notice-not-in-portal-1-chromium-linux.png and b/semcore/notice-bubble/__tests__/notice-bubble.browser-test.tsx-snapshots/-visual-Verify-Notice-not-in-portal-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx b/semcore/notice/__tests__/notice.browser-test.tsx index f41091d80b..a3a4d32971 100644 --- a/semcore/notice/__tests__/notice.browser-test.tsx +++ b/semcore/notice/__tests__/notice.browser-test.tsx @@ -3,11 +3,15 @@ import { expect, test } from '@semcore/testing-utils/playwright'; import { loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; +const SMART_STORY = 'stories/components/notice/tests/examples/noticesmart_full_props.tsx'; + export const locators = { notice: (page: Page) => page.locator('[data-ui-name="Notice"]'), noticeSmart: (page: Page) => page.locator('[data-ui-name="NoticeSmart"]'), close: (page: Page) => page.locator('[data-ui-name="Notice.Close"]'), content: (page: Page) => page.locator('[data-ui-name="Notice.Content"]'), + icon: (page: Page) => + page.locator('[data-ui-name="Notice"] > [data-ui-name="Box"], [data-ui-name="NoticeSmart"] > [data-ui-name="Box"]'), title: (page: Page) => page.locator('[data-ui-name="Notice.Title"]'), text: (page: Page) => page.locator('[data-ui-name="Notice.Text"]'), }; @@ -46,54 +50,92 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify notice content styles', async () => { const noticeContent = locators.content(page); const title = noticeContent.first().locator('[data-ui-name="Notice.Title"]'); - await expect(title).toHaveCSS('margin-top', '2px'); - await expect(title).toHaveCSS('margin-bottom', '2px'); + await expect(title).toHaveCSS('margin-top', '4px'); + await expect(title).toHaveCSS('margin-bottom', '0px'); const text = noticeContent.first().locator('[data-ui-name="Notice.Text"]'); - await expect(text).toHaveCSS('margin-top', '4px'); - await expect(text).toHaveCSS('margin-bottom', '4px'); + await expect(text).toHaveCSS('margin-top', '6px'); + await expect(text).toHaveCSS('margin-bottom', '6px'); }); }); - test('Verify different pairs of sub-components', { + test('Verify notice with icon prop', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await loadPage(page, 'stories/components/notice/docs/examples/basic_notice.tsx', 'en'); - await test.step('Verify all notice states render correctly', async () => { - await page.setViewportSize({ width: 1600, height: 1200 }); - await expect(page).toHaveScreenshot(); + await test.step('Verify icon is rendered inside every notice', async () => { + const notices = await locators.notice(page).all(); + const icons = locators.icon(page); + + await expect(icons).toHaveCount(notices.length); + + for (const icon of await icons.all()) { + await expect(icon).toBeVisible(); + await expect(icon.locator('svg')).toBeVisible(); + } }); - }); - test('Verify notice with big illustrations', { - tag: [TAG.PRIORITY_HIGH, '@notice'], - }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_big_illustration.tsx', 'en'); + await test.step('Verify icon color depends on notice theme', async () => { + const icons = locators.icon(page); + // basic_notice.tsx order: info, muted, warning, danger, success + const [info, muted, warning, danger, success] = await Promise.all( + [0, 1, 2, 3, 4].map((index) => + icons.nth(index).evaluate((node) => getComputedStyle(node).color), + ), + ); + + expect(info).toBe(muted); + expect(new Set([info, warning, danger, success]).size).toBe(4); + }); - await test.step('Verify big illustrations display correctly', async () => { + await test.step('Verify notices with icon render correctly', async () => { await page.setViewportSize({ width: 1600, height: 1000 }); await expect(page).toHaveScreenshot(); }); }); - test('Verify notice with medium illustrations', { + test('Verify NoticeSmart media variations', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_medium_illustration.tsx', 'en'); + for (const media of ['none', 'icon', 'illustration']) { + await test.step(`Verify NoticeSmart with media set to ${media}`, async () => { + await loadPage(page, SMART_STORY, 'en', { media }); + await expect(page).toHaveScreenshot(); + }); + } + }); - await test.step('Verify medium illustrations display correctly', async () => { - await page.setViewportSize({ width: 1600, height: 1000 }); + test('Verify NoticeSmart content combinations', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify NoticeSmart without title', async () => { + await loadPage(page, SMART_STORY, 'en', { title: '' }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart without text', async () => { + await loadPage(page, SMART_STORY, 'en', { text: '' }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart without actions and close button', async () => { + await loadPage(page, SMART_STORY, 'en', { withActions: false, closable: false }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify NoticeSmart in narrow container wraps text', async () => { + await loadPage(page, SMART_STORY, 'en', { w: 320 }); await expect(page).toHaveScreenshot(); }); }); - test('Verify notice with small illustrations', { + test('Verify notice with big illustrations', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_small_illustration.tsx', 'en'); + await loadPage(page, 'stories/components/notice/tests/examples/notice_big_illustration.tsx', 'en'); - await test.step('Verify small illustrations display correctly', async () => { + await test.step('Verify big illustrations display correctly', async () => { await page.setViewportSize({ width: 1600, height: 1000 }); await expect(page).toHaveScreenshot(); }); @@ -154,40 +196,115 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { }); }); - test.describe(`Notice `, () => { - test('Verify hidden prop toggle shows and hides notice', { + test.describe(`NoticeSmart `, () => { + test('Verify hidden prop hides notice', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify notice is visible by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(page.getByTestId('smart-configurable')).toBeVisible(); + }); + + await test.step('Verify notice is not visible with hidden prop', async () => { + await loadPage(page, SMART_STORY, 'en', { hidden: true }); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); + }); + }); + + test('Verify closable prop and closing by click', { tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await test.step('Verify close button is absent when closable is false', async () => { + await loadPage(page, SMART_STORY, 'en', { closable: false }); + await expect(locators.close(page)).toHaveCount(0); + }); + + await test.step('Verify notice closes on close button click', async () => { + await loadPage(page, SMART_STORY, 'en'); + await locators.close(page).click(); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); + }); + }); + + test('Verify close button is reachable by keyboard', { + tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, '@notice'], + }, async ({ page }) => { + await loadPage(page, SMART_STORY, 'en'); + + await test.step('Verify Tab moves focus to actions and then to close button', async () => { + await page.keyboard.press('Tab'); + await expect(page.getByRole('button', { name: 'Learn more' })).toBeFocused(); - await test.step('Verify notice is initially hidden', async () => { - await expect(page.getByLabel('Toggleable notice')).not.toBeVisible(); + await page.keyboard.press('Tab'); + await expect(page.getByRole('button', { name: 'Dismiss' })).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(locators.close(page)).toBeFocused(); }); - await test.step('Verify notice becomes visible on toggle', async () => { - await page.getByTestId('toggle-btn').click(); - await expect(page.getByLabel('Toggleable notice')).toBeVisible(); + await test.step('Verify notice closes on Enter', async () => { + await page.keyboard.press('Enter'); + await expect(page.getByTestId('smart-configurable')).not.toBeVisible(); }); + }); - await test.step('Verify notice hides again on toggle', async () => { - await page.getByTestId('toggle-btn').click(); - await expect(page.getByLabel('Toggleable notice')).not.toBeVisible(); + test('Verify actions are rendered only when passed', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify actions are present by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(page.getByRole('button', { name: 'Learn more' })).toBeVisible(); + }); + + await test.step('Verify actions are absent when not passed', async () => { + await loadPage(page, SMART_STORY, 'en', { withActions: false }); + await expect(page.getByRole('button', { name: 'Learn more' })).toHaveCount(0); }); }); - test('Verify aria-live attribute passthrough', { + test('Verify title and text are rendered only when passed', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/tests/examples/notice_with_different_states.tsx', 'en'); + await test.step('Verify title and text are present by default', async () => { + await loadPage(page, SMART_STORY, 'en'); + await expect(locators.title(page)).toHaveCount(1); + await expect(locators.text(page)).toHaveCount(1); + }); - await test.step('Verify aria-live is set on notice', async () => { - const liveNotice = page.getByLabel('Live notice'); - await expect(liveNotice).toHaveAttribute('aria-live', 'polite'); + await test.step('Verify title is absent when empty', async () => { + await loadPage(page, SMART_STORY, 'en', { title: '' }); + await expect(locators.title(page)).toHaveCount(0); + await expect(locators.text(page)).toHaveCount(1); + }); + + await test.step('Verify text is absent when empty', async () => { + await loadPage(page, SMART_STORY, 'en', { text: '' }); + await expect(locators.title(page)).toHaveCount(1); + await expect(locators.text(page)).toHaveCount(0); + }); + }); + + test('Verify media element is rendered according to media prop', { + tag: [TAG.PRIORITY_HIGH, '@notice'], + }, async ({ page }) => { + await test.step('Verify only one media element is rendered for icon', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'icon' }); + await expect(locators.icon(page)).toHaveCount(1); + }); + + await test.step('Verify only one media element is rendered for illustration', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'illustration' }); + await expect(locators.icon(page)).toHaveCount(1); + }); + + await test.step('Verify no media element is rendered for none', async () => { + await loadPage(page, SMART_STORY, 'en', { media: 'none' }); + await expect(locators.icon(page)).toHaveCount(0); }); }); }); - test.describe(`NoticeSmart `, () => { + test.describe(`NoticeSmart docs example `, () => { test('Verify NoticeSmart roles and attributes', { tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { @@ -214,31 +331,34 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { } }); }); + }); - test('Verify NoticeSmart interactions', { - tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, TAG.MOUSE, '@notice'], + test.describe(`Notice illustrations `, () => { + test('Verify medium illustrations keep their default size and stay left of the content', { + tag: [TAG.PRIORITY_HIGH, '@notice'], }, async ({ page }) => { - await loadPage(page, 'stories/components/notice/docs/examples/noticesmart.tsx', 'en'); + await loadPage(page, 'stories/components/notice/tests/examples/notice_medium_illustration.tsx', 'en'); - await test.step('Verify keyboard navigation to close button', async () => { - const closes = locators.close(page); - await page.keyboard.press('Tab'); - await expect(closes.first()).toBeFocused(); + const notices = locators.notice(page); + const noticesCount = await notices.count(); + + await test.step('Verify every notice renders a single illustration', async () => { + await expect(locators.icon(page)).toHaveCount(noticesCount); }); - await test.step('Verify notices close on Enter and click', async () => { - await page.keyboard.press('Enter'); - await expect(page.getByLabel('New tool announcement')).not.toBeVisible(); + for (let index = 0; index < noticesCount; index++) { + await test.step(`Verify illustration ${index + 1} size and position`, async () => { + const illustration = locators.icon(page).nth(index); + const illustrationBox = await illustration.locator('svg').boundingBox(); + const contentBox = await locators.content(page).nth(index).boundingBox(); - await locators.close(page).first().click(); - await expect(page.getByLabel('New feature announcement')).not.toBeVisible(); - await expect(page.locator('[data-ui-name="Notice.Label"][color="muted"]')).not.toBeVisible(); - }); + // Illustrations render at their own default size, the component does not resize them + expect(illustrationBox?.width).toBeCloseTo(80, 3); + expect(illustrationBox?.height).toBeCloseTo(80, 3); + + expect(illustrationBox!.x + illustrationBox!.width).toBeLessThanOrEqual(contentBox!.x); + }); + } }); }); }); - -/* ===================================================== -@functional -Additional coverage — hidden toggle, custom theme, aria-live, muted+closable. -===================================================== */ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png index c14c9bf11f..7fe1cd2990 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png index ac4ea31fab..168ff1c825 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png index f7fdf86a8c..dc7ae725f5 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png index 7c945ecbaf..0e96c18b0c 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png index 3e57f80d67..1484068493 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png index 8f5c383087..0c0276aba7 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png index cd4fe4fb22..c9c954829a 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png index c5c46bd55a..6809b5b6d8 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png index 8a4c6c0093..4fd7e22718 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-after-mouse-and-keyboard-interactions-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png new file mode 100644 index 0000000000..5977530407 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png new file mode 100644 index 0000000000..ebdab5289a Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png new file mode 100644 index 0000000000..5ca44da7b1 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png new file mode 100644 index 0000000000..b4831a5d37 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png new file mode 100644 index 0000000000..c1a353b206 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png new file mode 100644 index 0000000000..3279706b2c Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png new file mode 100644 index 0000000000..27a38e7b89 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png new file mode 100644 index 0000000000..21e095b82c Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png new file mode 100644 index 0000000000..09b7d19373 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-3-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png new file mode 100644 index 0000000000..dd25034145 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png new file mode 100644 index 0000000000..40c0ce1108 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png new file mode 100644 index 0000000000..80db3fea34 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-content-combinations-4-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png new file mode 100644 index 0000000000..1af1ab1f69 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png new file mode 100644 index 0000000000..3f3ac906a0 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png new file mode 100644 index 0000000000..428893a431 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png new file mode 100644 index 0000000000..11278ba4f5 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png new file mode 100644 index 0000000000..343c8861a4 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png new file mode 100644 index 0000000000..974a20ec65 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-2-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png new file mode 100644 index 0000000000..447c429dfe Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png new file mode 100644 index 0000000000..379e20da23 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png new file mode 100644 index 0000000000..29fdb17689 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-NoticeSmart-media-variations-3-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png index cbf5d8b5a0..71e12afce7 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png index 03cdcd30a4..7ae3fbc99f 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png index 6e227ff10c..b3ace1c47f 100644 Binary files a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-big-illustrations-1-webkit-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png new file mode 100644 index 0000000000..060a19d4f1 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-chromium-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png new file mode 100644 index 0000000000..f587ed02f3 Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-firefox-linux.png differ diff --git a/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png new file mode 100644 index 0000000000..6dcc8445ed Binary files /dev/null and b/semcore/notice/__tests__/notice.browser-test.tsx-snapshots/-visual-Verify-notice-with-icon-prop-1-webkit-linux.png differ diff --git a/semcore/notice/package.json b/semcore/notice/package.json index 574c84dc20..6ef6607d69 100644 --- a/semcore/notice/package.json +++ b/semcore/notice/package.json @@ -33,6 +33,7 @@ "@semcore/core": "workspace:*", "@semcore/base-components": "workspace:*", "@semcore/icon": "workspace:*", + "@semcore/illustration": "workspace:*", "@semcore/testing-utils": "workspace:*" } } diff --git a/semcore/notice/src/Notice.tsx b/semcore/notice/src/Notice.tsx index b685d31d5d..75a5301918 100644 --- a/semcore/notice/src/Notice.tsx +++ b/semcore/notice/src/Notice.tsx @@ -4,7 +4,6 @@ import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; -import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance'; import logger from '@semcore/core/lib/utils/logger'; import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable'; import CloseIconM from '@semcore/icon/Close/m'; @@ -15,10 +14,6 @@ import type { NSNotice } from './Notice.type'; import style from './style/notice.shadow.css'; import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; -function isCustomTheme(theme: string) { - return !['danger', 'warning', 'success', 'info', 'muted'].includes(theme); -} - class RootNotice extends Component< Intergalactic.InternalTypings.InferComponentProps, typeof RootNotice.enhance, @@ -40,7 +35,6 @@ class RootNotice extends Component< map: Number.parseInt, prop: 'duration', }), - resolveColorEnhance(), ] as const; static defaultProps = { @@ -74,9 +68,9 @@ class RootNotice extends Component< } getLabelProps() { - const { theme, resolveColor } = this.asProps; + const { theme } = this.asProps; - return { theme, resolveColor }; + return { theme }; } getCloseIconProps() { @@ -93,9 +87,9 @@ class RootNotice extends Component< render() { const SNotice = Root; - const { Children, styles, hidden, theme, resolveColor, getI18nText } = this.asProps; - const color = resolveColor(theme); - const useTheme = isCustomTheme(theme) ? 'custom' : theme; + const SIcon = Box; + const SIllustration = Box; + const { Children, styles, hidden, theme, getI18nText, icon, illustration } = this.asProps; let ariaLabel: string | undefined = getI18nText(theme === 'danger' ? 'criticalNotification' : 'notification'); @@ -109,12 +103,16 @@ class RootNotice extends Component< + {icon !== undefined && ( + // @ts-expect-error we use theme in css-only + {icon} + )} + {illustration !== undefined && ({illustration})} , ); @@ -124,11 +122,9 @@ class RootNotice extends Component< function Label( props: Intergalactic.InternalTypings.InferChildComponentProps, ) { - const { styles, theme, resolveColor } = props; + const { styles } = props; const SLabel = Root; - const useTheme = isCustomTheme(theme) ? 'custom' : theme; - const color = resolveColor(theme); - return sstyled(styles)(); + return sstyled(styles)(); } function Title( diff --git a/semcore/notice/src/Notice.type.ts b/semcore/notice/src/Notice.type.ts index 8b300dab63..836993476b 100644 --- a/semcore/notice/src/Notice.type.ts +++ b/semcore/notice/src/Notice.type.ts @@ -1,7 +1,9 @@ import type { NSAnimation, NSBox } from '@semcore/base-components'; import type { NSButton } from '@semcore/button'; import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { Text } from '@semcore/typography'; +import type { IconProps } from '@semcore/icon'; +import type { IllustrationProps } from '@semcore/illustration'; +import type { NSText } from '@semcore/typography'; import type { LocalizedMessaged } from './translations/__intergalactic-dynamic-locales'; @@ -22,7 +24,13 @@ declare namespace NSNotice { duration?: number; /** Specifies the locale for i18n support */ locale?: string; - }; + } & ({ + icon?: React.ReactElement; + illustration?: never; + } | { + icon?: never; + illustration?: React.ReactElement; + }); type DefaultProps = { theme: 'info'; i18n: LocalizedMessaged; @@ -49,11 +57,11 @@ declare namespace NSNotice { } namespace Title { - type Component = typeof Text; + type Component = NSText.Component; } namespace Text { - type Component = typeof Text; + type Component = NSText.Component; } namespace Close { @@ -61,6 +69,9 @@ declare namespace NSNotice { } type Component = Intergalactic.Component<'div', Props, Ctx> & { + /** + * @deprecated. Use icon or illustration props instead. + */ Label: Label.Component; Actions: Actions.Component; Content: Content.Component; diff --git a/semcore/notice/src/NoticeSmart.tsx b/semcore/notice/src/NoticeSmart.tsx index 854db2ce82..1c61cf9511 100644 --- a/semcore/notice/src/NoticeSmart.tsx +++ b/semcore/notice/src/NoticeSmart.tsx @@ -1,10 +1,11 @@ import type { Intergalactic } from '@semcore/core'; -import { createComponent, Component, Root } from '@semcore/core'; +import { sstyled, createComponent, Component, Root } from '@semcore/core'; import isNode from '@semcore/core/lib/utils/isNode'; import React from 'react'; import Notice from './Notice'; import type { NSNoticeSmart } from './NoticeSmart.type'; +import style from './style/notice.shadow.css'; class NoticeSmart extends Component< Intergalactic.InternalTypings.InferComponentProps, @@ -15,17 +16,17 @@ class NoticeSmart extends Component< NSNoticeSmart.DefaultProps > { static displayName = 'NoticeSmart'; - + static style = style; static defaultProps = { theme: 'info', } as const; render() { const SNoticeSmart = Root; - const { label, title, actions, closable, onClose, text } = this.asProps; + const { label, title, actions, closable, onClose, text, styles } = this.asProps; - return ( - + return sstyled(styles)( + {isNode(label) && {label}} {isNode(title) && {title}} @@ -33,7 +34,7 @@ class NoticeSmart extends Component< {isNode(actions) && {actions}} {closable && } - + , ); } } diff --git a/semcore/notice/src/NoticeSmart.type.ts b/semcore/notice/src/NoticeSmart.type.ts index 47207575b6..f21eeebe95 100644 --- a/semcore/notice/src/NoticeSmart.type.ts +++ b/semcore/notice/src/NoticeSmart.type.ts @@ -1,11 +1,15 @@ import type { Intergalactic } from '@semcore/core'; +import type { IconProps } from '@semcore/icon'; +import type { IllustrationProps } from '@semcore/illustration'; import type { NSNotice } from './Notice.type'; declare namespace NSNoticeSmart { - type Props = NSNotice.Props & { + type Props = Omit & { /** * A custom element for additional information + * + * @deprecated. Use icon or illustration props instead. */ label?: React.ReactNode; @@ -29,7 +33,13 @@ declare namespace NSNoticeSmart { * Callback on a click on the close button */ onClose?: (event: React.SyntheticEvent) => void; - }; + } & ({ + icon?: React.ReactElement; + illustration?: never; + } | { + icon?: never; + illustration?: React.ElementType; + }); type DefaultProps = { theme: 'info'; }; diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index 7af01829c3..f7b66143ff 100644 --- a/semcore/notice/src/style/notice.shadow.css +++ b/semcore/notice/src/style/notice.shadow.css @@ -1,6 +1,6 @@ SNotice { display: flex; - padding: var(--intergalactic-spacing-4x, 16px); + padding: var(--intergalactic-spacing-content-padding-large, 16px); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); box-sizing: border-box; @@ -8,6 +8,7 @@ SNotice { border-width: 1px; border-radius: var(--intergalactic-surface-rounded, 8px); color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + gap: var(--intergalactic-spacing-content-gap-large, 8px); } SNotice[theme='info'] { @@ -82,57 +83,63 @@ SContent { SActions { flex-shrink: 0; - margin-top: var(--intergalactic-spacing-3x, 12px); + display: flex; + align-items: center; + gap: var(--intergalactic-spacing-content-gap-large, 8px); + margin-top: var(--intergalactic-spacing-content-padding-medium, 12px); } SLabel { - min-height: var(--intergalactic-form-control-m, 32px); height: fit-content; - margin-right: var(--intergalactic-spacing-2x, 8px); display: inline-flex; align-items: center; + margin-top: var(--intergalactic-spacing-content-padding-small, 8px); +} + +SIcon { + height: fit-content; + display: inline-flex; + align-items: center; + margin-top: var(--intergalactic-spacing-content-padding-small, 8px); +} + +SIllustration { + height: fit-content; + display: inline-flex; + align-items: center; + margin-right: var(--intergalactic-spacing-content-padding-xlarge, 20px); } -SLabel[theme='info'] { +SLabel[theme='info'], SIcon[theme='info'] { color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); } -SLabel[theme='danger'] { +SLabel[theme='danger'], SIcon[theme='danger'] { color: var(--intergalactic-icon-primary-critical, oklch(0.552 0.226 28.7 / 0.848)); } -SLabel[theme='warning'] { +SLabel[theme='warning'], SIcon[theme='warning'] { color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); } -SLabel[theme='success'] { +SLabel[theme='success'], SIcon[theme='success'] { color: var(--intergalactic-icon-primary-success, oklch(0.595 0.124 165.4)); } -SLabel[theme='muted'] { +SLabel[theme='muted'], SIcon[theme='muted'] { color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); } -SLabel[theme='custom'] { - color: var(--color); -} - SCloseIcon { flex-shrink: 0; - margin-left: var(--intergalactic-spacing-4x, 16px); -} - -SNotice[theme='custom'] { - background-color: var(--backgroundColor); - border-color: var(--backgroundColor); + margin-left: var(--intergalactic-spacing-content-padding-large, 16px); } STitle { - margin-top: var(--intergalactic-spacing-05x, 2px); - margin-bottom: var(--intergalactic-spacing-05x, 2px); + margin-top: var(--intergalactic-spacing-content-padding-xsmall, 4px); } SText { - margin-top: var(--intergalactic-spacing-1x, 4px); - margin-bottom: var(--intergalactic-spacing-1x, 4px); + margin-top: var(--intergalactic-spacing-content-padding-xsmall-extended, 6px); + margin-bottom: var(--intergalactic-spacing-content-padding-xsmall-extended, 6px); } diff --git a/semcore/select/__tests__/select.browser-test.tsx-snapshots/-visual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png b/semcore/select/__tests__/select.browser-test.tsx-snapshots/-visual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png index 1dd3c4c03e..bb93dd0aec 100644 Binary files a/semcore/select/__tests__/select.browser-test.tsx-snapshots/-visual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png and b/semcore/select/__tests__/select.browser-test.tsx-snapshots/-visual-Verify-select-with-notice-without-focusable-elements-1-chromium-linux.png differ diff --git a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx index 8f01e80afa..69e67657aa 100644 --- a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx @@ -2,6 +2,7 @@ import WarningIcon from '@semcore/icon/Warning/m'; import { Flex } from '@semcore/ui/base-components'; import { DateRangeComparator } from '@semcore/ui/date-picker'; import Dropdown from '@semcore/ui/dropdown'; +import { Text } from '@semcore/ui/typography'; import React from 'react'; const Demo = () => { @@ -44,18 +45,18 @@ const Demo = () => { - Place for a hint, useful message or controls. + + Place for a hint, useful message or controls. + } > - - - Warning diff --git a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx index b69a970a07..a318471d03 100644 --- a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx @@ -2,6 +2,7 @@ import WarningIcon from '@semcore/icon/Warning/m'; import { Flex } from '@semcore/ui/base-components'; import { MonthDateRangeComparator } from '@semcore/ui/date-picker'; import Dropdown from '@semcore/ui/dropdown'; +import { Text } from '@semcore/ui/typography'; import React from 'react'; const Demo = () => { @@ -44,18 +45,18 @@ const Demo = () => { - Place for a hint, useful message or controls. + + Place for a hint, useful message or controls. + } > - - - Warning diff --git a/stories/components/feature-highlight/tests/examples/notice/notice.tsx b/stories/components/feature-highlight/tests/examples/notice/notice.tsx index 5127d96694..a0c9fa1b97 100644 --- a/stories/components/feature-highlight/tests/examples/notice/notice.tsx +++ b/stories/components/feature-highlight/tests/examples/notice/notice.tsx @@ -1,3 +1,4 @@ +import type { Intergalactic } from '@semcore/core'; import SummaryAI from '@semcore/icon/SummaryAI/m'; import MailSent from '@semcore/illustration/MailSent'; import { Flex } from '@semcore/ui/base-components'; @@ -6,7 +7,7 @@ import type { NSNotice } from '@semcore/ui/notice'; import { Text } from '@semcore/ui/typography'; import React from 'react'; -export type NoticeFHAdvancedProps = NSNotice.Props & { +export type NoticeFHAdvancedProps = Intergalactic.InternalTypings.EfficientOmit & { noticeText?: string; showTitle?: boolean; titleText?: string; diff --git a/stories/components/notice/docs/examples/basic_notice.tsx b/stories/components/notice/docs/examples/basic_notice.tsx index 354d9fa51f..97c1ae69b7 100644 --- a/stories/components/notice/docs/examples/basic_notice.tsx +++ b/stories/components/notice/docs/examples/basic_notice.tsx @@ -7,12 +7,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> New keyboard shortcuts are available @@ -22,7 +18,7 @@ const Demo = () => ( - @@ -31,11 +27,7 @@ const Demo = () => ( - - - - - + }> Data export is in progress @@ -45,7 +37,7 @@ const Demo = () => ( - @@ -54,11 +46,7 @@ const Demo = () => ( - - - - - + }> Payment method expires soon @@ -68,7 +56,7 @@ const Demo = () => ( - @@ -77,11 +65,7 @@ const Demo = () => ( - - - - - + }> API request limit reached @@ -91,7 +75,7 @@ const Demo = () => ( - @@ -100,11 +84,7 @@ const Demo = () => ( - - - - - + }> Backup completed successfully @@ -114,7 +94,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/docs/examples/custom_notice.tsx b/stories/components/notice/docs/examples/custom_notice.tsx index ca9289efc6..a8fe789917 100644 --- a/stories/components/notice/docs/examples/custom_notice.tsx +++ b/stories/components/notice/docs/examples/custom_notice.tsx @@ -4,10 +4,7 @@ import Notice, { type NSNotice } from '@semcore/ui/notice'; import React from 'react'; const Demo = (props: NSNotice.Props) => ( - - - - + } illustration={undefined}> Strategize your next move with daily and weekly traffic data diff --git a/stories/components/notice/docs/examples/noticesmart.tsx b/stories/components/notice/docs/examples/noticesmart.tsx index 6083037a03..1ce15e3dc8 100644 --- a/stories/components/notice/docs/examples/noticesmart.tsx +++ b/stories/components/notice/docs/examples/noticesmart.tsx @@ -13,7 +13,7 @@ const Demo = () => { return ( } + icon={} aria-label='New tool announcement' closable onClose={() => setFirstHidden(true)} @@ -25,7 +25,7 @@ const Demo = () => { } + icon={} title="We've released a cool new feature!" closable onClose={() => setSecondHidden(true)} @@ -40,7 +40,7 @@ const Demo = () => { } + icon={} aria-label='Maintenance notice' text='Starting new campaigns is temporarily unavailable, but you can continue working with your existing Link Building campaigns.' /> diff --git a/stories/components/notice/tests/Notice.stories.tsx b/stories/components/notice/tests/Notice.stories.tsx index aff2592fa3..807a3b8ee8 100644 --- a/stories/components/notice/tests/Notice.stories.tsx +++ b/stories/components/notice/tests/Notice.stories.tsx @@ -2,8 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import NoticeBigIllustrationExample from './examples/notice_big_illustration'; import NoticeMediumIllustrationExample from './examples/notice_medium_illustration'; -import NoticeSmallIllustrationExample from './examples/notice_small_illustration'; -import NoticeStatesExample from './examples/notice_with_different_states'; +import NoticeSmartFullPropsExample, { defaultNoticeSmartProps } from './examples/noticesmart_full_props'; const meta: Meta = { title: 'Components/Notice/Tests', @@ -14,14 +13,37 @@ export const NoticeMediumIllustration: StoryObj = { render: NoticeMediumIllustrationExample, }; -export const NoticeSmallIllustration: StoryObj = { - render: NoticeSmallIllustrationExample, -}; - export const NoticeBigIllustration: StoryObj = { render: NoticeBigIllustrationExample, }; -export const NoticeStates: StoryObj = { - render: NoticeStatesExample, +const noticeSmartArgTypes = { + theme: { + control: { type: 'select' }, + options: ['info', 'muted', 'warning', 'danger', 'success'], + }, + media: { + control: { type: 'inline-radio' }, + options: ['none', 'icon', 'illustration'], + description: 'icon and illustration are mutually exclusive, so they share one control', + }, + icon: { + control: { type: 'select' }, + options: ['Info', 'ThumbUp', 'Question'], + description: 'Applied when media is set to icon', + }, + withActions: { control: { type: 'boolean' } }, + closable: { control: { type: 'boolean' } }, + hidden: { control: { type: 'boolean' } }, + title: { control: { type: 'text' }, description: 'Empty value removes the title' }, + text: { control: { type: 'text' }, description: 'Empty value removes the text' }, + w: { control: { type: 'number' }, description: 'Notice width, px' }, + duration: { control: { type: 'number' }, description: 'Animation duration, ms' }, + locale: { control: { type: 'select' }, options: ['en', 'es'] }, +} as const; + +export const NoticeSmartFullProps: StoryObj = { + render: NoticeSmartFullPropsExample, + argTypes: noticeSmartArgTypes, + args: defaultNoticeSmartProps, }; diff --git a/stories/components/notice/tests/examples/notice_big_illustration.tsx b/stories/components/notice/tests/examples/notice_big_illustration.tsx index efbd292aa9..0c048b1ebe 100644 --- a/stories/components/notice/tests/examples/notice_big_illustration.tsx +++ b/stories/components/notice/tests/examples/notice_big_illustration.tsx @@ -6,12 +6,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> Your subscription has expired @@ -21,7 +17,7 @@ const Demo = () => ( - @@ -30,11 +26,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -44,7 +36,7 @@ const Demo = () => ( - @@ -53,11 +45,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -70,7 +58,7 @@ const Demo = () => ( - @@ -79,11 +67,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -96,7 +80,7 @@ const Demo = () => ( - @@ -105,11 +89,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -119,7 +99,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/tests/examples/notice_medium_illustration.tsx b/stories/components/notice/tests/examples/notice_medium_illustration.tsx index b89a6ea303..ee023a3d05 100644 --- a/stories/components/notice/tests/examples/notice_medium_illustration.tsx +++ b/stories/components/notice/tests/examples/notice_medium_illustration.tsx @@ -6,12 +6,8 @@ import Notice from '@semcore/ui/notice'; import React from 'react'; const Demo = () => ( - - - - - - + + }> Your subscription has expired @@ -21,7 +17,7 @@ const Demo = () => ( - @@ -30,11 +26,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -44,7 +36,7 @@ const Demo = () => ( - @@ -53,11 +45,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -70,7 +58,7 @@ const Demo = () => ( - @@ -79,11 +67,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -96,7 +80,7 @@ const Demo = () => ( - @@ -105,11 +89,7 @@ const Demo = () => ( - - - - - + }> Your subscription has expired @@ -119,7 +99,7 @@ const Demo = () => ( - diff --git a/stories/components/notice/tests/examples/notice_small_illustration.tsx b/stories/components/notice/tests/examples/notice_small_illustration.tsx deleted file mode 100644 index b0f651b951..0000000000 --- a/stories/components/notice/tests/examples/notice_small_illustration.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import Coffee from '@semcore/illustration/Coffee'; -import MailSent from '@semcore/illustration/MailSent'; -import { Flex } from '@semcore/ui/base-components'; -import Button from '@semcore/ui/button'; -import Notice from '@semcore/ui/notice'; -import React from 'react'; - -const Demo = () => ( - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription.Please tell us how to improve - something. 49 out of your Star Wars: The Force Awakens shattered box office records upon - its debut becoming the biggest film of all time in. The reports are based on the data from - the Russian Federation and the CIS. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription.Please tell us how to improve - something. 49 out of your Star Wars: The Force Awakens shattered box office records upon - its debut becoming the biggest film of all time in. The reports are based on the data from - the Russian Federation and the CIS. - - - - - - - - - - - - - - - - - Your subscription has expired - - - 49 out of your 50 projects are now locked. They will be deleted in 7 days (on August 22). - To unlock your projects, please upgrade your subscription. - - - - - - - - - - -); - -export default Demo; diff --git a/stories/components/notice/tests/examples/notice_with_different_states.tsx b/stories/components/notice/tests/examples/notice_with_different_states.tsx deleted file mode 100644 index dce555e50e..0000000000 --- a/stories/components/notice/tests/examples/notice_with_different_states.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import AlertM from '@semcore/icon/Book/m'; -import InfoM from '@semcore/icon/Info/m'; -import ThumbUpM from '@semcore/icon/ThumbUp/m'; -import WarningM from '@semcore/icon/Warning/m'; -import { Flex } from '@semcore/ui/base-components'; -import Button from '@semcore/ui/button'; -import Notice, { NoticeSmart } from '@semcore/ui/notice'; -import React from 'react'; - -const NoticeSmokeDemo = () => { - const [hidden, setHidden] = React.useState(true); - - return ( - - {/* 1. Minimal Notice */} - - - This is an info notice - - - - {/* 2. Full Featured Notice */} - - - - - - Success! - Everything worked just fine. - - - - - - - - - {/* 3. Title only + Close */} - - - Pay attention - - - - - {/* 4. Icon + Text only */} - - - - - - Something went wrong. - - - - {/* 5. Actions only */} - - - - - - - - - {/* 6. No Content (edge case) */} - - - - - - - - {/* 7. Long text, layout check */} - - - - This is a very long message that should ideally wrap and not break layout or overflow. - - - - - {/* 8. Aria-live announcement */} - - - We'll notify you when it's ready. - - - - {/* 9. Custom theme with color string */} - - Purple - - - Text Notice - - - - - - {/* 10. Duration prop */} - - Duration - - Text Notice - - - - - {/* 11. Hidden toggle */} -
- - -
- - {/* 12. NoticeSmart muted + closable */} - } - text='Muted closable notice' - closable - data-testid='muted-closable' - /> - - {/* 13. NoticeSmart with actions only */} - Retry action} - data-testid='actions-only' - /> - - ); -}; - -export default NoticeSmokeDemo; diff --git a/stories/components/notice/tests/examples/noticesmart_full_props.tsx b/stories/components/notice/tests/examples/noticesmart_full_props.tsx new file mode 100644 index 0000000000..15a8dc9bb8 --- /dev/null +++ b/stories/components/notice/tests/examples/noticesmart_full_props.tsx @@ -0,0 +1,83 @@ +import InfoM from '@semcore/icon/Info/m'; +import QuestionM from '@semcore/icon/Question/m'; +import ThumbUpM from '@semcore/icon/ThumbUp/m'; +import Coffee from '@semcore/illustration/Coffee'; +import { Flex } from '@semcore/ui/base-components'; +import Button from '@semcore/ui/button'; +import { NoticeSmart } from '@semcore/ui/notice'; +import type { NSNoticeSmart } from '@semcore/ui/notice'; +import React from 'react'; + +type Media = 'none' | 'icon' | 'illustration'; +type IconName = 'Info' | 'ThumbUp' | 'Question'; + +type ExampleProps = Omit & { + /** icon and illustration are mutually exclusive, so one control drives both */ + media: Media; + icon: IconName; + withActions: boolean; +}; + +const ICONS = { Info: InfoM, ThumbUp: ThumbUpM, Question: QuestionM }; + +const mediaProps = (media: Media, iconName: IconName) => { + if (media === 'icon') { + const Icon = ICONS[iconName]; + + return { icon: }; + } + + if (media === 'illustration') { + return { illustration: }; + } + + return {}; +}; + +const Demo = (props: ExampleProps) => { + const { media, icon, withActions, theme, title, text, closable, hidden, duration, locale, w } = props; + const [closed, setClosed] = React.useState(false); + + React.useEffect(() => setClosed(false), [closable, hidden, media, theme]); + + return ( + + + ); +}; + +export const defaultNoticeSmartProps: ExampleProps = { + theme: 'info', + media: 'icon', + icon: 'Info', + withActions: true, + closable: true, + hidden: false, + title: 'New tool was launched', + text: 'Hi there! A cool new tool was launched. Take a look at what it can do for your reports.', +}; + +Demo.defaultProps = defaultNoticeSmartProps; +export default Demo; diff --git a/website/docs/components/notice/notice.md b/website/docs/components/notice/notice.md index 181d00b36e..8211f9f67b 100644 --- a/website/docs/components/notice/notice.md +++ b/website/docs/components/notice/notice.md @@ -28,12 +28,10 @@ Table: Comparison table of criteria for Notice and NoticeBubble ## Component composition -![](static/notice-composition.png) - -Component consists of the following: +![](static/notice-composition.png){style="width: 65%; float: right"} 1. `Notice.Content`. -2. `Notice.Label` (optional). It can be an [icon](/style/icon/icon), [badge](/components/badge/badge) or illustration that accompanies the message. +2. `Notice.Label` (optional). [Icon](/style/icon/icon), [badge](/components/badge/badge) or [illustration](../../style/illustration/illustration) that accompanies the message. 3. `Notice.Close` (optional). 4. `Notice.Title` (optional). 5. `Notice.Text`. diff --git a/website/docs/components/notice/static/notice-composition.png b/website/docs/components/notice/static/notice-composition.png index 580fc9618c..0a273e6a2f 100644 Binary files a/website/docs/components/notice/static/notice-composition.png and b/website/docs/components/notice/static/notice-composition.png differ diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index f0f0ef6f96..850deab7fd 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3321,7 +3321,6 @@ "color-picker", "input", "input-tags", - "notice", "pills", "tab-line", "tab-panel", @@ -3368,6 +3367,7 @@ "dropdown", "dropdown-menu", "input-tags", + "notice", "pills", "wizard" ] @@ -3378,6 +3378,7 @@ "description": "Extended extra small padding for content inside controls and surfaces.", "components": [ "counter", + "notice", "pills" ] }, @@ -3391,6 +3392,7 @@ "dropdown", "fullscreen-modal", "modal", + "notice", "pills", "typography", "wizard" @@ -3411,6 +3413,7 @@ "input", "input-tags", "modal", + "notice", "pills", "tab-panel", "textarea", @@ -3429,6 +3432,7 @@ "color-picker", "feature-popover", "fullscreen-modal", + "notice", "notice-bubble", "typography", "wizard" @@ -3441,6 +3445,7 @@ "components": [ "bulk-textarea", "card", + "notice", "wizard" ] }, @@ -3521,6 +3526,7 @@ "date-picker", "dropdown", "fullscreen-modal", + "notice", "notice-bubble", "pagination", "radio",