• 
      

    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)