docs(alert): use secondary rh-buttons to visually reflect importance (#…

…1857) * docs(alert): update alert demos to demonstrate use of secondary rh-buttons to reflect importance * docs(alert): remove url helpers * chore(alert): update docs * docs(alert): typo * docs(alert): update accessibility keyboard text * docs(alert): corey's notes * docs(alert): corey notes --------- Co-authored-by: Benny Powers <[email protected]>
RedHat-UX · Sep 18, 2024 · 0f1d5d9 · 0f1d5d9
1 parent 1d10884
commit 0f1d5d9
Show file tree

Hide file tree

Showing 61 changed files with 2,326 additions and 2,316 deletions.
diff --git a/elements/rh-alert/demo/alternate.html b/elements/rh-alert/demo/alternate.html
@@ -3,40 +3,40 @@
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="info" variant="alternate">
     <h3 slot="header">Info</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="success" variant="alternate">
     <h3 slot="header">Success</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="warning" variant="alternate">
     <h3 slot="header">Warning</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="danger" variant="alternate">
     <h3 slot="header">Danger</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </section>
 

diff --git a/elements/rh-alert/demo/color-context.html b/elements/rh-alert/demo/color-context.html
@@ -3,8 +3,8 @@
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </rh-context-demo>
 

diff --git a/elements/rh-alert/demo/dismissable.html b/elements/rh-alert/demo/dismissable.html
@@ -3,32 +3,32 @@
     <h3 slot="header">Default dismissable</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert variant="alternate" dismissable>
     <h3 slot="header">Inline dismissable</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert toast dismissable>
     <h3 slot="header">Toast dismissable</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert dismissable data-on-close="prevent-default">
     <h3 slot="header">Dismissable With Prevent Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </section>
 

diff --git a/elements/rh-alert/demo/inline.html b/elements/rh-alert/demo/inline.html
@@ -3,40 +3,40 @@
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="info" variant="inline">
     <h3 slot="header">Info</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="success" variant="inline">
     <h3 slot="header">Success</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="warning" variant="inline">
     <h3 slot="header">Warning</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="danger" variant="inline">
     <h3 slot="header">Danger</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </section>
 

diff --git a/elements/rh-alert/demo/rh-alert.html b/elements/rh-alert/demo/rh-alert.html
@@ -2,8 +2,8 @@
   <h3 slot="header">Default</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
     egestas, a sollicitudin mauris tincidunt.</p>
-  <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-  <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+  <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+  <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
 </rh-alert>
 
 <script type="module">

diff --git a/elements/rh-alert/demo/states.html b/elements/rh-alert/demo/states.html
@@ -3,48 +3,48 @@
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="default">
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="info">
     <h3 slot="header">Info</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="success">
     <h3 slot="header">Success</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="warning">
     <h3 slot="header">Warning</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="danger">
     <h3 slot="header">Danger</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </section>
 

diff --git a/elements/rh-alert/demo/toast.html b/elements/rh-alert/demo/toast.html
@@ -3,40 +3,40 @@
     <h3 slot="header">Default</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="info" variant="toast">
     <h3 slot="header">Info</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="success" variant="toast">
     <h3 slot="header">Success</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="warning" toast>
     <h3 slot="header">Warning</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 
   <rh-alert state="danger" toast>
     <h3 slot="header">Danger</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
       egestas, a sollicitudin mauris tincidunt.</p>
-    <rh-button slot="actions" variant="link" data-action="dismiss">Dismiss</rh-button>
-    <rh-button slot="actions" variant="link" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+    <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
   </rh-alert>
 </section>
 

diff --git a/elements/rh-alert/docs/00-overview.md b/elements/rh-alert/docs/00-overview.md
@@ -2,22 +2,26 @@
 
 {{ tagName | getElementDescription }}
 
-{% repoStatusList repoStatus=repoStatus %}
+<uxdot-example width-adjustment="456px">
+  <img src="alert-overview.svg" alt="Two examples of the alert element" width="538px">
+</uxdot-example>
 
+{% repoStatusList repoStatus=repoStatus %}
 
 ## Sample element
 
-<uxdot-example width-adjustment="538px">
-  <img src="{{ 'alert-sample.svg' | url }}" alt="Two examples of the alert element" width="538px">
-</uxdot-example>
+<rh-alert dismissable>
+  <h3 slot="header">Title</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
+  <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
+</rh-alert>
 
 ## When to use
 
-  - When additional information needs to be emphasized 
-  - When a user needs to be notified after performing an action
-  - When the severity of a message needs to be indicated
-
+  - Communicate essential information in a prominent way
+  - Notify a user of a change in status
+  - Communicate urgency using severity
 
-[img-sample]: {{ './alert-sample.svg' | url }}
 
 {% repoStatusChecklist repoStatus=repoStatus %}