From 242ffcf8720c0f265db0650cf5d8b33378f20a2f Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 17 Aug 2023 20:56:24 +0800 Subject: [PATCH] Small docs fixes and tweaks --- docs/data/base/components/number-input/number-input.md | 10 +++++++--- docs/data/base/pages.ts | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index 3fd2115b77585b..c634ff37ee997f 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -50,10 +50,10 @@ The following demo shows how to create a number input component, apply some styl The `min` and `max` props can be used to define a range of accepted values. You can pass only one of them to define an open-ended range. ```tsx - + - // Open-ended - +// Open-ended + ``` The `step` prop can be used to defined the granularity of the change in value when incrementing or decrementing. For example, if `min={0}` and `step={2}`, valid values for the component would be 0, 2, 4… since the value can only be changed in increments of 2. @@ -63,6 +63,10 @@ The `step` prop can be used to defined the granularity of the change in value wh ``` +:::warning +Support for decimal values or step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner! +::: + When the input field is in focus, you can enter values that fall outside the valid range. The value will be clamped based on `min`, `max` and `step` once the input field is blurred. Holding down the Shift key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step. diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 07c34afea6ba4f..b45b77ed27bc02 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -25,7 +25,7 @@ const pages: readonly MuiPage[] = [ { pathname: '/base-ui/react-button', title: 'Button' }, { pathname: '/base-ui/react-checkbox', title: 'Checkbox', planned: true }, { pathname: '/base-ui/react-input', title: 'Input' }, - { pathname: '/base-ui/react-number-input', title: 'Number Input' }, + { pathname: '/base-ui/react-number-input', title: 'Number Input', newFeature: true }, { pathname: '/base-ui/react-radio-button', title: 'Radio Button', planned: true }, { pathname: '/base-ui/react-rating', title: 'Rating', planned: true }, { pathname: '/base-ui/react-select', title: 'Select' },