From b2fa1be6f5e6b3e856f3b0cbf06647bc2bfc5d47 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Thu, 9 Jan 2025 15:43:39 -0800 Subject: [PATCH 1/8] Banner and Notification components update --- .changeset/five-ties-swim.md | 5 ++ .changeset/funny-seahorses-beam.md | 5 ++ css/src/components/banner.scss | 72 +++++++++++++++++---- css/src/components/notification.scss | 66 ++++++++++--------- site/src/components/banner.md | 55 +++++++++++++++- site/src/components/notification.md | 36 +++++++---- site/src/patterns/banner.md | 82 +++++++++++++++++++++++ site/src/patterns/notification.md | 97 ++++++++++++++++++++++++++++ 8 files changed, 360 insertions(+), 58 deletions(-) create mode 100644 .changeset/five-ties-swim.md create mode 100644 .changeset/funny-seahorses-beam.md create mode 100644 site/src/patterns/banner.md create mode 100644 site/src/patterns/notification.md diff --git a/.changeset/five-ties-swim.md b/.changeset/five-ties-swim.md new file mode 100644 index 000000000..7bcc496d7 --- /dev/null +++ b/.changeset/five-ties-swim.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-site': minor +--- + +Updating banner and notification components documentation and creating pattern pages for them. diff --git a/.changeset/funny-seahorses-beam.md b/.changeset/funny-seahorses-beam.md new file mode 100644 index 000000000..3d18849b4 --- /dev/null +++ b/.changeset/funny-seahorses-beam.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-css': major +--- + +Updating banner and notification components. diff --git a/css/src/components/banner.scss b/css/src/components/banner.scss index 5cd0b12b5..0eca0fdf1 100644 --- a/css/src/components/banner.scss +++ b/css/src/components/banner.scss @@ -1,31 +1,57 @@ -$banner-background: $info-background !default; -$banner-padding: $spacer-5 !default; +// $banner-background: $info-background !default; +$banner-background: $secondary-background !default; +$banner-padding: $spacer-3 !default; -$banner-font-size: $font-size-7 !default; -$banner-color: $info-dark !default; +$banner-font-size: $font-size-8 !default; +$banner-color: $text !default; -$banner-border-color: $border-white-high-contrast !default; +$banner-button-font-size: $font-size-9 !default; + +$banner-border-color: $control-border !default; $banner-border-width: $border-width !default; $banner-dismiss-margin: $spacer-2 !default; +$banner-icon-inline-spacing: 0.75em !default; +$banner-icon-block-spacing: 0.2em !default; + .banner { @extend %layout-gap; display: grid; position: relative; - grid-template: auto / 1fr auto; - grid-template-areas: 'banner-content dismiss'; + align-items: flex-start; outline-color: $text; background-color: $banner-background; color: $banner-color; font-size: $banner-font-size; line-height: $line-height-normal; + grid-template: auto / auto 1fr auto; + grid-template-areas: 'icon banner-content dismiss'; padding-block: $banner-padding; word-wrap: break-word; word-break: break-word; border-block: $banner-border-width solid $banner-border-color; + @each $name, $color-set in $colors { + $base: nth($color-set, $color-index-base); + $dark: nth($color-set, $color-index-dark); + $background: nth($color-set, $color-index-background); + + &.banner-#{$name} { + border-color: $dark; + background-color: $background; + + &.is-loading::before { + border-color: transparent transparent $dark $dark; + } + + .banner-icon { + color: $dark; + } + } + } + &.is-loading { color: transparent; @@ -50,25 +76,43 @@ $banner-dismiss-margin: $spacer-2 !default; .banner-content { grid-area: banner-content; - a:not(.button) { - color: currentColor; + .banner-title { font-weight: $weight-semibold; - text-decoration: underline; + margin-inline-end: $banner-icon-inline-spacing; + } - .theme-high-contrast & { - color: $hyperlink; - } + a:not(.button) { + text-decoration: underline; &:hover { text-decoration-thickness: 0.15em; } } + + .button { + font-size: $banner-button-font-size; + } + + p { + max-width: $reading-max-width; + } + } + + .banner-icon { + grid-area: icon; + flex-shrink: 0; + margin-inline-end: $banner-icon-inline-spacing; } .banner-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $banner-dismiss-margin; + margin-inline-start: $banner-icon-inline-spacing; + } + + .banner-icon, + .banner-dismiss { + margin-block-start: $banner-icon-block-spacing; } } diff --git a/css/src/components/notification.scss b/css/src/components/notification.scss index 537579140..72651b584 100644 --- a/css/src/components/notification.scss +++ b/css/src/components/notification.scss @@ -1,24 +1,23 @@ $notification-background: $secondary-background !default; -$notification-padding: $spacer-5 !default; +$notification-padding-vertical: 0.5em !default; +$notification-padding-horizontal: 0.75em !default; -$notification-font-size: $font-size-7 !default; +$notification-font-size: $font-size-8 !default; $notification-color: $text !default; +$notification-button-font-size: $font-size-9 !default; + $notification-border-color: $control-border !default; $notification-border-width: $border-width !default; $notification-border-radius: $border-radius !default; -$notification-icon-inline-spacing: 0.375em !default; +$notification-icon-inline-spacing: 0.75em !default; $notification-icon-block-spacing: 0.2em !default; -$notification-dismiss-margin: $spacer-2 !default; - .notification { display: grid; position: relative; - padding: $notification-padding; - grid-template: auto / 1fr auto; - grid-template-areas: 'notification-content dismiss'; + align-items: flex-start; border: $notification-border-width solid $notification-border-color; border-radius: $notification-border-radius; outline-color: $text; @@ -26,6 +25,10 @@ $notification-dismiss-margin: $spacer-2 !default; color: $notification-color; font-size: $notification-font-size; line-height: $line-height-normal; + padding-inline: $notification-padding-horizontal; + padding-block: $notification-padding-vertical; + grid-template: auto / auto 1fr auto; + grid-template-areas: 'icon notification-content dismiss'; word-wrap: break-word; word-break: break-word; @@ -37,11 +40,14 @@ $notification-dismiss-margin: $spacer-2 !default; &.notification-#{$name} { border-color: $dark; background-color: $background; - color: $dark; &.is-loading::before { border-color: transparent transparent $dark $dark; } + + .notification-icon { + color: $dark; + } } } @@ -49,15 +55,15 @@ $notification-dismiss-margin: $spacer-2 !default; color: transparent; > :first-child { - margin-inline-start: calc($notification-padding + 0.375em); + margin-inline-start: calc($notification-padding-vertical + 0.375em); } &::before { @include loader; position: absolute; - inset-block-start: $notification-padding; - inset-inline-start: $notification-padding; + inset-block-start: $notification-padding-vertical; + inset-inline-start: $notification-padding-horizontal; border-color: transparent transparent $notification-color $notification-color; } } @@ -65,43 +71,39 @@ $notification-dismiss-margin: $spacer-2 !default; .notification-content { grid-area: notification-content; - .notification-title, - a:not(.button) { - color: currentColor; + .notification-title { font-weight: $weight-semibold; + margin-inline-end: $notification-icon-inline-spacing; } a:not(.button) { text-decoration: underline; - .theme-high-contrast & { - color: $hyperlink; - } - &:hover { text-decoration-thickness: 0.15em; } } - .notification-title { - display: flex; - align-items: center; - justify-content: flex-start; - margin-block-end: $layout-1; - - .icon { - flex-shrink: 0; - align-self: start; - margin-inline-end: $notification-icon-inline-spacing; - margin-block-start: $notification-icon-block-spacing; - } + .button { + font-size: $notification-button-font-size; } } + .notification-icon { + grid-area: icon; + flex-shrink: 0; + margin-inline-end: $notification-icon-inline-spacing; + } + .notification-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $notification-dismiss-margin; + margin-inline-start: $notification-icon-inline-spacing; + } + + .notification-icon, + .notification-dismiss { + margin-block-start: $notification-icon-block-spacing; } } diff --git a/site/src/components/banner.md b/site/src/components/banner.md index 165217cb6..56dbaa27c 100644 --- a/site/src/components/banner.md +++ b/site/src/components/banner.md @@ -2,7 +2,6 @@ title: Banner description: The Banner component in the Atlas Design System template: standard -figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D35687%253A253899%26t%3DMgxlZCy8on3CKZ9O-1 classType: Component classPrefixes: - banner @@ -26,6 +25,42 @@ Here is an example of a standard usage of banner component. ``` +### Banner with title + +You can add a title to the banner. + +```html + +``` + +### Banner with icon + +You can add an icon to the banner in front of the main content. + +```html + +``` + ### Loading banner Ensure the user knows they need to wait for some event in order to interact with a banner. @@ -64,3 +99,21 @@ Banner can be made dismissable with the [`dismiss` component](./dismiss.md). ``` + +## Semantic colors + +| State | Class | Example | +| ------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| Default | `.banner` | | +| Success | `.banner .banner-success` | | +| Danger | `.banner .banner-danger` | | +| Warning | `.banner .banner-warning` | | +| Info | `.banner .banner-info` | | + +```html-no-indent + +``` diff --git a/site/src/components/notification.md b/site/src/components/notification.md index f1c5a6198..87b1c785c 100644 --- a/site/src/components/notification.md +++ b/site/src/components/notification.md @@ -2,7 +2,6 @@ title: Notification description: The Notification component in the Atlas Design System template: standard -figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D1002%253A7106%26t%3DWU64bU98uaT1nU7A-1 classType: Component classPrefixes: - notification @@ -26,21 +25,35 @@ Here is an example of a standard usage of notification component. ### Notification with title -You can add a title to the notification with an optional icon. +You can add a title to the notification. ```html
-

- - Title +

+ Descriptive title + A notification about something happening in the world Link

+
+
+``` + +### Notification with icon + +You can add an icon to the notification in front of the main content. + +```html +
+ + + +

A notification about something happening in the world Link

@@ -92,6 +105,7 @@ Notification can be made dismissable with the [`dismiss` component](./dismiss.md | Default | `.notification` |

Default notification Link

| | Success | `.notification .notification-success` |

Success notification Link

| | Danger | `.notification .notification-danger` |

Danger notification Link

| +| Warning | `.notification .notification-warning` |

Warning notification Link

| | Info | `.notification .notification-info` |

Informational notification Link

| | Primary | `.notification .notification-primary` |

Primary notification Link

| diff --git a/site/src/patterns/banner.md b/site/src/patterns/banner.md new file mode 100644 index 000000000..ae02adc21 --- /dev/null +++ b/site/src/patterns/banner.md @@ -0,0 +1,82 @@ +--- +title: Banner +description: Banner patterns in the Atlas Design System +template: standard +--- + +# Banner patterns + +This page showcases some of the common combinations that might be used with the banner component. For component documentation, [visit the banner component page](../components/banner.md). + +**This page is best viewed with the content section full screened because heroes are intended to be full width elements. Go full screen by clicking the button in the top right corner.** + +## Banner with CTA + +Banner with an action button. + +```html-no-indent + +``` + +Banner with a few buttons and a longer paragraph. + +```html-no-indent + +``` diff --git a/site/src/patterns/notification.md b/site/src/patterns/notification.md new file mode 100644 index 000000000..72c746728 --- /dev/null +++ b/site/src/patterns/notification.md @@ -0,0 +1,97 @@ +--- +title: Notification +description: Notification patterns in the Atlas Design System +template: standard +--- + +# Notification patterns + +This page showcases some of the common combinations that might be used with the notification component. For component documentation, [visit the notification component page](../components/notification.md). + +## Notification with CTA + +Notification with an action button. + +```html +
+ + + +
+
+

+ Descriptive title A notification about something + happening in the world. +

+ +
+
+ +
+``` + +Notification with a few buttons and a longer paragraph. + +```html +
+ + + +
+
+

+ Descriptive title A notification about something + happening in the world. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+ + +
+
+
+ +
+``` From 2249c16ee5ec71dc1e3f6fae3ae69e894986a548 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Thu, 9 Jan 2025 15:53:12 -0800 Subject: [PATCH 2/8] Adding pattern pages to a11y list --- integration/tests/accessibility.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/integration/tests/accessibility.spec.ts b/integration/tests/accessibility.spec.ts index b787a3a4e..c76c031b5 100644 --- a/integration/tests/accessibility.spec.ts +++ b/integration/tests/accessibility.spec.ts @@ -58,6 +58,8 @@ const pathnames = [ '/patterns/article-header.html', '/patterns/chat.html', '/patterns/thread-history.html', + '/patterns/banner.html', + '/patterns/notification.html', '/tokens/overview.html', '/tokens/animation.html', '/tokens/border.html', From 6e158d0affd068100eb9a310fc0037636fab4c35 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Fri, 10 Jan 2025 14:09:35 -0800 Subject: [PATCH 3/8] Refactoring --- css/src/components/banner.scss | 25 +++++++++++-------------- css/src/components/notification.scss | 28 ++++++++++++++-------------- site/src/components/banner.md | 26 +++++++++++--------------- site/src/components/notification.md | 16 ++++++++-------- site/src/patterns/banner.md | 4 ++-- site/src/patterns/notification.md | 6 ++---- 6 files changed, 48 insertions(+), 57 deletions(-) diff --git a/css/src/components/banner.scss b/css/src/components/banner.scss index 0eca0fdf1..50379f8c6 100644 --- a/css/src/components/banner.scss +++ b/css/src/components/banner.scss @@ -1,20 +1,17 @@ -// $banner-background: $info-background !default; $banner-background: $secondary-background !default; -$banner-padding: $spacer-3 !default; +$banner-padding-block: 0.75em !default; + +$banner-gap: $spacer-3 !default; +$banner-icon-block-spacing: 0.2em !default; -$banner-font-size: $font-size-8 !default; $banner-color: $text !default; +$banner-font-size: $font-size-8 !default; $banner-button-font-size: $font-size-9 !default; $banner-border-color: $control-border !default; $banner-border-width: $border-width !default; -$banner-dismiss-margin: $spacer-2 !default; - -$banner-icon-inline-spacing: 0.75em !default; -$banner-icon-block-spacing: 0.2em !default; - .banner { @extend %layout-gap; @@ -28,7 +25,7 @@ $banner-icon-block-spacing: 0.2em !default; line-height: $line-height-normal; grid-template: auto / auto 1fr auto; grid-template-areas: 'icon banner-content dismiss'; - padding-block: $banner-padding; + padding-block: $banner-padding-block; word-wrap: break-word; word-break: break-word; border-block: $banner-border-width solid $banner-border-color; @@ -56,14 +53,14 @@ $banner-icon-block-spacing: 0.2em !default; color: transparent; > :first-child { - margin-inline-start: calc($banner-padding + 0.375em); + margin-inline-start: 1.75em; } &::before { @include loader; position: absolute; - inset-block-start: $banner-padding; + inset-block-start: $banner-padding-block; inset-inline-start: $layout-gap; border-color: transparent transparent $banner-color $banner-color; @@ -78,7 +75,7 @@ $banner-icon-block-spacing: 0.2em !default; .banner-title { font-weight: $weight-semibold; - margin-inline-end: $banner-icon-inline-spacing; + margin-inline-end: $banner-gap; } a:not(.button) { @@ -101,14 +98,14 @@ $banner-icon-block-spacing: 0.2em !default; .banner-icon { grid-area: icon; flex-shrink: 0; - margin-inline-end: $banner-icon-inline-spacing; + margin-inline-end: $banner-gap; } .banner-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $banner-icon-inline-spacing; + margin-inline-start: $banner-gap; } .banner-icon, diff --git a/css/src/components/notification.scss b/css/src/components/notification.scss index 72651b584..2817142cc 100644 --- a/css/src/components/notification.scss +++ b/css/src/components/notification.scss @@ -1,9 +1,12 @@ $notification-background: $secondary-background !default; -$notification-padding-vertical: 0.5em !default; -$notification-padding-horizontal: 0.75em !default; +$notification-padding-block: 0.75em !default; +$notification-padding-inline: 0.85em !default; + +$notification-gap: $spacer-3 !default; +$notification-icon-block-spacing: 0.2em !default; -$notification-font-size: $font-size-8 !default; $notification-color: $text !default; +$notification-font-size: $font-size-8 !default; $notification-button-font-size: $font-size-9 !default; @@ -11,9 +14,6 @@ $notification-border-color: $control-border !default; $notification-border-width: $border-width !default; $notification-border-radius: $border-radius !default; -$notification-icon-inline-spacing: 0.75em !default; -$notification-icon-block-spacing: 0.2em !default; - .notification { display: grid; position: relative; @@ -25,8 +25,8 @@ $notification-icon-block-spacing: 0.2em !default; color: $notification-color; font-size: $notification-font-size; line-height: $line-height-normal; - padding-inline: $notification-padding-horizontal; - padding-block: $notification-padding-vertical; + padding-inline: $notification-padding-inline; + padding-block: $notification-padding-block; grid-template: auto / auto 1fr auto; grid-template-areas: 'icon notification-content dismiss'; word-wrap: break-word; @@ -55,15 +55,15 @@ $notification-icon-block-spacing: 0.2em !default; color: transparent; > :first-child { - margin-inline-start: calc($notification-padding-vertical + 0.375em); + margin-inline-start: 1.75em; } &::before { @include loader; position: absolute; - inset-block-start: $notification-padding-vertical; - inset-inline-start: $notification-padding-horizontal; + inset-block-start: $notification-padding-block; + inset-inline-start: $notification-padding-inline; border-color: transparent transparent $notification-color $notification-color; } } @@ -73,7 +73,7 @@ $notification-icon-block-spacing: 0.2em !default; .notification-title { font-weight: $weight-semibold; - margin-inline-end: $notification-icon-inline-spacing; + margin-inline-end: $notification-gap; } a:not(.button) { @@ -92,14 +92,14 @@ $notification-icon-block-spacing: 0.2em !default; .notification-icon { grid-area: icon; flex-shrink: 0; - margin-inline-end: $notification-icon-inline-spacing; + margin-inline-end: $notification-gap; } .notification-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $notification-icon-inline-spacing; + margin-inline-start: $notification-gap; } .notification-icon, diff --git a/site/src/components/banner.md b/site/src/components/banner.md index 56dbaa27c..7117ad3ee 100644 --- a/site/src/components/banner.md +++ b/site/src/components/banner.md @@ -29,7 +29,7 @@ Here is an example of a standard usage of banner component. You can add a title to the banner. -```html +```html-no-indent