search

GCTC-NTGC / gc-digital-talent

GC Digital Talent is the new recruitment platform for digital and tech jobs in the Government of Canada. // Talents numériques du GC est la nouvelle plateforme de recrutement pour les emplois numériques et technologiques au gouvernement du Canada.
https://talent.canada.ca
GNU Affero General Public License v3.0
17 stars 7 forks source link

⚙️ Horizontal Stepper #10761

Open petertgiles opened 1 month ago

petertgiles commented 1 month ago

image

⚙️ Summary

Desktop Figma design • Mobile Figma design • Contact @substrae with design questions

This component is a variant of the existing progress stepper and condenses the design to function in a smaller, horizontal space. Interactions and behaviour are generally the same as the existing stepper, however there are slight differences, including the introduction of a new tooltip.

[!IMPORTANT] For all design specifications, please see the Figma file. We're trying to take a new approach where we document designs in a single location - the migration of information back and forth between Figma and Github is causing discrepancies and wasted time.

### ✅ Requirements
- [ ] Allow for as few as 3 and as many as 12 steps
- [ ] Ensure steps in contain all the described states
- [ ] Ensure all layout criteria are met in mobile
- [ ] Ensure all color criteria are met in mobile
- [ ] Apply all mobile-specific interaction states
- [ ] Ensure focus states are handled on mobile
- [ ] Ensure all layout criteria are met in desktop
- [ ] Ensure all color criteria are met in desktop
- [ ] Apply all desktop-specific interaction states
- [ ] Ensure hover states are handled on desktop
- [ ] Ensure focus states are handled on desktop
petertgiles commented 2 weeks ago

Our current stepper has quite a lot of non-visual stuff going on for a11y, for example, describing the name of each step and a description of what state it's in. Is it safe to assume that all of that is the same for this version? image

petertgiles commented 2 weeks ago

Our current stepper assumes that all future steps are disabled and cannot be interacted with. It seems like that's not the case with this version?

substrae commented 2 weeks ago

@petertgiles This remains the same, with the exception that you should be able to focus and hover them to get the contextual information provided by the tooltip.