Notice and side-effect note

A notice is a message in the page, in four kinds. A side-effect note says what else an action will change, before it's taken.

CSS: css/components/notice.css. Classes: .al-icon, .al-notice, .al-notice--danger, .al-notice--success, .al-notice--warning, .al-notice__actions, .al-notice__body, .al-notice__dismiss, .al-notice__title, .al-side-effect.

On its own page, in English and Arabic

Anatomy

HTML

<div class="al-notice al-notice--warning" role="status">
  <svg class="al-icon" aria-hidden="true">…warning…</svg>
  <div class="al-notice__body">
    <p class="al-notice__title">Check your tax code</p>
    <p>0T taxes all of your pay. These figures would give 507T.</p>
    <div class="al-notice__actions"><button type="button" class="al-button al-button--sm">Use 507T</button></div>
  </div>
</div>

<!-- dismissible: an icon button, last -->
<div class="al-notice al-notice--success" role="status">
  <svg class="al-icon" aria-hidden="true">…success…</svg>
  <div class="al-notice__body"><p class="al-notice__title">Done</p><p>Your changes are saved.</p></div>
  <button type="button" class="al-button al-button--icon al-button--quiet al-notice__dismiss" aria-label="Dismiss">…close…</button>
</div>

<p class="al-side-effect"><svg class="al-icon al-icon--sm" aria-hidden="true">…info…</svg>
  <span>Changing the rate also updates <strong>2 saved offers</strong>.</span></p>

Variants and sizes

Kind	Icon	Use
Info (default)	info	Context: which rates are used
--success	success	Something's done and stays true
--warning	warning	Needs attention, not blocking
--danger	danger	An error; only for errors

States

Static; may carry actions. A notice someone can be done with may be dismissed (.al-notice__dismiss, a quiet icon button named "Dismiss"); it never hides by itself.

With no title of its own, a notice's title is its kind's word: Note, Done, Warning, Error (in Arabic: ملاحظة، تم، تنبيه، خطأ).

Keyboard

Its actions are in the tab order.

ARIA

role="status" for news that arrives; role="alert" only for blocking errors. Present on load: no role needed.

Right to left

The status edge and icon sit at the start.

Do and don't

Do

• Lead with a title word that names the situation.
• Offer the fix as an action in the notice.
• Put side-effect notes beside the control that causes them, with counts.

Don't

• Use danger for anything but errors.
• Stack more than two notices; merge them.
• Make an error dismissible before it's fixed.

Tokens

The 19 tokens it uses

--al-color-danger, --al-color-danger-wash, --al-color-info, --al-color-info-wash, --al-color-line-strong, --al-color-success, --al-color-success-wash, --al-color-text, --al-color-text-muted, --al-color-warning, --al-color-warning-wash, --al-radius-sm, --al-space-1, --al-space-2, --al-space-3, --al-space-4, --al-text-sm, --al-weight-medium, --al-weight-semibold