[base-ui] Create useNumberInput and NumberInput #36119

mj12albert · 2023-02-09T11:49:54Z

This PR will add useNumberInput and NumberInput to base.

One step toward closing #19154.

Summary

useNumberInput implements a number field component that currently supports positive and negative integers, and buttons that can increment and decrement the value. It's mostly adapted from useInput.
NumberInput uses useNumberInput internally and is the component counterpart.
In addition to the native onChange of the inner <input>, a onValueChange callback is provided that only fires when the value changes to a valid (clamped) value
I added @testing-library/user-event as some important keyboard interactions like inputting characters one by one and testing each change handler do not work with plain fireEvent
Last minute change: no role="spinbutton" because it doesn't work well with VO (see SpinButton doesn't increment or decrement on Voiceover VO controls microsoft/fluentui#13606)

Preview: https://deploy-preview-36119--material-ui.netlify.app/base/react-number-input/

mui-bot · 2023-02-09T11:52:39Z

Netlify deploy preview

docs/data/base/components/number-input/number-input.md

@material-ui/unstyled: parsed: +4.79% , gzip: +4.71%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 420053d

packages/mui-base/src/NumberInputUnstyled/useNumberInput.test.tsx

mj12albert · 2023-02-24T11:21:37Z

When should onChange be called?

@mui/core After using my own implementation, I'm starting to think it's not the best 🥲. I wrote up alternatives in the PR description above, would appreciate your thoughts the options I've came up with or other suggestions!

mnajdova

In terms of the open question regarding the onChange fire, I would recommend keeping it similar with how the native input number is working. People can still use onBlur if they want behavior similar to the other option.

packages/mui-base/src/NumberInputUnstyled/NumberInputUnstyled.types.ts

packages/mui-base/src/NumberInputUnstyled/useNumberInput.ts

mj12albert · 2023-08-01T15:32:27Z

@michaldudak @mnajdova I've addressed the remaining comments!

In particular:

To fix the import paths, I modified the docs pages components: b887e89
I noticed native CSS nesting doesn't work in Firefox yet (it's behind an experimental flag) and opened a separate issue: [docs][base-ui] Plain CSS nesting not supported in Firefox #38266
After failing to align the arrows properly with CSS, I found it there may be an issue with the "small downward arrow" in Plex Sans... ended up using system-ui for arrows

michaldudak · 2023-08-02T09:24:29Z

The component import is still incorrect:

import Unstable_NumberInput as NumberInput from '@mui/base/Unstable_NumberInput';

should be

import NumberInput from '@mui/base/Unstable_NumberInput';

mj12albert · 2023-08-02T09:51:20Z

The component import is still incorrect:

👌 Fixed in 652c650 @michaldudak

michaldudak

Just one nit left, besides that, it's good to go!

There's one more issue we can tackle in a separate PR: slots and classes are not documented in the component API page.

michaldudak · 2023-08-02T10:00:26Z

docs/src/modules/components/ComponentsApiContent.js

@@ -146,9 +165,9 @@ export default function ComponentsApiContent(props) {
          <Heading text="import" hash={`${componentNameKebabCase}-import`} level="h3" />
          <HighlightedCode
            code={`
-import ${pageContent.name} from '${source}/${pageContent.name}';
+import ${namedImportName} from '${namedImportPath}';


Shouldn't this be the other way around?
import X from 'X' is the default import, while import { X } from 'X' is the named one.

mnajdova

Let add the component after merging in #37222

mnajdova · 2023-08-02T12:09:32Z

docs/data/base/components/number-input/NumberInputIntroduction.js

+import NumberInput, { numberInputClasses } from '@mui/base/Unstable_NumberInput';
+import { styled } from '@mui/system';
+
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) {


It's most important to have the Tailwind + Plain CSS demos on the introduction demo. It's the first thing people see when they come to the page :)

mnajdova · 2023-08-02T12:10:16Z

docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx

+} from '@mui/base/Unstable_NumberInput';
+import clsx from 'clsx';
+
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(


👍 for introducing new component, it helps with the readibility.

Co-authored-by: zanivan <victorzanivan@gmail.com>

oliviertassinari · 2023-08-15T00:36:01Z

@mj12albert Nice! A couple of opportunities I can notice in https://mui.com/base-ui/react-number-input/:

We had no GitHub issue for this new component, done
We were not linking this PR with the issue, done

1 Action vertical alignment bug: [docs] Number Input docs fixes #38521

2 Step rounding bug [number field] Support decimal values base-ui#41

3 Indentation issue on the docs page, should remove the tabs:

#38521

4 Special keyboard for mobile, it seems to use the regular keyboard layout now, see https://react-spectrum.adobe.com/blog/how-we-internationalized-our-numberfield.html#mobile for what I mean. [number field] Implement inputmode for mobile keyboard support base-ui#40
5 A missed opportunity for Twitter? https://twitter.com/devongovett/status/1389992231029800968 😁. @samuelsycamore I think this also can make the case for the benefit of https://www.notion.so/mui-org/Release-Batch-weekly-patches-341d87562b75473baa595ea30d496217.
6 I would love to see more live demos, e.g. step size, https://chakra-ui.com/docs/components/number-input/usage#setting-the-step-size, which I think depends a bit on https://www.notion.so/mui-org/Weekly-meeting-2023-08-14-af21836ef9af4f10b18875c61576148a?pvs=4#f21e5a831575454898f78676addd16ca, to not duplicate too much code. [number input] Improve demos #39274
7 Are we missing the use of useControlled()? There is no warning when changing control mode. [useNumberInput] Warn when switching between controlled and uncontrolled state #38514

oliviertassinari · 2023-10-03T00:14:53Z

@mj12albert Thanks for the follow-ups on my comment. Opening individual issues for each point is the way to go 👌

mj12albert added the package: base-ui Specific to @mui/base label Feb 9, 2023

mj12albert force-pushed the base/number-input branch 9 times, most recently from c4a5b72 to df004fe Compare February 22, 2023 14:57

mj12albert commented Feb 23, 2023

View reviewed changes

packages/mui-base/src/NumberInputUnstyled/useNumberInput.test.tsx Outdated Show resolved Hide resolved

mj12albert requested a review from michaldudak February 24, 2023 11:17

mj12albert requested a review from mnajdova February 24, 2023 11:25

mnajdova reviewed Feb 24, 2023

View reviewed changes

packages/mui-base/src/NumberInputUnstyled/NumberInputUnstyled.types.ts Outdated Show resolved Hide resolved

michaldudak reviewed Feb 24, 2023

View reviewed changes

mj12albert force-pushed the base/number-input branch 13 times, most recently from b6faf9a to 90777ca Compare March 2, 2023 06:17

More styling fixes

ca3b51b

mj12albert requested a review from mnajdova August 1, 2023 15:37

Another styling fix

25d8a68

Fix component import name

652c650

Fix svg sizing in buttons for mobile Safari

087e1f2

michaldudak approved these changes Aug 2, 2023

View reviewed changes

mj12albert added 2 commits August 2, 2023 18:08

Fix variable names

1735597

Change product to productId in md

420053d

mnajdova reviewed Aug 2, 2023

View reviewed changes

mj12albert changed the title ~~[base] Create useNumberInput and NumberInput~~ [base-ui] Create useNumberInput and NumberInput Aug 3, 2023

mj12albert merged commit f95ad25 into mui:master Aug 3, 2023
21 checks passed

mj12albert deleted the base/number-input branch August 3, 2023 10:17

ZeeshanTamboli mentioned this pull request Aug 3, 2023

[docs] Update API docs for Number Input component #38301

Merged

1 task

richbustos pushed a commit that referenced this pull request Aug 4, 2023

[base-ui] Create useNumberInput and NumberInput (#36119)

4b144e4

Co-authored-by: zanivan <victorzanivan@gmail.com>

mj12albert mentioned this pull request Aug 7, 2023

[docs][base-ui] Update number input API docs #38363

Merged

1 task

richbustos pushed a commit that referenced this pull request Aug 7, 2023

[base-ui] Create useNumberInput and NumberInput (#36119)

e005f88

Co-authored-by: zanivan <victorzanivan@gmail.com>

oliviertassinari added new feature New feature or request component: number field This is the name of the generic UI component, not the React module! labels Aug 15, 2023

mj12albert mentioned this pull request Sep 25, 2023

[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) #39096

Merged

1 task

mj12albert mentioned this pull request Feb 27, 2024

[number field] Support decimal values mui/base-ui#41

Open

oliviertassinari mentioned this pull request Oct 3, 2023

[number input] Improve demos #39274

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[base-ui] Create useNumberInput and NumberInput #36119

[base-ui] Create useNumberInput and NumberInput #36119

mj12albert commented Feb 9, 2023 •

edited by oliviertassinari

mui-bot commented Feb 9, 2023 •

edited

mj12albert commented Feb 24, 2023 •

edited

mnajdova left a comment

mj12albert commented Aug 1, 2023 •

edited

michaldudak commented Aug 2, 2023

mj12albert commented Aug 2, 2023

michaldudak left a comment

michaldudak Aug 2, 2023

mnajdova left a comment

mnajdova Aug 2, 2023 •

edited

mnajdova Aug 2, 2023

oliviertassinari commented Aug 15, 2023 •

edited

oliviertassinari commented Oct 3, 2023 •

edited

[base-ui] Create useNumberInput and NumberInput #36119

[base-ui] Create useNumberInput and NumberInput #36119

Conversation

mj12albert commented Feb 9, 2023 • edited by oliviertassinari

Summary

mui-bot commented Feb 9, 2023 • edited

Netlify deploy preview

Bundle size report

mj12albert commented Feb 24, 2023 • edited

mnajdova left a comment

Choose a reason for hiding this comment

mj12albert commented Aug 1, 2023 • edited

michaldudak commented Aug 2, 2023

mj12albert commented Aug 2, 2023

michaldudak left a comment

Choose a reason for hiding this comment

michaldudak Aug 2, 2023

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Aug 2, 2023 • edited

Choose a reason for hiding this comment

mnajdova Aug 2, 2023

Choose a reason for hiding this comment

oliviertassinari commented Aug 15, 2023 • edited

oliviertassinari commented Oct 3, 2023 • edited

mj12albert commented Feb 9, 2023 •

edited by oliviertassinari

mui-bot commented Feb 9, 2023 •

edited

mj12albert commented Feb 24, 2023 •

edited

mj12albert commented Aug 1, 2023 •

edited

mnajdova Aug 2, 2023 •

edited

oliviertassinari commented Aug 15, 2023 •

edited

oliviertassinari commented Oct 3, 2023 •

edited