Research and prototype an update to states guidance on Design System website

[CharlotteDowns]

What

We identified gaps in the Design System styles guidance. This exploration is specifically focused on drafting new guidance around 'states' and will replace Understanding focus state styles.

Why

Writing this guidance will probably force us to face quite a few inconsistencies across different components…

This will be used as reference for users creating new components.

Outline:

• focus states
  • Charlotte D started work to synthesise and determine guidelines on focus states – i.e. how they look for links, buttons, images, banners, larger areas
• hover states
  • link underlines
  • using tints on buttons (and clickable things with larger touch areas like tabs)
• active states
  • basically the same as focus?
  • except buttons which do the skeuomorphic press-down thing by removing the bottom shadow
• ‘selected’ / current page

Who needs to work on this

Designer

Who needs to review this

The GOV.UK Design System team

Done when

• Carried out research on how other design systems approach states and lessons to learn from.
• Pulled together other issues and pull requests that may be relevant to changes made.
• Start a draft guidance a google doc.

Moving to new card:

• Draft a PR that includes new guidance and suggestions on where it could live.

[CharlotteDowns]

Working document for findings from research of other design systems

[CharlotteDowns]

Other related issues:

• Add disabled styles for form controls
• Disabled select text colour too faint?
• Select component page doesn't document error state or message
• Improve the focus style guidance to include linked images/ videos
• Inconsistent focus state on document list component #1193 in govuk_publishing_components repo

Supporting 'in active'/disabled states gets complicated because we strongly encourage teams not to use them. However there may be contexts where user research shows that they help users in particular user journeys, in these scenarios we want to be able to allow teams to provide the best experience.

[kellylee-gds]

Closing issue as moved to Done