PJs Figma component: Path
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.
|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...
A simple path just contains stages with titles.
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.
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).
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.
Nick to add when Value Stream functionality is released
Paths share similar overflow properties to those of tabs:
- Design specifications - View Path/Instances/Overflow
- Animation - Overflow arrow slide animation - 250ms, ease in & out
FE Developers to add any accessibility details which are code or attribute related
||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.|
- MDN | ARIA: Tab role
- W3 | Example of Tabs with Automatic Activation
- Inclusive components | Tabbed interfaces
FE Developers to add
Color, spacing, dimension, and layout specific information pertaining to this component can be viewed using the following link:
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.
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.
See previous component exploration
1. Style variations
Please feel free to mix & match too!
|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|
3. Animation variations
- a. Slide in/out
- b. Slide & expand in/out
- c. Slide in, dissolve out
- d. Simple dissolve in/out
- e. Dissolve in, slide out