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/.changeset/wild-pants-wave.md b/.changeset/wild-pants-wave.md new file mode 100644 index 000000000..aca604a61 --- /dev/null +++ b/.changeset/wild-pants-wave.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-css': patch +--- + +Refactoring .buttons diff --git a/css/src/components/banner.scss b/css/src/components/banner.scss index 5cd0b12b5..3d00cea87 100644 --- a/css/src/components/banner.scss +++ b/css/src/components/banner.scss @@ -1,74 +1,118 @@ -$banner-background: $info-background !default; -$banner-padding: $spacer-5 !default; +$banner-min-height: 50px !default; +$banner-background: $secondary-background !default; +$banner-padding-block: 0.75em !default; -$banner-font-size: $font-size-7 !default; -$banner-color: $info-dark !default; +$banner-gap: $spacer-3 !default; -$banner-border-color: $border-white-high-contrast !default; -$banner-border-width: $border-width !default; +$banner-icon-size: 1.145em !default; +$banner-icon-block-spacing: 0.35em !default; + +$banner-content-block-spacing: 0.3em !default; + +$banner-color: $text !default; +$banner-font-size: $font-size-8 !default; -$banner-dismiss-margin: $spacer-2 !default; +$banner-button-font-size: $font-size-9 !default; + +$banner-border-color: $control-border !default; +$banner-border-width: $border-width !default; .banner { @extend %layout-gap; display: grid; position: relative; - grid-template: auto / 1fr auto; - grid-template-areas: 'banner-content dismiss'; + align-items: flex-start; + min-height: $banner-min-height; outline-color: $text; background-color: $banner-background; color: $banner-color; font-size: $banner-font-size; line-height: $line-height-normal; - padding-block: $banner-padding; + grid-template: auto / auto 1fr auto; + grid-template-areas: 'icon banner-content dismiss'; + padding-block: $banner-padding-block; word-wrap: break-word; word-break: break-word; border-block: $banner-border-width solid $banner-border-color; - &.is-loading { - color: transparent; + @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); - > :first-child { - margin-inline-start: calc($banner-padding + 0.375em); + &.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; &::before { @include loader; - position: absolute; - inset-block-start: $banner-padding; - inset-inline-start: $layout-gap; border-color: transparent transparent $banner-color $banner-color; - - @include widescreen { - inset-inline-start: $layout-widescreen-gap; - } } } .banner-content { grid-area: banner-content; - a:not(.button) { - color: currentColor; + .banner-title { font-weight: $weight-semibold; - text-decoration: underline; + margin-inline-end: $banner-gap; + } - .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; + + &:first-child { + margin-block-start: $banner-content-block-spacing; + } + } + } + + .banner-icon, + &.is-loading::before { + flex-shrink: 0; + font-size: $banner-icon-size; + line-height: 1; + grid-area: icon; + margin-inline-end: $banner-gap; } .banner-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $banner-dismiss-margin; + margin-inline-start: $banner-gap; + } + + .banner-icon, + .banner-dismiss, + &.is-loading::before { + margin-block-start: $banner-icon-block-spacing; } } diff --git a/css/src/components/buttons.scss b/css/src/components/buttons.scss index 1700741a0..783c03a39 100644 --- a/css/src/components/buttons.scss +++ b/css/src/components/buttons.scss @@ -1,10 +1,12 @@ /* stylelint-disable selector-max-specificity, max-nesting-depth */ +$buttons-gap: $spacer-3 !default; .buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; + gap: $buttons-gap; &.buttons-centered { justify-content: center; @@ -14,30 +16,6 @@ justify-content: flex-end; } - .button { - margin-block-end: 0.5rem; - margin-inline-end: 0.5rem; - - &:only-child, - &.is-fullwidth, - &.is-full-width { - margin-inline-end: 0; - } - - &.is-full-width-mobile, - &.is-fullwidth-mobile { - margin-inline-end: 0; - - @include tablet { - margin-inline-end: 0.5rem; - } - } - } - - &:last-child { - margin-block-end: -0.5rem; - } - &:not(:last-child) { margin-block-end: 1rem; } diff --git a/css/src/components/notification.scss b/css/src/components/notification.scss index 537579140..ba6ae89db 100644 --- a/css/src/components/notification.scss +++ b/css/src/components/notification.scss @@ -1,24 +1,28 @@ +$notification-min-height: 50px !default; $notification-background: $secondary-background !default; -$notification-padding: $spacer-5 !default; +$notification-padding-block: 0.75em !default; +$notification-padding-inline: 0.85em !default; +$notification-gap: $spacer-3 !default; + +$notification-icon-size: 1.145em !default; +$notification-icon-block-spacing: 0.35em !default; + +$notification-content-block-spacing: 0.3em !default; -$notification-font-size: $font-size-7 !default; $notification-color: $text !default; +$notification-font-size: $font-size-8 !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-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; + min-height: $notification-min-height; border: $notification-border-width solid $notification-border-color; border-radius: $notification-border-radius; outline-color: $text; @@ -26,6 +30,10 @@ $notification-dismiss-margin: $spacer-2 !default; color: $notification-color; font-size: $notification-font-size; line-height: $line-height-normal; + 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; word-break: break-word; @@ -37,27 +45,23 @@ $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; + } } } &.is-loading { color: transparent; - > :first-child { - margin-inline-start: calc($notification-padding + 0.375em); - } - &::before { @include loader; - position: absolute; - inset-block-start: $notification-padding; - inset-inline-start: $notification-padding; border-color: transparent transparent $notification-color $notification-color; } } @@ -65,43 +69,47 @@ $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-gap; + } + + p:first-child { + margin-block-start: $notification-content-block-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, + &.is-loading::before { + flex-shrink: 0; + font-size: $notification-icon-size; + line-height: 1; + grid-area: icon; + margin-inline-end: $notification-gap; + } + .notification-dismiss { @include dismiss-square; grid-area: dismiss; - margin-inline-start: $notification-dismiss-margin; + margin-inline-start: $notification-gap; + } + + .notification-icon, + .notification-dismiss, + &.is-loading::before { + margin-block-start: $notification-icon-block-spacing; } } 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', diff --git a/site/src/components/banner.md b/site/src/components/banner.md index 165217cb6..5e02e2b20 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,55 @@ Here is an example of a standard usage of banner component. ``` +### Banner with title + +You can add a title to the banner. + +```html-no-indent + +``` + +### Banner with icon + +You can add an icon to the banner in front of the main content. + +```html-no-indent + +``` + +Below is an example with longer paragrapgh of text to demonstrate the wrapping. + + + ### Loading banner Ensure the user knows they need to wait for some event in order to interact with a banner. @@ -56,11 +104,27 @@ 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..c65c4eedb 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,26 +25,55 @@ 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

``` +Below is an example with longer paragrapgh of text to demonstrate the wrapping. + +
+ + + +
+

Descriptive title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+
+ ### Loading notification Ensure the user knows they need to wait for some event in order to interact with a notification. @@ -87,13 +115,14 @@ Notification can be made dismissable with the [`dismiss` component](./dismiss.md ## Semantic colors -| State | Class | Example | -| ------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Default | `.notification` |

Default notification Link

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

Success notification Link

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

Danger notification Link

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

Informational notification Link

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

Primary notification Link

| +| State | Class | Example | +| ------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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

| ```abut-html
diff --git a/site/src/patterns/banner.md b/site/src/patterns/banner.md new file mode 100644 index 000000000..18792fb26 --- /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..8cff77a22 --- /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. +

+
+ + +
+
+
+ +
+```