Add nav tooltips on desktop + settings toggle (#155)#156
Merged
ChristopherRotnes merged 3 commits intomasterfrom May 10, 2026
Merged
Add nav tooltips on desktop + settings toggle (#155)#156ChristopherRotnes merged 3 commits intomasterfrom
ChristopherRotnes merged 3 commits intomasterfrom
Conversation
- NavBtn converted to forwardRef so Carbon Tooltip can inject its event handlers and positioning ref - Carbon Tooltip wraps each nav icon on desktop (>500 px), showing the translated nav.* label on hover/focus; mobile layout unchanged - NavTooltip helper component (outside PageShell) conditionally renders the wrapper to avoid re-mounting on every render - useNavHints() hook exported from PageShell.jsx: reads/writes wl-nav-hints in localStorage (default true), syncs across all hook instances in the same tab via a wl-nav-hints-change custom event - Settings → Utseende: new Carbon Toggle "Vis navigasjonsforklaringer" wired to useNavHints(); change takes effect immediately - i18n: settings.navHints added to nb, en, fa locale files - Docs: CHANGELOG 1.2.1, CLAUDE.md, README.md updated https://claude.ai/code/session_015LGACMKdTtRyAMCXnbUgrZ
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-090dfd003-156.westeurope.7.azurestaticapps.net |
Reduce tooltip transition duration from Carbon's default (200-300ms) to 100ms to avoid overlapping text when tooltips fade out. Uses !important to override Carbon's built-in transition timing. https://claude.ai/code/session_015LGACMKdTtRyAMCXnbUgrZ
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-090dfd003-156.westeurope.7.azurestaticapps.net |
Replace Carbon Tooltip wrapper with a CSS ::after pseudo-element on NavBtn. CSS :hover is mutually exclusive — hovering a new button immediately ends the previous button's hover state, so only one tooltip is ever visible at a time. Removes the dependency on Carbon Tooltip's internal fade timing entirely. - Drop Tooltip import from @carbon/react and NavTooltip wrapper component - Add optional tooltip prop to NavBtn; set data-tooltip attribute when truthy (undefined when hints disabled or on mobile, so attribute is not rendered) - Simplify nav render loop: tt(key) helper returns translated label or undefined based on showTooltip state - app.css: replace broken .bx--tooltip rule (Carbon v10 class, no-op in v11) with [data-tooltip]::after CSS tooltip; 120ms fade-in, instant close on mouse-leave, prefers-reduced-motion safe Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-090dfd003-156.westeurope.7.azurestaticapps.net |
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
2 participants
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.
$(cat <<'EOF'
Summary
Tooltip align="bottom"on desktop (>500 px). Hovering or focusing any icon shows the full translated label from the existingnav.*i18n keys. Mobile layout is pixel-identical to before.NavBtn→forwardRef— required so Carbon Tooltip can inject its event handlers and positioning ref viaReact.cloneElement. Props are spread with{...rest}before explicit overrides so ouraria-label,onClick, andstylealways win.useNavHints()hook — exported fromPageShell.jsx. Reads/writeslocalStoragekeywl-nav-hints(defaulttrue). Syncs across all hook instances in the same tab via awl-nav-hints-changecustom event, so toggling in Settings immediately hides tooltips in the nav bar without a page reload.Toggle"Vis navigasjonsforklaringer" wired touseNavHints().settings.navHintsadded to nb, en, fa locale files.Test plan
npm test— all 82 tests passCloses #155
https://claude.ai/code/session_015LGACMKdTtRyAMCXnbUgrZ
EOF
)
Generated by Claude Code