Fluentui: SpinButton with width set below 100px does not properly render

[tomasro27]

Environment Information

• Package version(s): 7.31.2
• Browser and OS versions: chrome, windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/tomasro27/pen/zYOgVbZ?&editable=true

Actual behavior:

Spin button does not render properly if its width is set to anything below 100px (~97px). The size is not set to the width specified, and the up/down arrows are misaligned.

It seems like there are min-width properties set, but I did not find any documentation about minimum width for this component.
I am trying to build a DatetimePicker using spin buttons, that's why I would like to have the spin buttons to be smaller in width.

Expected behavior:

To properly render with the specified width
Make up/down arrows properly fit inside the container/box of the spin button

Priorities and help requested:

Are you willing to submit a PR to fix? (No)

Requested priority: (Normal)

Products/sites affected: workaround is to set width to 100px

[khmakoto]

Hi @tomasro27, thanks for filing this issue! This reproes for me in you codepen. I think the issue here is that we have a couple of minWidths not well defined. I've updated your codepen above to see how a fix would look like and I'll try to bake this into a fix as soon as I can.

[tomasro27]

@khmakoto awesome, thank you so much!

[khmakoto]

@tomasro27 you're welcome!

[khmakoto]

@aneeshack4 I wanted your input on this one, do you think we should change the min-width values? There is definitely something iffy going on here but wanted to know if you thought there is a specific way to go about it or if I should just come up with a solution and send a PR? Or if this is by design, in which case I think we should probably have a disclaimer about min-widths in our Overview (this last option I don't agree on because people shouldn't need to worry about it but it might be necessary).

[aneeshack4]

@khmakoto It looks like min-width is set for parts of SpinButton like input, root, and the wrapper but not the rest so perhaps that's why. Might have to play around with the values and add it to the remaining parts of the component - I think the different parts might need values calculated relative to each other.

[msft-github-bot]

:tada:This issue was addressed in #10788, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site