Add docs for new banner #748

lukasoppermann · 2024-03-22T14:29:04Z

Only merge when the react component is implemented

content/components/banner.mdx

mperrotti · 2024-03-22T20:19:05Z

content/components/banner.mdx

+Keep the message concise and direct. Don't use headings or multiple type sizes in banners, rely on the default paragraph size and use the title when appropiate.
+
+Don't show more than one banner at a time. For more information, see this article on [alert fatigue](https://www.nngroup.com/videos/alert-fatigue-user-interfaces/).
+
 ## Accessibility


Can you confirm that none of the proposed Banner updates affect our existing a11y guidance?

No, I'd love to get this info form @ichelsea

Adding this to my list of things to look at this week!

Okay, this entire a11y section was written up form the work that @lindseywild and @khiga8 did, so it's valid! There are a couple of things that we want to adjust based on feedback from engineering office hours earlier this week that has also been on my to-do list to get to.

We can create a separate PR for that if you want to get this one merged, or I can add to it before this one is merged.

Please add it to this PR. We will keep it open until the react components are implemented and shipped, so it will be open for a bit.

content/components/banner.mdx

langermank

Good start!

content/components/banner.mdx

langermank · 2024-03-25T20:51:15Z

content/components/banner.mdx

+  />
+  <Box as="p" mt="0">
+    <h4>Title</h4>
+    Use a title to consisly present the topic of the banner when the message of the banner is complex and too long to scan.


Can you add something about title being required but may be visually hidden?

@joshblack is this how we implement it, or is there a separate a11y title which will just use the title the user defines if they do?

@lukasoppermann I think this is how it's implemented now where the title is required but may be visually hidden 👍 At the moment, this would mean they wrap the title in VisuallyHidden but we could also simplify this with a dedicated prop if that would be helpful.

I am not sure if this is the right place for a discussion, but I am a bit afraid that if the title is not hidden by default, we will get a lot of duplicates with title and body being the same text.

My only thought to improve this would be to have two props like aria-title and title where aria-title is set to title if present. So, using typescript we could require on of the two to be set.

But I am no react dev and this may be an uncommon or anti-pattern.

content/components/banner.mdx

joshblack

Looks great! Just left a comment/question.

content/components/banner.mdx

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com>

content/components/banner.mdx

mperrotti · 2024-03-27T23:47:22Z

Looks good to me. I'd "approve" but waiting until this is out of "draft".

Just ping me when you're officially ready for a review 🙂

ichelsea

Thanks for getting this documentation going, @lukasoppermann!

I have a couple fundamental thoughts around our suggestions vs our inline messaging that's coming. Should we write like we don't yet have that component or write like we will have that component soon?

content/components/banner.mdx

ichelsea · 2024-03-29T19:18:55Z

content/components/banner.mdx

+
+#### Critical
+
+Use critical banners to signal critical errors, system failures, or necessary destructive actions. Examples: form validation error summary, repo deletion confirmations.


Not sure I'm following the repo deletion confirmation example. Right now if you delete a repository, you get a blue banner at the top confirming deletion. I wouldn't use the critical banner because even though it was destructive, it was a successful action. We should only be using them to bring attention to failed actions.

This is not talking about the once it is deleted, but rather before you delete.

However, I think this was somewhat recently removed. Is there another good example?

content/components/banner.mdx

ichelsea · 2024-03-29T20:07:02Z

content/components/banner.mdx

+Keep the message concise and direct. Don't use headings or multiple type sizes in banners, rely on the default paragraph size and use the title when appropiate.
+
+Don't show more than one banner at a time. For more information, see this article on [alert fatigue](https://www.nngroup.com/videos/alert-fatigue-user-interfaces/).
+
 ## Accessibility


Okay, this entire a11y section was written up form the work that @lindseywild and @khiga8 did, so it's valid! There are a couple of things that we want to adjust based on feedback from engineering office hours earlier this week that has also been on my to-do list to get to.

We can create a separate PR for that if you want to get this one merged, or I can add to it before this one is merged.

Co-authored-by: Chelsea Adelman <40274682+ichelsea@users.noreply.github.com>

content/components/banner.mdx

add docs for new banner

f488232

lukasoppermann requested review from dipree, langermank and ichelsea March 22, 2024 14:29

lukasoppermann requested a review from a team as a code owner March 22, 2024 14:29

lukasoppermann marked this pull request as draft March 22, 2024 14:29

lukasoppermann self-assigned this Mar 22, 2024

lukasoppermann added the area: documentation label Mar 22, 2024

lukasoppermann temporarily deployed to github-pages March 22, 2024 14:33 — with GitHub Actions Inactive

add content for banner

c9b92a9

lukasoppermann temporarily deployed to github-pages March 22, 2024 19:38 — with GitHub Actions Inactive

add banner to nav

f0971c4

lukasoppermann temporarily deployed to github-pages March 22, 2024 20:10 — with GitHub Actions Inactive

mperrotti reviewed Mar 22, 2024

View reviewed changes

fix paragraphs

88a4709

lukasoppermann temporarily deployed to github-pages March 22, 2024 20:36 — with GitHub Actions Inactive

langermank reviewed Mar 25, 2024

View reviewed changes

joshblack reviewed Mar 25, 2024

View reviewed changes

content/components/banner.mdx Outdated Show resolved Hide resolved

update images

38ac3a5

lukasoppermann temporarily deployed to github-pages March 26, 2024 08:35 — with GitHub Actions Inactive

Apply suggestions from code review

47b4e5a

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com>

lukasoppermann temporarily deployed to github-pages March 26, 2024 10:16 — with GitHub Actions Inactive

lukasoppermann temporarily deployed to github-pages March 26, 2024 12:55 — with GitHub Actions Inactive

update asset

a3181fc

lukasoppermann force-pushed the banner-docs branch from 61f7885 to a3181fc Compare March 26, 2024 13:21

lukasoppermann temporarily deployed to github-pages March 26, 2024 13:26 — with GitHub Actions Inactive

lukasoppermann temporarily deployed to github-pages March 26, 2024 13:37 — with GitHub Actions Inactive

rm duplicate titles

f5cdb97

lukasoppermann force-pushed the banner-docs branch from 2b654c3 to f5cdb97 Compare March 26, 2024 13:48

lukasoppermann temporarily deployed to github-pages March 26, 2024 13:53 — with GitHub Actions Inactive

lukasoppermann commented Mar 26, 2024

View reviewed changes

content/components/banner.mdx Outdated Show resolved Hide resolved

Update content/components/banner.mdx

b85a81d

lukasoppermann temporarily deployed to github-pages March 26, 2024 14:09 — with GitHub Actions Inactive

simplify code structure by using markdown in box

b23327f

lukasoppermann temporarily deployed to github-pages March 26, 2024 22:32 — with GitHub Actions Inactive

replace box with div were possible

d46be99

lukasoppermann temporarily deployed to github-pages March 27, 2024 08:38 — with GitHub Actions Inactive

update asset

9b2dab2

lukasoppermann temporarily deployed to github-pages March 27, 2024 12:20 — with GitHub Actions Inactive

add some context for dismiss

e306ee7

lukasoppermann temporarily deployed to github-pages March 27, 2024 12:26 — with GitHub Actions Inactive

added position content

4fed67e

lukasoppermann temporarily deployed to github-pages March 27, 2024 12:41 — with GitHub Actions Inactive

improve title copy

21a6142

lukasoppermann temporarily deployed to github-pages March 27, 2024 12:51 — with GitHub Actions Inactive

ichelsea requested changes Mar 29, 2024

View reviewed changes

Apply suggestions from code review

0217d35

Co-authored-by: Chelsea Adelman <40274682+ichelsea@users.noreply.github.com>

lukasoppermann temporarily deployed to github-pages April 1, 2024 09:22 — with GitHub Actions Inactive

change title to be above content

bec7768

lukasoppermann temporarily deployed to github-pages April 4, 2024 13:13 — with GitHub Actions Inactive

lukasoppermann commented May 7, 2024

View reviewed changes

content/components/banner.mdx Show resolved Hide resolved

Update content/components/banner.mdx

59c643a

lukasoppermann temporarily deployed to github-pages May 7, 2024 07:09 — with GitHub Actions Inactive

lukasoppermann commented May 7, 2024

View reviewed changes

content/components/banner.mdx Outdated Show resolved Hide resolved

Update content/components/banner.mdx

0addac6

lukasoppermann deployed to github-pages May 7, 2024 07:35 — with GitHub Actions View deployment

lukasoppermann marked this pull request as ready for review May 30, 2024 14:38

joshblack approved these changes Jun 3, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add docs for new banner #748

Add docs for new banner #748

lukasoppermann commented Mar 22, 2024 •

edited

mperrotti Mar 22, 2024

lukasoppermann Mar 26, 2024

ichelsea Mar 26, 2024

ichelsea Mar 29, 2024

lukasoppermann Apr 2, 2024

langermank left a comment

langermank Mar 25, 2024

lukasoppermann Mar 26, 2024

joshblack Mar 26, 2024

lukasoppermann Mar 27, 2024

joshblack left a comment

mperrotti commented Mar 27, 2024

ichelsea left a comment

ichelsea Mar 29, 2024

lukasoppermann Apr 4, 2024

ichelsea Mar 29, 2024


		#### Critical

		Use critical banners to signal critical errors, system failures, or necessary destructive actions. Examples: form validation error summary, repo deletion confirmations.

Add docs for new banner #748

Are you sure you want to change the base?

Add docs for new banner #748

Conversation

lukasoppermann commented Mar 22, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

langermank left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshblack left a comment

Choose a reason for hiding this comment

mperrotti commented Mar 27, 2024

ichelsea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukasoppermann commented Mar 22, 2024 •

edited