Closed hsellik closed 3 months ago
Hello There !
To remove the extra padding, go to NumberFieldInput.vue
component in your project, then replace the px-10 py-2
class to p-2
.
Adding p-2
will break the NumberField
when the Decrement
and Increment
buttons are used in another place in the project (which is the case for me). A prop could solve that problem, but the user experience would feel awkward.
There are also other temporary options such as using flex justify-between
instead of relative
in NumberFieldContent
and absolute
in Increment
and Decrement
, but that would mean that the + and - buttons are not in the input anymore. Though they would flexibly work for both situations.
Oh, I understand, how about adding a boolean prop to the input, to conditionally change the padding based on the presense of the Inc/Dec buttons?
As stated above, a boolean prop could solve the problem, but developer experience would be lacking. It would not be much different from the temporary solution offered in the bug description.
I think we could use CSS feature like has
to solve this issue
I tried looking into has
, but unfortunately, couldn't come up with a good solution. It can also be a problem when it comes to browser support?
@Saeid-Za , @sadeghbarati , what do you think about a solution similar to the one offered by radix-vue?
flex
would be used on NumberFieldContent
. This would also mean that the "input CSS" (focus border, etc.) on NumberFieldInput
would be moved to NumberFieldContent
. I can make a PR tomorrow so you can see what I mean.
This would eliminate complex peer checking, but allow to use the component in different configurations:
That are not issue of shadcn, just add class first:px-1 last:pr-1
to the input to resolve that
While I agree, it's easy to fix, it's also a question of developer experience. Using a Number Field without decrement and increment is quite a common use case. Should developers modify the component themselves for this obvious use case, or should shadcn-vue provide a working solution out-of-the-box?
At the very least, there should be a class prop for the NumberFieldInput component and an example in the documentation so developers don't have to think about it.
Reproduction
https://codesandbox.io/p/devbox/shadcn-vue-numberfield-padding-xnwmrm
Describe the bug
When removing
NumberFieldDecrement
andNumberFieldIncrement
aroundNumberFieldInput
, the input has large padding on both sides.My temporary fix was to add
px-1
class toNumberFieldInput
like so:<NumberFieldInput class="px-1" />
The
NumberFieldInput
component must have a class prop to override the padding:System Info
Contributes