feat(dashboard): hoverable info icons for in-context help - #178
Merged
Conversation
Guidance was only reachable through the dismissible panel at the top of each page, so once a user dismissed it the explanation was gone for good, and nav rows relied on the native title tooltip (slow, unstyled, invisible to touch). - InfoHint: shared "i" affordance opening on hover, focus or click. Positioned fixed off the trigger rect so it is not clipped by the nav's scroll container; hover intent delays prevent flicker; closes on Esc, outside click and scroll. - GuidanceInfo puts the page explainer behind that icon, next to every page title — the panel can be dismissed without losing the help. - HelpPopover now renders through InfoHint, so the 14 existing term popovers gain hover and drop the "?" for the "i" users expect. - Nav rows and section headers carry their own hint, replacing title tooltips. - SRE dashboard gets the equivalent ExplainerInfo, local to that app. Fixes a silent failure: HelpPopover term="delegation-plan" had no HELP_TERMS entry, so the run detail page rendered no affordance at all.
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 #177. Guidance was only reachable through the dismissible panel at
the top of each page, so once a user dismissed it the explanation was gone for
good — the dismissal persists in localStorage. Nav rows relied on the native
titletooltip, which is slow, unstyled, and invisible on touch.InfoHint
One shared affordance, opening on hover, focus or click. Click is kept because
touch devices have no hover, and it pins the popover open for longer copy.
Positioned
fixedoff the trigger's rect rather than absolutely — the left navis an
overflow-y-autoscroll container, so an absolute popover was clipped atthe rail edge. It clamps to the viewport, uses hover-intent delays (120ms in,
180ms out) so it does not flicker as the pointer crosses a row, and closes on
Esc, outside click, scroll and resize.
Where it is used
tab order for keyboard and screen readers.
GuidanceInfo, which renders the pageexplainer. Dismissing the panel now tidies the page instead of destroying the
help.
ExplainerInfo— that app deliberatelyshares no code with this one.
HelpPopovernow renders throughInfoHint, so the 14 existing term popoversgain hover and swap the
?glyph fori.Bug fixed
<HelpPopover term="delegation-plan" />on the run detail page referenced aHELP_TERMSkey that does not exist.getHelpTermis a plain record lookup, soit returned
undefinedand the affordance never rendered. Added the entry; areference check now confirms 20 guidance ids and 10 help terms all resolve.
Verification
tsc --noEmitclean andnext buildgreen on both apps. Rendered output checkedagainst a live dev server on five routes — icons present with the expected
accessible labels.