[Empty States] Formatting

[laurenmrice]

Acceptance criteria

Finalize the below design specs and rules for empty states.

---

Formatting

Anatomy

• Identify the anatomy of what can be included when an empty states appears in different scenarios (in components, on page, etc.) to see if there are any differences between these or exceptions.

Text and illustrations

• Create rules on when you can have both text and an illustration and when to only have text.
  • Are there any considerations of when to use one over the other?
  • Should this always be consistent if you have multiple empty states on one page (For example: like a dashboard of cards? Or multiple data tables on a page?)

Content

• Specify having column header text present in empty states for data tables (see open related issue).
  • Ref: fix(modal): replace width rule with padding #3607

Buttons and links

• Decide how many buttons should be included in an empty state and what variant style they should be.
  • Does this depend on the component the empty state is nested within? For example: Data tables sometimes have a toolbar with a primary or ghost button, does this affect if there is a button in the empty state or not?
  • There was a thread about this in Slack that is related to this topic. Ref: Slack thread
  • Should we allow links in the description of an empty state if a button also exists?

Alignment

• Outline a spec of how the empty state is center aligned when there is an illustration and when there is not in all scenarios where it could exist.

Sizes

• Decide whether empty states should have a default and a compact size depending on where it is placed.