Alert with optional close button

[bennypowers]

<rh-alert> currently draws a close button no matter what, but perhaps not every alert needs one, for example, callouts in blog posts. Should the close button be a slot, or have a part attached to allow it to be hidden?

cc @RedHat-UX/designers

[eohammond]

Is rh-alert different than a toast? A toast we wouldn’t need a close button. Either way, I do agree there are circumstances where we don’t need a close button on an alert.

On Thu, Sep 22, 2022 at 8:34 AM Benny Powers ***@***.***> wrote: <rh-alert> currently draws a close button no matter what, but perhaps not every alert needs one, for example, callouts in blog posts. Should the close button be a slot, or have a part attached to allow it to be hidden? cc @RedHat-UX/designers <https://github.com/orgs/RedHat-UX/teams/designers> — Reply to this email directly, view it on GitHub <#541>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANUH6CC7LW637SXFOYD4W7DV7RG3ZANCNFSM6AAAAAAQTAHK3Q> . You are receiving this because you are on a team that was mentioned.Message ID: ***@***.***>

-- *Dan Caryll* Senior Manager, UX Design and Development Red Hat - NC 100 E Davie Street ***@***.*** M: 304-281-4098 <https://www.redhat.com/>

[marionnegp]

Toast is a variant of rh-alert that loads in the top right and overlaps content on the page, so we'd want to keep the close button there. I agree that the inline rh-alert doesn't always need a close button though.

[coreyvickery]

@bennypowers It should be a slot that can be visible or hidden. There is no default though, it kind of depends on where it's used.

[brianferry]

@marionnegp @coreyvickery @bennypowers

Would we rather have the user to hide the close icon themselves with a css variable like --rh-alert--Display: none where they would set like

<rh-alert state="default" style="--rh-alert--Display: none">
    <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>
    <button slot="actions" data-action="dismiss">Dismiss</button>
    <button slot="actions" data-action="confirm">Confirm</button>
  </rh-alert>

or through a stylesheet & we can hook up the button to set the host element to hidden,

OR have the user define and implement whatever header actions they would want like below:

<rh-alert state="default">
    <h3 slot="header">Default</h3>
    <button slot="header-actions" id="close-button" aria-label="Close" confirm><pfe-icon icon="web-icon-close" size="xs"></pfe-icon></button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
      egestas, a sollicitudin mauris tincidunt.</p>
    <button slot="actions" data-action="dismiss">Dismiss</button>
    <button slot="actions" data-action="confirm">Confirm</button>
  </rh-alert>

and have nothing be slotted by default?

[bennypowers]

I'm for option 3, and we can make that a pattern

[coreyvickery]

Same, +1 for option 3.

[brianferry]

From meeting at October 25th, 2022 -

We'll set up the alert with a close button that will set the alert to hidden and bubble an event. The bubbled event can be hooked into to set a cookie or localstorage or whatever the user wants.

@markcaron @bennypowers @coreyvickery

[bennypowers]

something like

onClick() {
  const event = new Event('closing', { bubbles: true });
  if (!this.dispatchEvent(event) || event.defaultPrevented) {
    return;
  } else {
    this.remove();
  }
}