Add ProgressTabs process stepper - #145
Conversation
Deploying anta with
|
| Latest commit: |
cbd6b44
|
| Status: | ⚡️ Build in progress... |
|
What do you think about renaming it to StepTabs? Or just Steps? I'm afraid of having extra Prev/Continue buttons inside the shadow dom. I'm not against providing such options on JSX but I think it is just additional things that consumers could compose. So I suggest to not have those Prev Next buttons because people could configure and just pass them separately... If anything we should dedicate space and teach how to perform capture of the event and switching tabs in a controlled way... I found that the best references would be:
And I think we should have flexibility for consumers to be able to assign any icon/number letter and easily change background look of the step, and the line too. I think size is a bit shifted to the small: And tab title shouldn't feel like it is smaller than the content, the example should probably use <Text component with appropriate sizing. Why do we need a special component instead of customizing Tabs? Because of extra statuses on StepTabs? |
# Conflicts: # CHANGELOG.md # docs/changelog.md
4d3c1a7 to
6a49995
Compare
- selected neutral loader inherits marker foreground (was invisible on primary) - loader tones defer to forced-colors CanvasText - vertical panel parks after last step when value matches no option - note the display:contents a11y tradeoff - drop stale Steps 'Changed' changelog entry
The completed-connector color was rebuilt in CSS from separate lightness, chroma, and source knobs, then overridden across light/dark/tone/vertical. Those values resolve exactly to the existing --border-2 / --border-2-<tone> tokens, so point at the tokens instead. Rename the active marker border to --steps-marker-active-border (mirroring --steps-marker-rest-border) so the connector can reuse Tabs' per-tone --tab-selected-border. No visual change.
2 participants
Summary
ProgressTabsprocess stepper with four statuses, three sizes, horizontal and vertical layouts, and customizable navigationVerification
pnpm run lintpnpm run typecheckpnpm run buildpnpm --filter anta-site run build