cassel/bi-agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
bi-agents/_bmad/wds/data/design-system/state-management.md
Cassel 647cbec54f docs: update all documentation and add AI tooling configs 
- Rewrite README.md with current architecture, features and stack
- Update docs/API.md with all current endpoints (corporate, BI, client 360)
- Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL
- Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente)
- Add docs/INDEX.md documentation index
- Add PROJETO.md comprehensive project reference
- Add BI-CCC-Implementation-Guide.md
- Include AI agent configs (.claude, .agents, .gemini, _bmad)
- Add netbird VPN configuration
- Add status report

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 13:29:03 -04:00

1.7 KiB
Raw Permalink 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.