From 00d39aa45526d2a638ef58c48d4749b179701f71 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 17 Aug 2023 20:56:24 +0800 Subject: [PATCH 1/3] 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 29510f133d6c99..9ec531f9103c00 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' }, From 686687a0d9a1e3913f771b6d9ef0e293ac438546 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 17 Aug 2023 20:56:49 +0800 Subject: [PATCH 2/3] Fix intro component arrow alignment --- .../components/number-input/NumberInputIntroduction.js | 10 +++++++--- .../number-input/NumberInputIntroduction.tsx | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js index 54d5a32ea056ed..d0518191dbbbd2 100644 --- a/docs/data/base/components/number-input/NumberInputIntroduction.js +++ b/docs/data/base/components/number-input/NumberInputIntroduction.js @@ -16,10 +16,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref }} slotProps={{ incrementButton: { - children: '▴', + children: ▴, }, decrementButton: { - children: '▾', + children: ▾, }, }} {...props} @@ -116,8 +116,8 @@ const StyledButton = styled('button')( height: 19px; font-family: system-ui, sans-serif; font-size: 0.875rem; + line-height: 1; box-sizing: border-box; - line-height: 1.2; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -141,5 +141,9 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 2/3; } + + & .arrow { + transform: translateY(-1px); + } `, ); diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction.tsx index df41c99be9c9d0..fbab0df46eda37 100644 --- a/docs/data/base/components/number-input/NumberInputIntroduction.tsx +++ b/docs/data/base/components/number-input/NumberInputIntroduction.tsx @@ -20,10 +20,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput( }} slotProps={{ incrementButton: { - children: '▴', + children: ▴, }, decrementButton: { - children: '▾', + children: ▾, }, }} {...props} @@ -120,8 +120,8 @@ const StyledButton = styled('button')( height: 19px; font-family: system-ui, sans-serif; font-size: 0.875rem; + line-height: 1; box-sizing: border-box; - line-height: 1.2; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -145,5 +145,9 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 2/3; } + + & .arrow { + transform: translateY(-1px); + } `, ); From fe1ffa76ef5a9e5d9c95899a13b4caba12612cc4 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Tue, 29 Aug 2023 11:24:15 +0800 Subject: [PATCH 3/3] Revert page index --- docs/data/base/pages.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 9ec531f9103c00..29510f133d6c99 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', newFeature: true }, + { pathname: '/base-ui/react-number-input', title: 'Number Input' }, { 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' },