Skip to content

Conversation

@yeonjulee1005
Copy link
Contributor

πŸ”— Linked issue

#5669

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

Adds click functionality to the step title in the UStepper component, allowing users to navigate directly to a step by clicking on the title text.

Changes:

  • Added click event handler (@click) to StepperTitle component
  • Implemented goToStep function to handle step navigation logic
  • Checks disabled state (both item-level and component-level) to determine clickability
  • Applies cursor: pointer style to clickable titles for visual feedback
  • Updated snapshot tests (Stepper.spec.ts.snap, Stepper-vue.spec.ts.snap)

User Experience Improvements:

  • Previously only the indicator (circular button) was clickable, now the title text is also clickable
  • Provides a larger clickable area, improving accessibility
  • Aligns with common stepper component UX patterns
  • Disabled steps are properly handled and cannot be clicked, ensuring consistent behavior

As-Is

2025-12-13.1.43.40.mov

To-Be

2025-12-13.1.44.34.mov

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Users can now click on the step title to navigate directly to that step, providing a more intuitive navigation experience. The title shows a pointer cursor when clickable and respects the disabled state of both the item and the component.

Changes:
- Add goToStep function to handle step navigation on title click
- Add click event handler to StepperTitle component
- Add conditional cursor pointer style when step is not disabled
- Ensure click handler respects both item.disabled and props.disabled states
@github-actions github-actions bot added the v4 #4488 label Dec 13, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 13, 2025

npm i https://pkg.pr.new/@nuxt/ui@5670

commit: 3a0edf1

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

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant