Fix navigation margin collapsing. #33021
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
[Block] Columns
|
Size Change: +22 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
7 tasks
jasmussen
force-pushed
the
fix/collapsed-nav
branch
from
2a1d063 to
9a1446a
Compare
|
This one is now unblocked, rebased, and re-tested, and still works:
|
ntsekouras
approved these changes
Aug 10, 2021
3 tasks
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Fixes #33002, but is blocked on #32659 landing first.
When the navigation block is used inside a columns block, menu items collapse like so:
This is because navigation menu items have low specificity margins and paddings, and those paddings are overridden by some classic styles we have in place. Observe:
These styles specifically:
Those styles exist to unset the auto margins classic themes use to center in the main column, and since they have high specificity, they win this battle.
In #32659,
:whereis introduced to lower the specificity of the two "reset" stylesheets we have. The behavior is best demonstrated in this codepen, but it can be described as lowering the specificity to a "use these styles if nothing else styles it", which makes it a great tool to provide default styles or baseline styles. This PR does the same for this rule, fixing the problem:Note that this PR alone will only fix the issue for block themes. In order for the problem to also be fixed for classic themes, the specificity of the resets will also need to be reduced, or they will take precedence. So #32659 will need to land as well.
Why not just increase specificity?
This has been our go-to so far, but as more and more properties are absorbed by global styles, this strategy won't work. For global styles to be able to affect paddings and margins of blocks, those block need to have minimal specificity or the global styles won't work at all. See also #32574.
How has this been tested?
Insert two navigation blocks, one of them inside a column. Both navigation blocks should have the same margin between them.
Checklist:
*.native.jsfiles for terms that need renaming or removal).