Julian/sar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
17c08e63922d47193b06b555fee2970a2556118a
sar/_bmad/wds/data/design-system/state-management.md
julian 17c08e6392 chore: initial monorepo scaffold + WDS Phase 1+2 artifacts 
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24)
- apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004)
- apps/web: React 19 + Vite 8 (ESM)
- libs/shared/api-interface: Zod contract base
- Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit
- WDS artifacts:
  - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs)
  - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact)
- Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md
- AGENTS.md + README.md como entrada para devs/agentes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 14:34:20 +00:00

1.7 KiB
Raw Blame History

Component State Management

Purpose: Guidelines for defining and managing component states.

Referenced by: Component-type instructions (Button, Input, etc.)

Standard States

Interactive Components (Buttons, Links)

Required:

  • default - Normal, ready for interaction
  • hover - Mouse over component
  • active - Being clicked/pressed
  • disabled - Cannot interact

Optional:

  • loading - Processing action
  • focus - Keyboard focus

Form Components (Inputs, Selects)

Required:

  • default - Empty, ready for input
  • focus - Active input
  • filled - Has content
  • disabled - Cannot edit

Optional:

  • error - Validation failed
  • success - Validation passed
  • loading - Fetching data

Feedback Components (Alerts, Toasts)

Required:

  • default - Neutral information
  • success - Positive feedback
  • error - Error feedback
  • warning - Caution feedback

State Naming

Use standard names:

  • ✅ hover not mouseover
  • ✅ disabled not inactive
  • ✅ loading not processing

Be consistent across components.

State Transitions

Define how states change:

Button States: default → hover (mouse enters)
  hover → active (mouse down)
  active → hover (mouse up)
  hover → default (mouse leaves)
  any → disabled (programmatically)
  any → loading (action triggered)

Visual Indicators

Each state should be visually distinct:

Button:
  default: blue background
  hover: darker blue + scale 1.02
  active: darkest blue + scale 0.98
  disabled: gray + opacity 0.6
  loading: disabled + spinner

Reference this when specifying component states.

Reference in New Issue View Git Blame Copy Permalink