feat(hub,hub-ui): color a dock-bar entry's badge via badgeVariant - #216
Merged
Conversation
Port of vitejs/devtools#528 by @dvcolomban, adapted for this repo's own split into `@devframes/hub` (types) and `@devframes/hub-ui` (dock components) — the field lands directly on `DevframeDockEntryBase` rather than via a cross-package `declare module` augmentation, since the augmenting and augmented packages both live here now. `badgeVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger'` mirrors json-render's `TabDescriptor.badgeVariant` / `Badge.ts` variant naming. `DockEntry.vue` applies it as an inline fill, falling back to the existing neutral classes at `'default'`/unset so every current badge consumer keeps its look. Threaded through `DockEntries.vue` and `DockGroupButton.vue`, with new stories in `DockEntry.stories.ts`. Closes #214. Co-authored-by: Dinh-Van Colomban <dinh-van.colomban@contentsquare.com>
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
Why
DockEntry's badge is a plain string label with a fixed neutral fill — no way to color it. json-render's ownTabscomponent already supports this one level down (TabDescriptor.badgeVariant), but the dock-bar entry itself has no equivalent, even though it's the same kind of label.Port of vitejs/devtools#528 by @dvcolomban, closing #214.
What changed
badgeVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger'added directly toDevframeDockEntryBaseinpackages/hub/src/types/docks.ts. The original PR added this via adeclare module '@devframes/hub/types'merge from a separate augmenting package (@vitejs/devtools-kit) — that split doesn't exist here, since the augmenting and augmented packages are both@devframes/hubalready, so the field lands on the base type directly.packages/hub-ui/src/client/components/dock/DockEntry.vuethreads the new prop through and applies it as an inline fill, mirroring json-render'sBadge.tsvariant→color naming (info/success/warning/danger).DockEntries.vueandDockGroupButton.vue(both feedDockEntry) passbadgeVariantthrough alongside the existingbadge.DockEntry.stories.tsgets aWithBadgeVariantstory plus an entry inStates.DockEntry.vuefalls back to its pre-existingbg-primary text-whiteclasses at'default'/unset, and only switches to an inline-styled fill for an explicit non-default variant — every existing badge consumer keeps its current look, unchanged.@devframes/hubtsnapi snapshots for the new exported type/field.Credit
Original implementation and design by @dvcolomban in vitejs/devtools#528 — co-authored here.
Created with the help of an agent.