refactor(site/src): migrate shared Pill to Badge - #27638
#27638Draft
jakehwll wants to merge 1 commit into
maincoder/coder:mainfrom
jakehwll/migrate-pill-to-badgecoder/coder:jakehwll/migrate-pill-to-badgeCopy head branch name to clipboard
Draft
refactor(site/src): migrate shared Pill to Badge#27638jakehwll wants to merge 1 commit intomaincoder/coder:mainfrom jakehwll/migrate-pill-to-badgecoder/coder:jakehwll/migrate-pill-to-badgeCopy head branch name to clipboard
jakehwll wants to merge 1 commit into
maincoder/coder:mainfrom
jakehwll/migrate-pill-to-badgecoder/coder:jakehwll/migrate-pill-to-badgeCopy head branch name to clipboard
Conversation
Delete the shared Pill component and migrate every consumer to Badge. Add a themeRoleToBadgeVariant helper for call sites that receive a ThemeRole, replace PillSpinner with Spinner, and rename StatusPill to StatusBadge. Accepts the visual shift from rounded-full to rounded-md. The local Health-page Pill is intentionally out of scope.
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.
Summary
Deletes the shared
Pillcomponent (site/src/components/Pill/) and migrates every consumer toBadge. Accepts the intentional visual shift (rounded-full→rounded-md, slightly different color tokens). NoThemeRolevariants were added toBadge.Key changes
site/src/components/Badge/themeRoleToBadgeVariant.ts, a small mapper used at call sites that receive aThemeRole(e.g.StatusBadge,TemplateVersionStatusBadge).BadgePropsfromBadge.tsxso the mapper and status helpers can reference the variant type.PillSpinnerwith<Spinner loading />.StatusPill→StatusBadge(folder, file, and export) and updated the audit log and connection log imports.Badge.stories.tsxwith a status + spinner icon pattern (rather than porting the full Pill story).Variant mapping applied
typevariantsuccessgreenerrordestructivewarning,dangerwarningactive,noticeinfoinactive,muted,infodefaultpreviewpurpleOut of scope
The local Health-page
Pillinsite/src/pages/HealthPage/Content.tsxis a separate component with no shared import; it will be migrated in a follow-up.Validation
pnpm check(biome) passespnpm lint(biome + tsc + circular-deps + compiler + knip) passespnpm test:storybookfor Badge, TemplatePageHeader, and AuditLogRow stories: 30/30 passcomponents/PillandPillSpinnerinsite/srcreturns nothingImplementation plan
Migrate Pill to Badge
Goal
Delete
site/src/components/Pill/Pill.tsxand migrate every shared-Pill consumer tosite/src/components/Badge/Badge.tsx. Accept the visual shift (rounded-full→rounded-md, slightly different color tokens). Do not add ThemeRole variants to Badge.Out of scope: the local Health-page
Pillinsite/src/pages/HealthPage/Content.tsx(separate component, no shared import). Rename/migrate that in a follow-up.Variant mapping
Use this fixed mapping at every call site (Pill
type→ Badgevariant):typevariantsuccessgreenerrordestructivewarning,dangerwarningactive,noticeinfoinactive,muted,infodefaultinfois neutral grey; Badgeinfois sky, so map PillinfotodefaultpreviewpurpleOther remaps:
icon={node}→ putnodeas the first child ofBadgesize="lg"→size="md"(closest); add a localclassNameonly if a specific layout breaksPillSpinner→<Spinner loading />fromsite/src/components/Spinner/Spinner.tsxDeprecatedBadgeon the template header)For ThemeRole-driven helpers (
httpStatusColor, status getters), add a tiny shared mapper next to Badge (site/src/components/Badge/themeRoleToBadgeVariant.ts). Use it inStatusPilland any site that still receivesThemeRolerather than hardcoding variants twice.Call-site work (ordered easy → hard)
DeprecatedBadge), VersionRow, ChangeWorkspaceVersionDialog, PermissionPillsList, IdpPillList, OrganizationPillsBooleanPillbecomes a Badge wrapper), TemplateExampleCard (keep clickable styles viaclassName)PillSpinner→Spinner), utils/workspace.tsx (replacePillSpinnerimports only)themeRoleToBadgeVariant(httpStatusColor(...)); rename toStatusBadge), Notifications (Badge with severityclassNameoverrides)Pill.tsx,Pill.stories.tsx, and thecomponents/Pillfolder; extendBadge.stories.tsxonly if a migrated pattern is missing (icon + spinner status)Non-goals / constraints
rounded-fulltype/iconprops (that recreates Pill)Validation
pnpm check/pnpm lintundersite/components/PillandPillSpinnermust be empty insite/src