Percy examples combination - Jinja vertical spacing option #5176
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Some combined examples (such as search & filter, context menu, navigation) have overlay/non-contained contents that can overlap other combined examples if we're not careful.
In my PRs so far I have been handling this case manually by creating multple divs with
u-sv3
after examples that need extra space below them. However, this came to be tedious so I have come up with a (hopefully) more streamlined approach for this.This does the following:
combined.scss
that the examples template can import to load vertical spacing utility styling. This prevents having to create separate-combined.scss
style files for combined examples that need to include the vertical spacing utility.spacing_below
into an example template. Ifspacing_below
is defined and the example is a combined example, then a div withmargin-bottom: <spacing_below>rem
will be added below the block content to make space for whatever content is needed.Example
Example usage, with Search & Filter
Markup
Screenshot