feat(Button): add orientation prop - #6882
Conversation
Add an `orientation` prop that controls how the icon and label are laid out inside the button. `vertical` stacks them, icon above label. The local `orientation` from `useFieldGroup` is renamed to `fieldGroupOrientation` so the group keeps driving border-radius joining while the new prop drives content layout. Also resets `block`'s `trailingIcon: ms-auto` to `ms-0` when vertical, where it would otherwise become a cross-axis margin, and constrains the label with `max-w-full` so `truncate` still applies in a column. Resolves nuxt#6527
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (80)
📒 Files selected for processing (5)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthroughThe Button component now supports a horizontal or vertical Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to The change adds an optional Button orientation behavior while preserving the horizontal default, with documentation and snapshots updated; no actionable merge-blocking risk remains beyond normal checks and review. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Full details: Linked Issues checkExplanation The changes satisfy issue Full details: Docstring CoverageExplanation No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (3 skipped: 3 unsupported.) ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Some tools did not complete. Review the errors below. 🔧 ESLint
playgrounds/nuxt/app/pages/components/button.vueParsing error: Unexpected token > src/runtime/components/Button.vueParsing error: Unexpected token ) src/theme/button.tsParsing error: Unexpected token {
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 |
Merging this PR will regress 1 benchmark
|
| Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|
| ❌ | toggle loading |
28.1 ms | 39.6 ms | -29.08% |
| ⚡ | ULink (default slot) |
10.9 ms | 6 ms | +81.64% |
| ⚡ | UButton (no link) |
31.8 ms | 25.4 ms | +24.96% |
Tip
Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.
Comparing J-Michalek:feat/button-orientation (7388a4b) with v4 (bb55709)
commit: |
1 participant
🔗 Linked issue
Resolves #6527
❓ Type of change
📚 Description
Adds an
orientationprop toButtonthat controls how the icon and label are laid out inside the button.verticalstacks them — icon on top, label below — which is the layout you want for mobile tab bars, toolbars, and card-style buttons. Until now this needed a wrapper component or an override ofui.base, which breaks whenever the theme changes.This follows the
orientationpattern already used by 30 components;UserandInputRatingdo the same thing — a leaf component flipping its own root flex direction. The default ishorizontal, so existing buttons render identically.Notes on the implementation:
orientationis separate from thefieldGroupvariant.Buttonalready consumed anorientationfrom a wrapping<UFieldGroup>viauseFieldGroup, used only to join border radii. That local is nowfieldGroupOrientation, so the group keeps driving radius joining while the new prop drives content layout. The two are independent: a vertical<UFieldGroup>still yields horizontal buttons with correctly joined corners, and averticalbutton inside a horizontal group stacks its content while keeping the group's side-by-side radii.block+orientation="vertical"needed a fix to compose. Theblockvariant setstrailingIcon: 'ms-auto'to push the trailing icon to the end of the main axis. In a column that becomes a cross-axis margin and shoves the icon to one side, so ablock+verticalcompound variant resets it toms-0.truncateneeded a width constraint. In a row the label is a shrinkable flex item, sotruncateworks. In a column it is sized to its content, sotruncatesilently does nothing and long labels overflow the padding box. The vertical branch addsmax-w-full(plustext-center, which also keeps wrapped labels centered under the icon for anyone overridingwhitespace-normal).data-orientationon the root, matchingUser,Alert,Toastand others. This is why the snapshot diff is large: every renderedButtongains the attribute. No classes changed — verified by diffing all ~900 affected snapshots with the attribute stripped, which comes out byte-identical.One thing deliberately left out: the
sizevariants keep their horizontal-biased padding (px-2.5 py-1.5atmd), so stacked buttons read a little wide. Retuning that means fivesize × orientationcompound variants and an opinionated call on what stacked padding should be. It is tunable meanwhile viaui.baseorapp.config.ui.button.📝 Checklist