Skip to content

add: Steps component - #687

Open
davedbase wants to merge 2 commits into
solid2from
v2/steps
Open

add: Steps component#687
davedbase wants to merge 2 commits into
solid2from
v2/steps

Conversation

@davedbase

@davedbase davedbase commented Jul 16, 2026

Copy link
Copy Markdown

Closes #520

  • Adds a new Steps component (@kobalte/core/steps) modeled on Ark UI's Steps, following Kobalte's existing anatomy/context conventions: Root, List, Item, Trigger, Indicator, Separator, Content, CompletedContent, Progress, NextTrigger, PrevTrigger.
  • Fixed numeric range model (count steps navigated by index) rather than a dynamic collection — no DOM-collection/roving-tabindex machinery needed, unlike Tabs/ToggleGroup.
  • Supports linear mode (forward navigation gated by isStepValid, backward always allowed), isStepSkippable to bypass steps during next/prev navigation, a dedicated completed state (CompletedContent), a Progress part plus a --percent CSS variable on the root, and controlled/uncontrolled value.
  • Fixed a real rendering bug found after initial implementation: Content/CompletedContent copied Tabs.Content's createPresence-based transition pattern, but its exit path always goes through a real (if 0ms) setTimeout, leaving a one-tick window where the outgoing and incoming step's content were both mounted at once — visible as a flicker on every step change. Replaced with a plain <Show> for an atomic swap; forceMount still available for consumers who want to drive their own CSS transitions.
  • Closed two accessibility gaps found on review, both matching existing precedent elsewhere in this codebase: Separator is now aria-hidden="true" (matching Breadcrumbs.Separator), and Trigger/Content are now cross-referenced via aria-controls/aria-labelledby with auto-generated (overridable) ids (matching how Tabs links its triggers and panels).
  • Adds full documentation: docs/core/components/steps.mdx (Import/Features/Anatomy/Example/Usage/API Reference/Rendered Elements) plus live examples, and a nav entry.

@jer3m01

jer3m01 commented Jul 17, 2026

Copy link
Copy Markdown
Member

Looks nice! Previous PR would be good to check/compare to #523 (didn't end up getting finished). Some comments might apply, will do a full review once current components have been fully ported.

@davedbase davedbase moved this from Backlog to Ready in Kobalte - Solid 2 Jul 17, 2026
@davedbase

Copy link
Copy Markdown
Author

Looks nice! Previous PR would be good to check/compare to #523 (didn't end up getting finished). Some comments might apply, will do a full review once current components have been fully ported.

Ah good point, I should pay more attention to existing PRs. I reviewed 523 and took some pointers from it.

Import/formatting fixes

  • Added Kbd to the import line so keyboard keys render via the proper <Kbd> component instead of raw <kbd> HTML
  • Updated the Features bullet to use <Kbd> for Home/End/Enter/Space
  • Fixed the Anatomy code snippet, which was missing the required count prop (<Steps><Steps count={3}>)

New API Reference sections (previously undocumented entirely)

  • Steps.List — notes it wraps Tabs.List, documents data-orientation
  • Steps.Trigger — documents that it wraps Tabs.Trigger, the aria-controls/aria-labelledby cross-referencing with Steps.Content, aria-current="step", and its data-orientation/data-state/data-complete/data-current/data-incomplete attributes
  • Steps.Indicator — documents its data-complete/data-current/data-incomplete attributes
  • Steps.Separator — documents aria-hidden="true" and its status data attributes (previously only mentioned in prose under Steps.Item)
  • Steps.NextTrigger / Steps.PrevTrigger — documents the disabled behavior tied to hasNextStep/hasPrevStep
  • Steps.Progress — documents role="progressbar", aria-valuenow/aria-valuemin/aria-valuemax, and data-complete

Existing sections corrected

  • Steps.Content / Steps.CompletedContent — added the missing data-current attribute row for Steps.Content
  • useStepsContext — added the missing isStepValid, isStepSkippable, canChangeStep, and changeStep entries

New top-level section

  • Added ## Accessibility### Keyboard Interactions, mirroring tabs.mdx's table format but rewritten to reflect that Steps always uses manual activation — arrow keys/Home/End only move focus, while Enter/Space commits navigation subject to linear/isStepValid validation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Ready

Development

Successfully merging this pull request may close these issues.

2 participants