Skip to content
This repository has been archived by the owner on Jan 11, 2024. It is now read-only.

Adjust top spacer for Empty State component #496

Open
jgiardino opened this issue May 11, 2021 · 0 comments
Open

Adjust top spacer for Empty State component #496

jgiardino opened this issue May 11, 2021 · 0 comments

Comments

@jgiardino
Copy link
Contributor

jgiardino commented May 11, 2021

The PF design guidelines recommend different spacer sizes for above the Empty State for different use cases. This issue is to adjust the top padding defined per recommendations:

  • Full page empty state should have top padding set to 3xl with 2xl on mobile, e.g. pf-u-pt-2xl pf-u-pt-3xl-on-md
  • Empty states inside "a table, card, or wizard" should have top padding set to lg.
    • Note that many PF examples of cards and wizards display empty states as centered vertically, but even so, this size should be set as the padding.
    • PF does not specify how empty states should display in a modal. For the Credentials modal, I'd recommend either xl or lg unless we hear otherwise.

This is a follow-up issue from #478:

Empty State for No Search Items has uneven padding top and bottom which looks odd here - @jgiardino any suggestions?

That padding is correct for our full-page empty states, but not for empty states that display in context of a card or table, as described in the PF design guidelines. Instead, the padding here should be lg.

I've also noticed that this really large padding shows up in the modal that displays the client ID and secret, but it should also use a different size (without any PF recommendation, I'd use xl for this context).

Should we handle this with a separate PR? I'm not sure how easy it is to preserve the size we use for full-page empty states and specify a different size for these different use cases. And if we do modify the empty state common component, it would be good to check all of variants to make sure they render as expected.

@jgiardino It would be better to check all the variations and create separate issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant