PJs Figma component: Path
Final design
- Simple dissolve in/out - 100ms, linear
- Overflow arrow slide - 250ms, ease in & out
Documentation
Paths are horizontal process flows composed of a series of "stages". Like tabs, paths let users focus in on specific content at each stage whilst still keeping all the other stages in view. Only one stage can be active at a given time.
Usage
|
|
---|---|
Use paths rather than tabs when there is a process with unique content at each stage (e.g. DevOps lifecycle). | Paths should not be nested. |
Paths should not be used as an indicator of a user's progress within a process (e.g. in a checkout). |
Paths are designed to be flexible. Therefore, there are a number of options and combinations which can be used to represent a process as accurately as possible...
Simple paths
A simple path just contains stages with titles.
Simple path |
---|
Counter paths
A counter path contains stages with a "counter" badge showing the number of items it contains. If there are any "All", "Overview" or "Summary"-type stages, then the counter of that stage should equal the sum total of all the others. Counters should not be included if they break this pattern.
Counter path |
---|
Metric paths
A metric path contains stages with an abbreviated metric such as 12d or 1.5h. The metric can be an integer or float, but should be limited to 5 digits maximum (and fewer when possible). Do not use multiple metric types on a single path (e.g. 1d & 6kg).
Metric path |
---|
Complicated paths
Some processes may be more complicated and require a path with a combination of icons, counters and metrics. An icon can also be used at a specific stage, such as an "Overview", to make it stand out more. Try to limit path complication where necessary.
Complicated path |
---|
Custom ordering
Nick to add when Value Stream functionality is released
Responsiveness
Paths share similar overflow properties to those of tabs:
- Design specifications - View Path/Instances/Overflow
- Animation - Overflow arrow slide animation - 250ms, ease in & out
Accessibility
FE Developers to add any accessibility details which are code or attribute related
Keyboard controls
Key | Action |
---|---|
Tab |
When focus is outside of the path, moves focus to the active stage. If focus is on the active stage, moves focus to the content within the content of that stage |
→ |
Focuses and activates the next stage in the path. If the current tab is the last tab in the tab list it activates the first tab. |
← |
Focuses and activates the previous stage in the path. If the current tab is the first tab in the tab list it activates the last tab. |
Accessibility resources
- MDN | ARIA: Tab role
- W3 | Example of Tabs with Automatic Activation
- Inclusive components | Tabbed interfaces
Demo
FE Developers to add
Design specification
Color, spacing, dimension, and layout specific information pertaining to this component can be viewed using the following link:
View Path component in Figma →
Related
Checklist
Make sure the following are completed before closing the issue:
-
Assignee: Create component in your own draft file in Figma using the component template, including all variations and states. -
Assignee: Ask another Figma Pilot Designer to review your component (make sure they have edit permissions). -
Reviewer: Review and approve assignee’s addition. Ensure that component matches Sketch specs, includes all current variations and states, and (if applicable) is responsive. -
Assignee: Add the component to the Pajamas UI Kit file, and view the component in the Assets panel to ensure it aligns with what’s outlined in the document and asset library structure documentation. -
Assignee: Publish the library changes along with a clear commit message. -
Assignee: Update component link in the issue. -
Assignee: Move your draft file to the Component archive Figma project. -
Assignee: Add a link to the Figma file in the component’s page of Pajamas. Use View design in Pajamas UI Kit →
for the link text. This replaces any link to Sketch Measure specs. Anyone with the link should be able to view the file.
Previous exploration
Exploration document in Figma →
See previous component exploration
1. Style variations
Please feel free to mix & match too!
Variation | Image |
---|---|
1a | |
1b | |
1c | |
1d (c/o @timnoah) | |
1e (c/o @jeldergl) | |
1f (c/o @jeldergl) |
2. Mobile variations
2a. Dropdowns | 2b. Friendly radio | 2c. Default radio | 2d. Chevron with arrows | 2e. Chevron hor. scroll | 2f. Arrows & pips |
---|---|---|---|---|---|