-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/master' into renovate/react-18.x
- Loading branch information
Showing
57 changed files
with
534 additions
and
256 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
85 changes: 85 additions & 0 deletions
85
docs/data/base/components/input/UnstyledInputBasic/css/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 |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import * as React from 'react'; | ||
| import Input from '@mui/base/Input'; | ||
| import { useTheme } from '@mui/system'; | ||
|
|
||
| export default function UnstyledInputBasic() { | ||
| return ( | ||
| <React.Fragment> | ||
| <Input | ||
| slotProps={{ input: { className: 'CustomInput' } }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| <Styles /> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| 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 ( | ||
| <style> | ||
| {` | ||
| .CustomInput { | ||
| width: 320px; | ||
| font-family: IBM Plex Sans, sans-serif; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| padding: 12px; | ||
| border-radius: 12px; | ||
| color: ${isDarkMode ? grey[300] : grey[900]}; | ||
| background: ${isDarkMode ? grey[900] : '#fff'}; | ||
| border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; | ||
| box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]}; | ||
| &:hover { | ||
| border-color: ${cyan[400]}; | ||
| } | ||
| &:focus { | ||
| border-color: ${cyan[400]}; | ||
| box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; | ||
| } | ||
| &:focus-visible { | ||
| outline: 0; | ||
| } | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } |
85 changes: 85 additions & 0 deletions
85
docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
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 |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import * as React from 'react'; | ||
| import Input from '@mui/base/Input'; | ||
| import { useTheme } from '@mui/system'; | ||
|
|
||
| export default function UnstyledInputBasic() { | ||
| return ( | ||
| <React.Fragment> | ||
| <Input | ||
| slotProps={{ input: { className: 'CustomInput' } }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| <Styles /> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| 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 ( | ||
| <style> | ||
| {` | ||
| .CustomInput { | ||
| width: 320px; | ||
| font-family: IBM Plex Sans, sans-serif; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| padding: 12px; | ||
| border-radius: 12px; | ||
| color: ${isDarkMode ? grey[300] : grey[900]}; | ||
| background: ${isDarkMode ? grey[900] : '#fff'}; | ||
| border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; | ||
| box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]}; | ||
| &:hover { | ||
| border-color: ${cyan[400]}; | ||
| } | ||
| &:focus { | ||
| border-color: ${cyan[400]}; | ||
| box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; | ||
| } | ||
| &:focus-visible { | ||
| outline: 0; | ||
| } | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } |
8 changes: 8 additions & 0 deletions
8
docs/data/base/components/input/UnstyledInputBasic/css/index.tsx.preview
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 |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <React.Fragment> | ||
| <Input | ||
| slotProps={{ input: { className: 'CustomInput' } }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| <Styles /> | ||
| </React.Fragment> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
27 changes: 27 additions & 0 deletions
27
docs/data/base/components/input/UnstyledInputBasic/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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import * as React from 'react'; | ||
| import Input from '@mui/base/Input'; | ||
| import { useTheme } from '@mui/system'; | ||
|
|
||
| function useIsDarkMode() { | ||
| const theme = useTheme(); | ||
| return theme.palette.mode === 'dark'; | ||
| } | ||
|
|
||
| export default function UnstyledInputBasic() { | ||
| // Replace this with your app logic for determining dark modes | ||
| const isDarkMode = useIsDarkMode(); | ||
|
|
||
| return ( | ||
| <Input | ||
| className={isDarkMode ? 'dark' : ''} | ||
| slotProps={{ | ||
| input: { | ||
| className: | ||
| 'w-80 text-sm font-normal leading-5 p-3 rounded-xl shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0', | ||
| }, | ||
| }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| ); | ||
| } |
27 changes: 27 additions & 0 deletions
27
docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx
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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import * as React from 'react'; | ||
| import Input from '@mui/base/Input'; | ||
| import { useTheme } from '@mui/system'; | ||
|
|
||
| function useIsDarkMode() { | ||
| const theme = useTheme(); | ||
| return theme.palette.mode === 'dark'; | ||
| } | ||
|
|
||
| export default function UnstyledInputBasic() { | ||
| // Replace this with your app logic for determining dark modes | ||
| const isDarkMode = useIsDarkMode(); | ||
|
|
||
| return ( | ||
| <Input | ||
| className={isDarkMode ? 'dark' : ''} | ||
| slotProps={{ | ||
| input: { | ||
| className: | ||
| 'w-80 text-sm font-normal leading-5 p-3 rounded-xl shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0', | ||
| }, | ||
| }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| ); | ||
| } |
11 changes: 11 additions & 0 deletions
11
docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx.preview
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 |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <Input | ||
| className={isDarkMode ? 'dark' : ''} | ||
| slotProps={{ | ||
| input: { | ||
| className: | ||
| 'w-80 text-sm font-normal leading-5 p-3 rounded-xl shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0', | ||
| }, | ||
| }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> |
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
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
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
Oops, something went wrong.