From fad81b2480ce761e407528490421b4fe832324cd Mon Sep 17 00:00:00 2001 From: Ali Sasani Babak Date: Tue, 12 Sep 2023 00:55:49 +0100 Subject: [PATCH] add css and tailwind demo for number-input component --- .../NumberInputIntroduction/css/index.js | 157 ++++++++++++++++++ .../NumberInputIntroduction/css/index.tsx | 157 ++++++++++++++++++ .../system/index.js} | 0 .../system/index.tsx} | 0 .../system/index.tsx.preview} | 0 .../NumberInputIntroduction/tailwind/index.js | 99 +++++++++++ .../tailwind/index.tsx | 93 +++++++++++ .../tailwind/index.tsx.preview | 6 + .../components/number-input/number-input.md | 2 +- 9 files changed, 513 insertions(+), 1 deletion(-) create mode 100644 docs/data/base/components/number-input/NumberInputIntroduction/css/index.js create mode 100644 docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx rename docs/data/base/components/number-input/{NumberInputIntroduction.js => NumberInputIntroduction/system/index.js} (100%) rename docs/data/base/components/number-input/{NumberInputIntroduction.tsx => NumberInputIntroduction/system/index.tsx} (100%) rename docs/data/base/components/number-input/{NumberInputIntroduction.tsx.preview => NumberInputIntroduction/system/index.tsx.preview} (100%) create mode 100644 docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js create mode 100644 docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx create mode 100644 docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js new file mode 100644 index 00000000000000..197d1f6a33b354 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js @@ -0,0 +1,157 @@ +import * as React from 'react'; +import { + Unstable_NumberInput as NumberInput, + numberInputClasses, +} from '@mui/base/Unstable_NumberInput'; +import { useTheme } from '@mui/system'; + +export default function NumberInputIntroduction() { + return ( + + ▾, + }, + incrementButton: { + className: 'btn increment', + children: ▴, + }, + }} + aria-label="Demo number input" + placeholder="Type a number…" + /> + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx new file mode 100644 index 00000000000000..197d1f6a33b354 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx @@ -0,0 +1,157 @@ +import * as React from 'react'; +import { + Unstable_NumberInput as NumberInput, + numberInputClasses, +} from '@mui/base/Unstable_NumberInput'; +import { useTheme } from '@mui/system'; + +export default function NumberInputIntroduction() { + return ( + + ▾, + }, + incrementButton: { + className: 'btn increment', + children: ▴, + }, + }} + aria-label="Demo number input" + placeholder="Type a number…" + /> + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.js rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.js diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.tsx rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.tsx.preview rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js new file mode 100644 index 00000000000000..ca0d01479f41b0 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js @@ -0,0 +1,99 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput'; +import clsx from 'clsx'; + +export default function NumberInputIntroduction() { + const [value, setValue] = React.useState(); + return ( + setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const NumberInput = React.forwardRef(function NumberInput(props, ref) { + return ( + { + 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, + ), + }; + }, + 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, + ), + }; + }, + 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, + ), + }; + }, + }} + /> + ); +}); + +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]), + }), +}; diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx new file mode 100644 index 00000000000000..4caec85bdd2e3f --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { + Unstable_NumberInput as BaseNumberInput, + NumberInputProps, + NumberInputOwnerState, +} from '@mui/base/Unstable_NumberInput'; +import clsx from 'clsx'; + +export default function NumberInputIntroduction() { + const [value, setValue] = React.useState(); + return ( + setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const NumberInput = React.forwardRef(function NumberInput( + props: NumberInputProps, + ref: React.ForwardedRef, +) { + return ( + { + 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, + ), + }; + }, + input: (ownerState: NumberInputOwnerState) => { + 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, + ), + }; + }, + incrementButton: (ownerState: NumberInputOwnerState) => { + 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: NumberInputOwnerState) => { + 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, + ), + }; + }, + }} + /> + ); +}); diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..387ab94b94158e --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview @@ -0,0 +1,6 @@ + setValue(val)} +/> \ No newline at end of file diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index 35bb09759b7397..d00eacecc62f90 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -27,7 +27,7 @@ Base UI's Number Input component is a customizable replacement for the native HT See [_Why the GOV.UK Design System team changed the input type for numbers_](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for a more detailed explanation of the limitations of ``. ::: -{{"demo": "NumberInputIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} +{{"demo": "NumberInputIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} ## Component