Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Number Input docs fixes #38521

Merged
merged 3 commits into from
Aug 29, 2023
Merged

[docs] Number Input docs fixes #38521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00d39aa
Small docs fixes and tweaks
mj12albert Aug 17, 2023
686687a
Fix intro component arrow alignment
mj12albert Aug 17, 2023
fe1ffa7
Revert page index
mj12albert Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions docs/data/base/components/number-input/NumberInputIntroduction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref
}}
slotProps={{
incrementButton: {
children: '▴',
children: <span className="arrow">▴</span>,
},
decrementButton: {
children: '▾',
children: <span className="arrow">▾</span>,
},
}}
{...props}
Expand Down Expand Up @@ -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]};
Expand All @@ -141,5 +141,9 @@ const StyledButton = styled('button')(
grid-column: 2/3;
grid-row: 2/3;
}

& .arrow {
transform: translateY(-1px);
}
`,
);
10 changes: 7 additions & 3 deletions docs/data/base/components/number-input/NumberInputIntroduction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(
}}
slotProps={{
incrementButton: {
children: '▴',
children: <span className="arrow">▴</span>,
},
decrementButton: {
children: '▾',
children: <span className="arrow">▾</span>,
},
}}
{...props}
Expand Down Expand Up @@ -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]};
Expand All @@ -145,5 +145,9 @@ const StyledButton = styled('button')(
grid-column: 2/3;
grid-row: 2/3;
}

& .arrow {
transform: translateY(-1px);
}
`,
);
10 changes: 7 additions & 3 deletions docs/data/base/components/number-input/number-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<NumberInput min={-10} max={10} />
<NumberInput min={-10} max={10} />

// Open-ended
<NumberInput min={0} />
// Open-ended
<NumberInput min={0} />
```

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.
Expand All @@ -63,6 +63,10 @@ The `step` prop can be used to defined the granularity of the change in value wh
<NumberInput min={0} step={2} />
```

:::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 <kbd>Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.
Expand Down