Implement InlineAlert component

[snowystinger]

🙋 Feature Request

https://spectrum.adobe.com/page/in-line-alert/

In-line alerts display a non-modal alert message associated with objects in a view. These are often used in form validation, where they can provide a place to aggregate feedback related to multiple fields.

💁 Possible Solution

The API should be something like the following.

interface AriaAlertProps extends DOMProps {}

interface SpectrumAlertProps extends AriaAlertProps, StyleProps {
  variant: 'neutral' | 'informative' | 'positive' | 'notice' | 'negative'
}

Example usage:

<Alert variant="informative">
  <Heading>Accepted payment methods</Heading>
  <Content>Only major credit cards are accepted for payment. Direct debit is currently unavailable.</Content>
</Alert>

<Alert variant="informative">
    <Heading>Accepted payment methods</Heading>
    <Content>Only major credit cards are accepted for payment. Direct debit is currently unavailable.</Content>
    <ButtonGroup>
      <Button variant="primary">Ok</Button>
    </ButtonGroup>
</Alert>

Note, icon is not supplied, it is internal to the Alert component and based on the variant.

Aria/Stately hooks

In general, we should follow the WAI Alert example. We should only need the role, aria-live and aria-atomic should be implicit on role="alert".

interface AlertAria {
  alertProps: HTMLAttributes<HTMLElement>
}

declare function useAlert(props: AlertProps): AlertAria;

DOM structure

This is a rough outline of what might be rendered for an Alert.

<div role="alert">
  <h3>Purchase completed</h3>
  <svg ... ></svg>
  <section>You'll get a confirmation email with your order details shortly.</section>
  <div><button>Ok</button></div>
</div>

Styling

The Alert css classes from spectrum-css can be used to implement this. In order to apply them, we can use the SlotProvider. Alert will need to provide a Slot context in the same way Dialog does. This way the children can receive props sent from the Alert to apply class names and other props. The CSS for Alert will need a little rework, as it should be moved over to use display: grid using a grid similar to this:

grid-template-rows: auto auto auto;
grid-template-cols: 1fr auto;
grid-template-areas:
  'heading        typeIcon'
  'content         content'
  'buttongroup buttongroup';

🧢 Your Company/Team

RSP

[razvanip]

@devongovett @snowystinger is this one free for grab ?

[arumsey]

FYI...I am planning to start development of this component soon based on previous conversations with @matthewdeutsch.

[arumsey]

Basic Usage

  <InLineAlert>
    <Header>I'm a title</Header>
    <Content>I'm the content</Content>
  </InLineAlert>

[arumsey]

The optional button group area was removed from the Spectrum design but is still present in the spectrum-css implementation. Should we also remove support for a button group in RSP?

[matthewdeutsch]

That's correct, the button group should not be included. Spectrum design removed it from the design guidelines on 6/27/2022, however CSS has not been updated yet to reflect the change