[Empty States] Make description and title optional #2744
Labels
🔨 Technical
Doesn't affect the output (refactor, dependencies update, cleaning, etc.)
Milestone
Comments
Supamiu
added
the
🔨 Technical
|
The solution I chose in CSS so far is to use %hide-empty {
&:empty {
display: none;
}
}
.emptyState-content-heading {
[…]
@extend %hide-empty;
[…]
}
.emptyState-actions,
.emptyState-content-text p {
@extend %hide-empty;
} |
|
Would it be relevant to reset the paragraph’s bottom margin, and instead apply it to the buttons’s wrapper if they exist? This would:
Something along these lines? .emptyState-content-description {
margin-bottom: 0;
}
* + .emptyState-actions {
margin-top: var(--pr-t-spacings-200);
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Problem
In some empty states, we may want just a
descriptionor just atitle, but at the moment, both of them are required, which means we end up with one of them still present inside the DOM but empty, with all the style applied to it (use case described by @fbasmaison-lucca)Possible solutions
The ideal solution would be to have "at least one of them required" but that's not possible with the current tooling that Angular exposes regarding Inputs. Our solution would be to make both of them optional and rely on devs to see that if they don't provide any, well the component is empty and makes no sense.
The text was updated successfully, but these errors were encountered: