-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs][base] Add Tailwind CSS + plain CSS demo on the NumberInput page (
- Loading branch information
1 parent
1cb83a5
commit 2843305
Showing
15 changed files
with
703 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 0 additions & 13 deletions
13
docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview
This file was deleted.
Oops, something went wrong.
119 changes: 85 additions & 34 deletions
119
docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,99 @@ | ||
| import * as React from 'react'; | ||
| import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) { | ||
| export default function NumberInputBasic() { | ||
| const [value, setValue] = React.useState(); | ||
| return ( | ||
| <NumberInput | ||
| aria-label="Demo number input" | ||
| placeholder="Type a number…" | ||
| value={value} | ||
| onChange={(event, val) => setValue(val)} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); | ||
|
|
||
| const NumberInput = React.forwardRef(function NumberInput(props, ref) { | ||
| return ( | ||
| <BaseNumberInput | ||
| {...props} | ||
| ref={ref} | ||
| slotProps={{ | ||
| root: (ownerState) => ({ | ||
| className: clsx( | ||
| 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', | ||
| ownerState.focused | ||
| ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' | ||
| : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', | ||
| ), | ||
| }), | ||
| input: { | ||
| className: | ||
| 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', | ||
| root: (ownerState) => { | ||
| const resolvedSlotProps = resolveSlotProps( | ||
| props.slotProps?.root, | ||
| ownerState, | ||
| ); | ||
| return { | ||
| ...resolvedSlotProps, | ||
| className: clsx( | ||
| 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', | ||
| ownerState.focused | ||
| ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' | ||
| : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', | ||
| resolvedSlotProps?.className, | ||
| ), | ||
| }; | ||
| }, | ||
| incrementButton: { | ||
| children: '▴', | ||
| className: | ||
| 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', | ||
| input: (ownerState) => { | ||
| const resolvedSlotProps = resolveSlotProps( | ||
| props.slotProps?.input, | ||
| ownerState, | ||
| ); | ||
| return { | ||
| ...resolvedSlotProps, | ||
| className: clsx( | ||
| 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', | ||
| resolvedSlotProps?.className, | ||
| ), | ||
| }; | ||
| }, | ||
| decrementButton: { | ||
| children: '▾', | ||
| className: | ||
| 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', | ||
| incrementButton: (ownerState) => { | ||
| const resolvedSlotProps = resolveSlotProps( | ||
| props.slotProps?.incrementButton, | ||
| ownerState, | ||
| ); | ||
| return { | ||
| ...resolvedSlotProps, | ||
| children: '▴', | ||
| className: clsx( | ||
| 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', | ||
| resolvedSlotProps?.className, | ||
| ), | ||
| }; | ||
| }, | ||
| decrementButton: (ownerState) => { | ||
| const resolvedSlotProps = resolveSlotProps( | ||
| props.slotProps?.decrementButton, | ||
| ownerState, | ||
| ); | ||
| return { | ||
| ...resolvedSlotProps, | ||
| children: '▾', | ||
| className: clsx( | ||
| 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', | ||
| resolvedSlotProps?.className, | ||
| ), | ||
| }; | ||
| }, | ||
| }} | ||
| {...props} | ||
| ref={ref} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| export default function NumberInputBasic() { | ||
| const [value, setValue] = React.useState(); | ||
| return ( | ||
| <CustomNumberInput | ||
| aria-label="Demo number input" | ||
| placeholder="Type a number…" | ||
| value={value} | ||
| onChange={(event, val) => setValue(val)} | ||
| /> | ||
| ); | ||
| } | ||
| NumberInput.propTypes = { | ||
| /** | ||
| * The props used for each slot inside the NumberInput. | ||
| * @default {} | ||
| */ | ||
| slotProps: PropTypes.shape({ | ||
| decrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), | ||
| incrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), | ||
| input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), | ||
| root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), | ||
| }), | ||
| }; |
Oops, something went wrong.