refactor(navbar): drop the redundant mode-toggle icon width rule - #2101
Merged
Conversation
`.mode-toggle .label svg { height: 1em; width: 1.25em }` existed because
`fa-fw` had no effect on inline SVG: FontAwesome v7 sets `--fa-width` and
only the webfont rule consumed it. mod-fontawesome v6.1.4 makes the
inline-SVG rule read the property, so the base styles now produce exactly
this geometry on their own — `height: 1em` from `.svg-inline--fa`, and
`width: 1.25em` from the `fa-fw` the helper already emits.
Verified on a consuming site with and without this rule, at 390px where
the controls form a labelled column:
toggle icon 20x16 identical
profile icon 20x16 identical
label origin x=42 identical for both rows
Requires mod-fontawesome >= v6.1.4. Before that the rule is load-bearing
for the toggle and there is no equivalent for the other controls, which
is why those rows disagreed.
Left alone deliberately: `.mode-switch .fa-moon` and `.fa-sun` set colour
and scale rather than width, and match whenever a site keeps the default
`fas sun` / `fas moon` icons. They are inert only on sites that configure
a different icon set, which is a site choice rather than dead code here.
`pnpm test` passes.
✅ Deploy Preview for gethinode-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Collaborator
Author
|
🎉 This PR is included in version 3.12.4 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Follow-up to mod-fontawesome#350. Deletes a workaround that only existed because
fa-fwdid nothing on inline SVG.Why it existed
FontAwesome v7 sets
.fa-fw{--fa-width:1.25em}and only the webfont rule consumed the property. mod-fontawesome's inline-SVG rule hard-setwidth: auto, sofa-fwwas inert — and since Hinode renders icons as inline SVG, that was every icon..mode-toggle .label svg { height: 1em; width: 1.25em }compensated for exactly one row. The other navbar controls had no equivalent, which is why the theme toggle and the search/profile rows rendered at different widths and their labels did not line up.Why it is now redundant
mod-fontawesome v6.1.4 makes the inline-SVG rule read the property, so the base styles produce this geometry unaided:
height: 1emfrom.svg-inline--fawidth: 1.25emfrom thefa-fwthatassets/helpers/navbar-mode.htmlalready emitsVerified
Built a consuming site with and without this rule at 390px, where the controls form a labelled column:
Identical. The rows also now agree with each other, which they did not before v6.1.4.
Pill mode (
toggle = false, the default) checked separately: both icons render 16x14 inside the 43px pill,scrollWidth == clientWidth, no overflow.Compatibility
Requires mod-fontawesome >= v6.1.4. Before that, this rule is load-bearing for the toggle.
Left alone deliberately
.mode-switch .fa-moonand.fa-sunset colour and scale rather than width, and they match whenever a site keeps the defaultfas sun/fas moonicons. They are inert only on sites configuring a different icon set — a site choice, not dead code here.Checks
pnpm testpasses.