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][base] Add Tailwind CSS + plain CSS demo on the Input page #38302

Merged
merged 6 commits into from
Aug 16, 2023
Merged

[docs][base] Add Tailwind CSS + plain CSS demo on the Input page #38302

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b1b3033
add plain css and tailwind for UnstyledInputIntroduction component
Aug 3, 2023
3be1ecd
fix Input default import error
Aug 3, 2023
00e679c
add yarn docs:typescript:formatted changes
Aug 3, 2023
8107514
Tweaks on the box-shadow
zanivan Aug 3, 2023
e0d2bee
fix UnstyledInput function name
Aug 4, 2023
30c59b9
improve the demo
mnajdova Aug 15, 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
84 changes: 84 additions & 0 deletions docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
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: 'CustomInputIntroduction' } }}
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>
{`
.CustomInputIntroduction {
width: 320px;
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
padding: 8px 12px;
border-radius: 8px;
color: ${isDarkMode ? grey[300] : grey[900]};
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};

&:hover {
border-color: ${cyan[400]};
}

&:focus {
border-color: ${cyan[400]};
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
}
&:focus-visible {
outline: 0;
}
}
`}
</style>
);
}
84 changes: 84 additions & 0 deletions docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
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: 'CustomInputIntroduction' } }}
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>
{`
.CustomInputIntroduction {
width: 320px;
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
padding: 8px 12px;
border-radius: 8px;
color: ${isDarkMode ? grey[300] : grey[900]};
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};

&:hover {
border-color: ${cyan[400]};
}

&:focus {
border-color: ${cyan[400]};
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
}
&:focus-visible {
outline: 0;
}
}
`}
</style>
);
}
8 changes: 8 additions & 0 deletions docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<React.Fragment>
<Input
slotProps={{ input: { className: 'CustomInputIntroduction' } }}
aria-label="Demo input"
placeholder="Type something…"
/>
<Styles />
</React.Fragment>
0 ...onents/input/UnstyledInputIntroduction.js → ...UnstyledInputIntroduction/system/index.js
View file
Open in desktop
File renamed without changes.
0 ...nents/input/UnstyledInputIntroduction.tsx → ...nstyledInputIntroduction/system/index.tsx
View file
Open in desktop
File renamed without changes.
0 ...put/UnstyledInputIntroduction.tsx.preview → ...nputIntroduction/system/index.tsx.preview
View file
Open in desktop
File renamed without changes.
27 changes: 27 additions & 0 deletions docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.js
View file
Open in desktop
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 px-3 py-2 rounded-lg 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 docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx
View file
Open in desktop
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() {
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
// Replace this with your app logic for determining dark modes
const isDarkMode = useIsDarkMode();

return (
<Input
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
className={isDarkMode ? 'dark' : ''}
slotProps={{
input: {
className:
'w-80 text-sm font-normal leading-5 px-3 py-2 rounded-lg 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',
Copy link
Member

@oliviertassinari oliviertassinari Aug 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we missed the configuration of the font family in the tailwind.config.js file.

I imagine we should configure Inter to match Joy UI, but we could also configure IBM (one step at a time)?

Off-topic I found a broader bug with font 🙃, reported in #38306.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened #38464 for the font family.

},
}}
aria-label="Demo input"
placeholder="Type something…"
/>
);
}
11 changes: 11 additions & 0 deletions docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx.preview
View file
Open in desktop
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 px-3 py-2 rounded-lg 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…"
/>
2 changes: 1 addition & 1 deletion docs/data/base/components/input/input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ An input is a UI element that accepts text data from the user.
The Input component replaces the native HTML `<input>` tag, and offers expanded customization and accessibility features.
It can also be transformed into a `<textarea>` as needed.

{{"demo": "UnstyledInputIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
{{"demo": "UnstyledInputIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}

## Component

Expand Down