Skip to content

DS extraction: recurring UI pattern (ds-fp:e184c518002a) #180

Description

@github-actions

@claudegate-ds-conformance detected a UI pattern duplicated across the codebase that should be extracted into a design-system primitive (CLAUDE.baseline.md §6).

Stable marker: ds-fp:e184c518002a (do not edit — used for idempotent de-duplication)

Where it recurs

  • frontend/src/pages/Accounts.tsx:259
  • frontend/src/pages/Accounts.tsx:264
  • frontend/src/pages/Accounts.tsx:268
  • frontend/src/pages/Accounts.tsx:272
  • frontend/src/pages/Automation.tsx:260
  • frontend/src/pages/Automation.tsx:271
  • frontend/src/pages/Automation.tsx:282
  • frontend/src/pages/Automation.tsx:331
  • frontend/src/pages/Automation.tsx:342
  • frontend/src/pages/Automation.tsx:358
  • frontend/src/pages/Automation.tsx:372
  • frontend/src/pages/Automation.tsx:385
  • frontend/src/pages/Automation.tsx:399
  • frontend/src/pages/Automation.tsx:411
  • frontend/src/pages/Identities.tsx:327
  • frontend/src/pages/Identities.tsx:331
  • frontend/src/pages/Identities.tsx:336
  • frontend/src/pages/Identities.tsx:342
  • frontend/src/pages/Identities.tsx:348
  • frontend/src/pages/Identities.tsx:385

Sample

className="block text-sm font-medium text-gray-700"

Proposed component spec (refine before building)

  • Name: <PascalCaseComponent> (in the repo design-system package — frontend-engineer is the sole owner of design-system/)
  • Props: derive from the variation across the call sites above.
  • Variants: the distinct visual variations seen at the locations.
  • States: default / hover / focus / active / disabled / loading as applicable.
  • Tokens: must consume DS tokens only (color/spacing/type/radius) — zero raw values.

Acceptance criteria

  • Component added to the design-system package (not one-off in feature code), tokens-only.
  • All listed call sites refactored to use it.
  • a11y + RTL covered; unit test in the DS package.
  • gate-ds-conformance stays green after refactor.

Filed automatically; owner is frontend-engineer. Extraction is design work, not done by this gate.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ds-extractionCandidate UI pattern to extract into the design system

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions