2.6 KiB

Raw Blame History

Substep 4C-06: States

Goal: Define all possible page and component states

EXECUTION

Let's define all possible states.

States show how the page and components appear in different situations.

PAGE-LEVEL STATES

What are the different page-level states?

Think about:

Default/loaded state
Empty state (no data)
Loading state (fetching data)
Error state (something went wrong)
Success state (after action completes)

For each state, describe:

When it occurs
What the user sees
What actions are available

Store page_states with descriptions

COMPONENT STATES

Now let's define component states.

For components with multiple appearances, we'll specify each state.

For components with multiple states: {{object_id}} states:

Default:
Hover:
Active/Pressed:
Focus:
Disabled:
Loading:
Error:
Success:

(Only specify states that apply to this component)

Store component_states

✅ All states defined!

Page states: {{page_state_count}} Component states: {{component_state_count}}

Next: We'll define validation rules.

[C] Continue to 4C-07 (Validation)

EXAMPLE OUTPUT

page_states:
  default:
    trigger: 'Page loads normally'
    appearance: 'Empty form ready for input'
    actions: 'User can fill form and submit'

  loading:
    trigger: 'After submit clicked'
    appearance: 'Submit button shows spinner, form disabled'
    actions: 'Wait for response'

  error:
    trigger: 'Authentication fails'
    appearance: 'Error message above form, submit button re-enabled'
    actions: 'User can retry with different credentials'

  success:
    trigger: 'Authentication succeeds'
    appearance: 'Brief success message'
    actions: 'Redirect to dashboard'

component_states:
  signin-form-email-input:
    default:
      appearance: 'Gray border, placeholder text'
    focus:
      appearance: 'Primary color border, label floats up'
    filled:
      appearance: 'Dark border, label stays up'
    error:
      appearance: 'Red border, error message below'
    disabled:
      appearance: 'Light gray background, cursor not-allowed'

  signin-form-submit-button:
    default:
      appearance: 'Primary color background, white text'
    hover:
      appearance: 'Darker primary color'
    active:
      appearance: 'Even darker, slight scale down'
    loading:
      appearance: "Spinner icon, text 'Signing in...'"
    disabled:
      appearance: 'Gray background, lower opacity'

NEXT STEP

Load substeps/4c-07-validation.md

2.6 KiB Raw Blame History