fix(alert): various fixes (#1379)

RedHat-UX · Dec 13, 2023 · 976981b · 976981b
1 parent 2eb82a8
commit 976981b
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 60 deletions.
diff --git a/.changeset/alert-fix-inline.md b/.changeset/alert-fix-inline.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-alert>`: fix inline variant's styles
diff --git a/.changeset/dark-baths-allow.md b/.changeset/dark-baths-allow.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-alert>`: remove padding for alerts which have only header content
diff --git a/.changeset/free-hats-wave.md b/.changeset/free-hats-wave.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-alert>`: make variants case-insensitive
diff --git a/elements/rh-alert/demo/inline.html b/elements/rh-alert/demo/inline.html
@@ -0,0 +1,53 @@
+<rh-alert variant="inline">
+  <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-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-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-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-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-alert>
+
+<script type="module">
+  import '@rhds/elements/rh-alert/rh-alert.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+</script>
+
+<style>
+  [data-demo] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, max(40vh, 40%)));
+    grid-auto-rows: min-content;
+    gap: var(--rh-space-lg, 16px);
+  }
+</style>
diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
@@ -6,52 +6,22 @@
   --_font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
 
   display: block;
+  max-width: var(--_max-width, initial);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([state="info"]) {
-  --_border-color: var(--rh-color-blue-40, #4394e5);
-  --_icon-color: var(--rh-color-blue-40, #4394e5);
-  --_header-color: var(--rh-color-blue-70, #003366);
-  --_background-color: var(--rh-color-blue-10, #e0f0ff);
-}
-
-:host([state="success"]) {
-  --_border-color: var(--rh-color-green-60, #3d7317);
-  --_icon-color: var(--rh-color-green-60, #3d7317);
-  --_header-color: var(--rh-color-green-70, #204d00);
-  --_background-color: var(--rh-color-green-10, #e9f7df);
-}
-
-:host([state="warning"]) {
-  --_border-color: var(--rh-color-yellow-40, #dca614);
-  --_icon-color: var(--rh-color-yellow-40, #dca614);
-  --_header-color: var(--rh-color-yellow-70, #73480b);
-  --_background-color: var(--rh-color-yellow-10, #fff4cc);
-}
-
-:host([state="danger"]) {
-  --_border-color: #c9190b; /* WARNING: not a recognized token value */
-  --_icon-color: #c9190b; /* WARNING: not a recognized token value */
-  --_header-color: #7d1007; /* WARNING: not a recognized token value */
-  --_background-color: var(--rh-color-red-10, #fce3e3);
-}
-
-:host([toast]),
-:host([variant="toast"]) {
-  --_background-color: var(--rh-color-surface-lightest, #ffffff);
-
-  max-width: 550px;
-}
-
 #container {
   border-width: var(--rh-border-width-md, 2px);
-  border-color: var(--_border-color);
   border-style: solid;
+  border-block-start-color: var(--_border-color);
+  border-inline-start-color: var(--_border-inline-color, transparent);
+  border-block-end-color: var(--_border-block-end-color, transparent);
+  border-inline-end-color: var(--_border-inline-color, transparent);
   background-color: var(--_background-color);
+  box-shadow: var(--_box-shadow, none);
   padding: var(--rh-space-lg, 16px);
   display: grid;
   grid-template-columns: min-content 1fr;
@@ -73,19 +43,25 @@ header {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: var(--rh-space-xs, 4px);
+}
+
+.hasBody header {
+  margin-block-end: var(--rh-space-xs, 4px);
 }
 
 header ::slotted(*) {
   font-family: var(--_font-family) !important;
   font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
   font-weight: var(--rh-font-weight-heading-bold, 700) !important;
   margin: 0 !important;
-  padding-block: 2px 4px !important;
+}
+
+header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
+  padding-block: 2px var(--rh-space-xs, 4px) !important;  /* 2px is a non standard value */
 }
 
 #header-actions {
-  margin-right: var(--rh-space-xs, 4px);
+  margin-inline-end: var(--rh-space-xs, 4px);
 }
 
 #header {
@@ -125,10 +101,10 @@ header ::slotted(*) {
 }
 
 footer.hasActions {
-  margin-top: var(--rh-space-lg, 16px);
+  margin-block-start: var(--rh-space-lg, 16px);
 }
 
-footer ::slotted([slot="actions"]:not(rh-button[variant="link"])) {
+footer ::slotted([slot="actions"]:not(rh-button[variant="link" i])) {
   margin-inline-end: var(--rh-space-xl, 24px) !important;
   padding: 0 !important;
   border: none !important;
@@ -150,20 +126,46 @@ footer ::slotted([slot="actions"]:hover) {
   color: var(--rh-color-interactive-blue-darkest, #003366) !important;
 }
 
-footer ::slotted(rh-button[variant="link"]) {
+footer ::slotted(rh-button[variant="link" i]) {
   display: inline-block;
   translate: calc(-1 * var(--rh-space-lg, 16px));
 }
 
-:host(:not([variant])) #container,
-:host([toast]) #container,
-:host([variant="toast"]) #container {
-  border-left: 0;
-  border-bottom: none;
-  border-right: 0;
+:host([state="info" i]) {
+  --_border-color: var(--rh-color-blue-40, #4394e5);
+  --_icon-color: var(--rh-color-blue-40, #4394e5);
+  --_header-color: var(--rh-color-blue-70, #003366);
+  --_background-color: var(--rh-color-blue-10, #e0f0ff);
+}
+
+:host([state="success" i]) {
+  --_border-color: var(--rh-color-green-60, #3d7317);
+  --_icon-color: var(--rh-color-green-60, #3d7317);
+  --_header-color: var(--rh-color-green-70, #204d00);
+  --_background-color: var(--rh-color-green-10, #e9f7df);
+}
+
+:host([state="warning" i]) {
+  --_border-color: var(--rh-color-yellow-40, #dca614);
+  --_icon-color: var(--rh-color-yellow-40, #dca614);
+  --_header-color: var(--rh-color-yellow-70, #73480b);
+  --_background-color: var(--rh-color-yellow-10, #fff4cc);
+}
+
+:host([state="danger" i]) {
+  --_border-color: #c9190b; /* WARNING: not a recognized token value */
+  --_icon-color: #c9190b; /* WARNING: not a recognized token value */
+  --_header-color: #7d1007; /* WARNING: not a recognized token value */
+  --_background-color: var(--rh-color-red-10, #fce3e3);
+}
+
+:host([variant="toast" i]) {
+  --_background-color: var(--rh-color-surface-lightest, #ffffff);
+  --_max-width: 550px;
+  --_box-shadow: var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3));
 }
 
-:host([toast]) #container,
-:host([variant="toast"]) #container {
-  box-shadow: var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3));
+:host([variant="alternate" i]) {
+  --_border-inline-color: var(--_border-color);
+  --_border-block-end-color: var(--_border-color);
 }
diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
@@ -5,8 +5,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { ComposedEvent } from '@patternfly/pfe-core';
-
 import styles from './rh-alert.css';
 
 // TODO: replace with rh-icon
@@ -32,11 +30,9 @@ const ICONS = {
   }
 };
 
-export class AlertCloseEvent extends ComposedEvent {
+export class AlertCloseEvent extends Event {
   constructor() {
-    super('close', {
-      cancelable: true
-    });
+    super('close', { bubbles: true, cancelable: true });
   }
 }
 
@@ -61,7 +57,7 @@ export class RhAlert extends LitElement {
   static readonly styles = styles;
 
   private get icon() {
-    return ICONS.get(this.state) ?? ``;
+    return ICONS.get(this.state.toLowerCase() as this['state']) ?? '';
   }
 
   /**
@@ -107,6 +103,10 @@ export class RhAlert extends LitElement {
   }
 
   willUpdate(changed: PropertyValues<this>) {
+    // toast as a boolean attr is deprecated, so this replicates the previous behaviour
+    if (changed.has('toast') && this.toast) {
+      this.variant = 'toast';
+    }
     // variant as a boolean attr is deprecated, so this replicates the previous behaviour
     if (changed.has('variant') && (this.variant as unknown as boolean) === false) {
       this.variant = undefined;
@@ -115,16 +115,20 @@ export class RhAlert extends LitElement {
 
   render() {
     const hasActions = this.#slots.hasSlotted('actions');
+    const hasBody = this.#slots.hasSlotted(SlotController.anonymous as unknown as string);
     return html`
-      <div id="container" role="alert" aria-hidden="false">
+      <div id="container"
+           class="${classMap({ hasBody })}"
+           role="alert"
+           aria-hidden="false">
         <div id="left-column">
           <div id="icon">${this.icon}</div>
         </div>
         <div id="middle-column">
           <header>
             <div id="header">
               <slot name="header"></slot>
-            </div>${!this.dismissable ? '' : html`
+            </div>${!this.dismissable && this.variant !== 'toast' ? '' : html`
             <div id="header-actions">
               <button id="close-button"
                   aria-label="Close"