feat(dashboard): one notice at a time — the banner priority slot - #177
Merged
Conversation
…ority slot Doctor, Onboarding and Insights banners could stack three deep above the nav. They now share a notice slot: each banner still decides its own eligibility (an ineligible banner renders no DOM), App orders them by priority — Doctor (broken install) > Onboarding (empty library) > Insights (pending proposals) — and one stylesheet rule shows only the slot's first rendered child, keeping the losers out of the viewport AND the accessibility tree until the winner clears. A dedicated test pins both halves of the mechanism: the DOM priority order (including the next-in-line takeover when the winner is dismissed) and the CSS rule itself, which happy-dom cannot observe at runtime.
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
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.
What
UX-6 of the work-topology arc (shrunk: the Analytics fold-in already shipped with the tab consolidation). The Doctor, Onboarding and Insights banners could stack three deep above the nav — three interruptions competing for the same glance. They now share a notice slot:
.notice-slot > * ~ * { display: none; }) shows only the slot's first rendered child.display:nonekeeps the losers out of the accessibility tree as well as the viewport; the next in line surfaces the moment the winner is dismissed or its condition clears.Verification
node scripts/run-tests-isolated.mjs→ exit 0, 139 files / 2095 tests (net +3).npm run verify:release→ exit 0.tests/dashboard/notice-slot.test.tsxpins both halves of the mechanism (happy-dom cannot observe CSS cascade, so the rule is pinned at source): the Doctor > Onboarding > Insights DOM order with all three eligible at once, the next-in-line takeover when the doctor banner's dismissal signature matches, and the stylesheet rule itself.× renders all eligible banners … in orderred; deleting the CSS rule →× the stylesheet hides every slot child after the firstred; restored → 3/3 green.