Add an alert component.

 






 

 


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

 




















 

  

   Information

  





 
 

  chipx86
 









 
 

  Ink
 









 
 

  master
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  beanbag-misc
 









 
 

  
 






 








 





  


 
 

  
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




   

   







  

 



 

  


   

   

    
 
maubin


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 














  2. 
 
    
  
  
    
  
 
    
  
   Dark mode

   


    (Revision 1)


   

  


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


 
    

   
    
    
    




    
 
    
  
  
  

  
  
   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. 



    2. 
 
 
      
 
      
  
 
      
 
      
  
      Sounds good.
      
 
      

      3. 


 
    


    

 
    

    3. 









  3. 
 
    
  
  
    
  
 

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    There's an extra period here.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 






  4. 
 
    
  
  
    
  
 

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    Typo: "import" -> "important"
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    5. 






  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. 



    2. 
 
 
      
 
      
  
 
      
 
      
  
      Got it.
      
 
      

      3. 


 
    


    

 
    

    6. 






  6. 
 
    
  
  
    
  
 

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    Same comment as above.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    7. 




  7. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    8. 




  

 
















 



 

  

   




chipx86




   

   

  

 



 















 





 

  

   




david




   

   







  

 



 

  


   

   

    
 
david


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Ship It!
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 















  2. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  

 
















 





 

  

   




maubin




   

   







  

 



 

  


   

   

    
 
maubin


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 















  2. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  

 
















 



 

  

   




chipx86




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  






 

  Status:
  

  Closed (submitted)

  
 




 
Change Summary:

 
Pushed to master (2d8b5b2)





 


 










  

 









     

    

   

  

  

   
   Loading...