Add an alert component.

Review Request #13623 — Created March 8, 2024 and submitted

Information

Ink
master

Reviewers

The alert component shows information related to an action performed, an
action that may be performed, or content on a page. They show an icon
representing the type, a summary, an optional body of content, an
optional close button, and optional actions.

The different types of alert backgrounds and borders have their own
colors, helping visually distinguish them at a glance (along with their
icon).

There are 5 types of alerts:

  • Standard alerts (no particular type)
  • Info alerts (conveying useful information)
  • Success alerts (showing the successful status of an operation)
  • Warning alerts (warning the user before an action takes place)
  • Error alerts (showing the failed status of an operation)

Alerts may be important (which will notify screen readers upon
display) or passive (which will not).

Unit tests pass.

Tested all the various combinations of properties in Storybook, in
light and dark modes.

Summary ID
Add an alert component.
The alert component shows information related to an action performed, an action that may be performed, or content on a page. They show an icon representing the type, a summary, an optional body of content, an optional close button, and optional actions. The different types of alert backgrounds and borders have their own colors, helping visually distinguish them at a glance (along with their icon). There are 5 types of alerts: * Standard alerts (no particular type) * Info alerts (conveying useful information) * Success alerts (showing the successful status of an operation) * Warning alerts (warning the user before an action takes place) * Error alerts (showing the failed status of an operation) Alerts may be important (which will notify screen readers upon display) or passive (which will not).
2c01e0bd630772dffc9405348fcfc55bc49517ca

Description From Last Updated

These look like they're from the light mode colour palette?

maubinmaubin

There's an extra period here.

maubinmaubin

Typo: "import" -> "important"

maubinmaubin

Related to my comments on the dark mode images, do we always want the background to be from the light …

maubinmaubin

Same comment as above.

maubinmaubin
maubin
  1. 
      
  2. Show all issues

    These look like they're from the light mode colour palette?

    1. This is intentional. For some of these, given the importance of the alert, I'm currently aiming for them to stand out a bit more aggressively. In many of the component libraries I've seen, this is used for more urgent alerts.

      I'm not 100% settled on this, but I don't want to change it until after they're integrated into Review Board and we get to do some real-world testing.

    2. Sounds good.

  3. Show all issues

    There's an extra period here.

  4. Show all issues

    Typo: "import" -> "important"

  5. Show all issues

    Related to my comments on the dark mode images, do we always want the background to be from the light mode palette and use the dark border colour? Shouldn't we use the corresponding dark mode colour, like we do for the default, info and success alerts?

    1. These aren't dark/light mode color definitions. They're whether the border is a light or a dark color. For these, a dark color is correct for these background colors.

    2. Got it.

  6. Show all issues

    Same comment as above.

  7. 
      
chipx86
david
  1. Ship It!
  2. 
      
maubin
  1. 
      
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to master (2d8b5b2)