Skip to content

feat: Extend empty state component to support description links

This is a possible method to allow the empty state component to render a more customised description. As part of some Package work, I needed to include a link in the descriptive text as well as pre code blocks. It is not currently possible to include custom HTML inside this component, which meant I was unable to use this component to deliver the work.

Possible solution

This MR includes a possible solution where the empty state component has been modified to include a description slot. This works as follows:

  • The description property still exists and is available for simple empty state messages.
  • A description slot is available for more complex empty state messages.
  • If both the description slot and description property are provided, the slot will be rendered.
  • If neither are provided then nothing is rendered.

Screenshot

Screenshot_2019-07-10_at_18.12.14

Drawbacks with this solution

  • More flexibility could lead to less consistent empty state messages.
  • More complexity when using this component to ensure empty state messages are styled properly (especially if injected with lots of custom HTML).
  • Slots make it hard to apply the automatic description centring.

I'm not sure if this is the best way to solve this particular issue, but I figured it couldn't hurt to create this MR as a starting point.

Closes #155 (closed)

Edited by Clement Ho

Merge request reports