feat(horizontal-stepper): new TEDI-ready component #405#437
Open
mart-sessman wants to merge 6 commits into
Open
feat(horizontal-stepper): new TEDI-ready component #405#437mart-sessman wants to merge 6 commits into
mart-sessman wants to merge 6 commits into
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (10)
📝 WalkthroughWalkthroughThis PR introduces a complete horizontal stepper component for multi-step workflows. HorizontalStepper provides a parent component that orchestrates child items, auto-assigns step numbers via Angular signals, and supports configurable backgrounds and responsive compact layouts. Each item renders a step button with label, optional description, and dynamic visual states (selected, completed, error, disabled). ChangesHorizontalStepper Component
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts (1)
85-114: ⚡ Quick winAvoid exposing Storybook controls that don’t affect rendering.
ariaLabelandcompactare declared inargTypes, but several templates hardcodeariaLabeland skip[compact], so those controls are inert in those stories. Either bind them frompropsor remove those controls for fixed-state stories.Example adjustment (representative)
- <tedi-horizontal-stepper ariaLabel="Form progress" [background]="background"> + <tedi-horizontal-stepper + [ariaLabel]="ariaLabel" + [background]="background" + [compact]="compact" + >Also applies to: 124-125, 141-142, 158-159, 176-177, 201-202
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts` around lines 85 - 114, Some stories declare argTypes for ariaLabel and compact but the story templates either hardcode ariaLabel or omit binding [compact], making those Storybook controls inert; update each affected story template (e.g., the story functions that render <tedi-horizontal-stepper ...>) to bind ariaLabel and compact from props (use :aria-label="ariaLabel" or v-bind and [compact]="compact" / :compact="compact" depending on framework) so controls affect rendering, or remove ariaLabel/compact from the story's argTypes if the story is meant to be a fixed-state example; ensure changes touch the story export functions/templates referenced in horizontal-stepper.stories.ts (the stories around the mentioned ranges) so controls match actual inputs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@tedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.ts`:
- Around line 51-54: The onClick() handler currently only guards against
selected() but should also guard against disabled() to prevent actions when the
item is disabled; update the onClick() method in
horizontal-stepper-item.component.ts to return early if this.disabled() (in
addition to this.selected()) so that stepSelect.emit() is never called for
disabled items.
---
Nitpick comments:
In `@tedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.ts`:
- Around line 85-114: Some stories declare argTypes for ariaLabel and compact
but the story templates either hardcode ariaLabel or omit binding [compact],
making those Storybook controls inert; update each affected story template
(e.g., the story functions that render <tedi-horizontal-stepper ...>) to bind
ariaLabel and compact from props (use :aria-label="ariaLabel" or v-bind and
[compact]="compact" / :compact="compact" depending on framework) so controls
affect rendering, or remove ariaLabel/compact from the story's argTypes if the
story is meant to be a fixed-state example; ensure changes touch the story
export functions/templates referenced in horizontal-stepper.stories.ts (the
stories around the mentioned ranges) so controls match actual inputs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 867ef4a5-4164-403b-bdbb-398d525a5101
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (15)
package.jsonskills/tedi-angular/references/components.mdtedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.htmltedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.scsstedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.spec.tstedi/components/navigation/horizontal-stepper/horizontal-stepper-item/horizontal-stepper-item.component.tstedi/components/navigation/horizontal-stepper/horizontal-stepper-item/index.tstedi/components/navigation/horizontal-stepper/horizontal-stepper.component.htmltedi/components/navigation/horizontal-stepper/horizontal-stepper.component.scsstedi/components/navigation/horizontal-stepper/horizontal-stepper.component.spec.tstedi/components/navigation/horizontal-stepper/horizontal-stepper.component.tstedi/components/navigation/horizontal-stepper/horizontal-stepper.stories.tstedi/components/navigation/horizontal-stepper/index.tstedi/components/navigation/index.tstedi/services/translation/translations.ts
airikej
reviewed
May 14, 2026
| gap: var(--stepper-item-horizontal-inner-spacing); | ||
| align-items: flex-start; | ||
| width: auto; | ||
| min-height: 40px; |
Contributor
There was a problem hiding this comment.
maybe use the variable here? min-height: var(--stepper-item-horizontal-min-height);
Contributor
|
currently the items seem to be missing focus styles? if i navigate with keyboard its hard to understand on which item i'm currently on |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds the new TEDI-ready Horizontal Stepper component (and its
HorizontalStepperItemsub-component).This PR is a fresh re-open of #410, which was closed automatically during a force-push and could not be reopened. Code is identical (cherry-picked from the same commits, now applied cleanly on top of the post-revert
rc).Test plan
tedi-horizontal-stepperrenders correctlySummary by CodeRabbit
Release Notes
New Features
Documentation
Chores