Create state matrix

[taysea]

There a variety of states, some can exist together, some can't.

For example,

• enabled

• disabled

• hover

• selected

• selected + hover ..

• [x] Gather visual examples

• [ ] Align with team on state names and combinations

• [ ] Create list of state names we can use going forward

[oliverHPE]

Have begun to put together examples of different state combination. The checkbox gives us good coverage for this task. Note that not all components can take on these state combinations.

[oliverHPE]

@taysea There is potentially some ambiguity around the meaning of pressed/active in the team. Essentially, there are two kinds of thing we need to have names for:

1. The first is the state of something while it is being pressed, a temporary state change that exists after a click/tap and ends at release.
2. The second is the state of something that stays active or pressed (not unlike selected, or checked).

Think it's worth having a discussion with the wider team to align on this question.

[taysea]

Based on convention from reputable design systems, we'll follow "selected" as terminology for the persistent state: https://hpe.slack.com/archives/GPPLUK6LR/p1719256167536559

[taysea]

@oliverHPE Is this an accurate representation of state matrix you're proposing? https://hpe.atlassian.net/l/cp/SY97H6j7

[oliverHPE]

@taysea That's pretty much the most of it. We'll just need to add 'dragged', 'visited' and possibly validation states, like critical (or error). So that you could get something like error.hover. Will update the confluence.

[taysea]

Re-opening because I have a few questions on the validation states.