feat: add annotation to steps - #4687
Conversation
7ef5077 to
e7a5b88
Compare
e7a5b88 to
f0eb56b
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4687 +/- ##
=======================================
Coverage 97.62% 97.62%
=======================================
Files 956 956
Lines 31004 31012 +8
Branches 11409 11410 +1
=======================================
+ Hits 30269 30277 +8
+ Misses 728 688 -40
- Partials 7 47 +40 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
f0eb56b to
a1b16c4
Compare
a1b16c4 to
d193f3f
Compare
d193f3f to
12ac93e
Compare
amanabiy
changed the title
add2bde to
67a4f61
Compare
67a4f61 to
3a63d03
Compare
8e7810b to
411c29f
Compare
| import createPermutations from '../utils/permutations'; | ||
| import PermutationsView from '../utils/permutations-view'; | ||
| import * as variants from './permutations-utils'; | ||
|
|
There was a problem hiding this comment.
I would create a separate permutations page for steps with annotations, where you can feature different layouts, custom steps, etc. Otherwise, the existing permutation pages grow too large.
| if (orientation === 'horizontal') { | ||
| return ( | ||
| <li className={styles.container}> | ||
| <div className={styles.header}> |
There was a problem hiding this comment.
This element does not contain the header, so using the header class here is incorrect. It contains the icon and connector. This is unexpected behavior, which means our test util findHeader is not also being able to find it. The refactor helps to make sure findHeader finds the header.
| {iconNode} | ||
| <hr className={connectorClassName} role="none" /> | ||
| </div> | ||
| <div className={styles['horizontal-header']}>{header}</div> |
There was a problem hiding this comment.
A separate horizontal-header class is not necessary anymore because this element is the actual header and can use the existing header class.
| const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']); | ||
| return ( | ||
| <li className={styles.container}> | ||
| <div className={styles.header}> |
There was a problem hiding this comment.
This wrapper was named header even though it does not consistently contain only the header. Renaming it to step-layout reserves header for the actual header content used by findHeader().
| return ( | ||
| <li className={styles.container}> | ||
| <div className={styles.header}> | ||
| <StepAnnotation>{annotation}</StepAnnotation> |
There was a problem hiding this comment.
Should we include the annotation in renderSteps for feature parity with the header, icon and description?
There was a problem hiding this comment.
In the API proposal, we agreed not to include annotation in renderStep because builders can already customize it as a ReactNode. If a use case emerges, we can always add it later, but I’d prefer not to block this PR on it.
3 participants
Description
Adds an optional
annotationslot to the Steps component. It can be used to display supplementary information, such as timestamps, before each step’s status indicator.Annotations are supported in vertical, horizontal, and custom rendered steps. The layout keeps annotations, status indicators, headers, and details aligned when content wraps. Vertical steps use a single connector that grows with wrapped annotations or details while preserving existing spacing for shorter content.
This change also adds test utility support and a dedicated permutations page covering different annotation layouts.
Related links, issue #, if available: Chorus [AzznTbsZXUA1]
How has this been tested?
Image:
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.