alert: Rethinking the HTML APIs

[bennypowers]

👋

A few notes for the <rh-alert> HTML API:

Are we able to simplify (or even remove altogether) the light-DOM classes for rh-alert? Along the way we could rename the action-group slot to actions, and change the description slot to an anonymous slot. Fewer hyphens are always better, amirite? As well, what do you think of using data attrs instead of custom attrs for the button actions? That way, we could come back at a later date and

this.addEventListener('click', event => {
  if (event.target instanceof HTMLButtonElement) {
    const { action } = event.target.dataset;
    // AlertCloseEvent implementation left to the imagination
    this.dispatchEvent(new AlertCloseEvent({ reason: action }));
  }
});

WDYT? cc @brianferry

before:

<rh-alert state="default">
  <div slot="title">Default</div>
  <p slot="description">An alert displays an important message</p>
  <button class="rh-alert__action-group-item" slot="action-group" dismiss>Dismiss</button>
  <button class="rh-alert__action-group-item" slot="action-group" confirm>Confirm</button>
</rh-alert>

after:

<rh-alert state="default">
  <div slot="title">Default</div>
  <p>An alert displays an important message</p>
  <button slot="actions" data-action="dismiss">Dismiss</button>
  <button slot="actions" data-action="confirm">Confirm</button>
</rh-alert>

We could do this easily enough with CSS

  .rh-alert__action-group-item,
- #action-group::slotted(.rh-alert__action-group-item) {
+ #action-group::slotted([slot="actions"]) {
    margin-right: var(--action-group-item--MarginRight);
    padding: var(--action-group-item--Padding);
    border: var(--action-group-item--border);
    background-color: var(--action-group-item--BackgroundColor);
    color: var(--action-group-item--Color);
    font-size: var(--action-group-item--FontSize);
  }
  
  .rh-alert__action-group-item:hover,
- #action-group::slotted(.rh-alert__action-group-item:hover) {  
+ #action-group::slotted([slot="actions"]:hover) {
    text-decoration: var(--action-group-item--hover--TextDecoration);
    color: var(--action-group-item--hover--Color);
  }
  button.rh-alert__action-group-item,
- #action-group::slotted(.rh-alert__action-group-item) {
+ #action-group::slotted([slot="actions"]) {
    margin-right: var(--action-group-item--MarginRight) !important;
  }

Admittedly, this should all have been caught in code-review, but we haven't released anything yet, and the previous rh-alert PR was
in many ways a sandbox for processes in this repo, so 🤷 my bad.

[bennypowers]

These notes were all addressed already, so let's lock this conversation