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 Select page #37725

Merged
merged 9 commits into from
Jul 3, 2023
Merged

[docs][base] Add Tailwind CSS + plain CSS demo on the Select page #37725

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3ed4cd2
[docs][base] Add Tailwind CSS + plain CSS demo on the Select page
mnajdova Jun 26, 2023
62e40e7
Improve class names
mnajdova Jun 26, 2023
ed25a74
Fix tailwind's dark mode
mnajdova Jun 26, 2023
a3c314a
Tweaked the tailwind background demo
zanivan Jun 26, 2023
1c8586e
fix shadow & border
mnajdova Jun 27, 2023
7679575
Increased contrast on tailwind selected
zanivan Jun 27, 2023
130419c
Increased contrast on plain CSS demo
zanivan Jun 27, 2023
475672b
Merge branch 'master' into docs/base-select-tailwind-plain-css-demo
mnajdova Jun 28, 2023
5c287c0
Merge branch 'master' into docs/base-select-tailwind-plain-css-demo
mnajdova Jun 30, 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
164 changes: 164 additions & 0 deletions docs/data/base/components/select/UnstyledSelectBasic/css/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import * as React from 'react';
import Select, { selectClasses } from '@mui/base/Select';
import Option, { optionClasses } from '@mui/base/Option';
import { useTheme } from '@mui/system';

export default function UnstyledSelectBasic() {
return (
<React.Fragment>
<Select
className="CustomSelect"
slotProps={{
listbox: { className: 'CustomListbox' },
popper: { className: 'CustomPopper' },
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
}}
defaultValue={10}
>
<Option className="CustomOption" value={10}>
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
Ten
</Option>
<Option className="CustomOption" value={20}>
Twenty
</Option>
<Option className="CustomOption" value={30}>
Thirty
</Option>
</Select>
<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: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};

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>
Copy link
Contributor

Choose a reason for hiding this comment

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

@michaldudak How do you write <style> tag as a React Component?
I've tried this but occurring error that doesn't allow <style> tag as JSX.

Copy link
Member

Choose a reason for hiding this comment

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

You have to write style's contents as a string:

<style>
  {`div {
    color: red;
  }`}
</style>

Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you!

{`
.CustomSelect {
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
min-height: calc(1.5em + 22px);
min-width: 320px;
padding: 12px;
border-radius: 12px;
text-align: left;
line-height: 1.5;
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
color: ${isDarkMode ? grey[300] : grey[900]};

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;

&:hover {
background: ${isDarkMode ? grey[800] : grey[50]};
border-color: ${isDarkMode ? grey[600] : grey[300]};
}

&.${selectClasses.focusVisible} {
border-color: ${cyan[400]};
outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
}

&.${selectClasses.expanded} {
&::after {
content: '▴';
}
}

&::after {
content: '▾';
float: right;
}
}
.CustomListbox {
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 6px;
margin: 12px 0;
min-width: 320px;
border-radius: 12px;
overflow: auto;
outline: 0px;
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
color: ${isDarkMode ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
}
.CustomPopper {
z-index: 1;
}
.CustomOption {
list-style: none;
padding: 8px;
border-radius: 8px;
cursor: default;

&:last-of-type {
border-bottom: none;
}

&.${optionClasses.selected} {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}

&.${optionClasses.highlighted} {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}

&.${optionClasses.highlighted}.${optionClasses.selected} {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}

&.${optionClasses.disabled} {
color: ${isDarkMode ? grey[700] : grey[400]};
}

&:hover:not(.${optionClasses.disabled}) {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
}
`}
</style>
);
}
164 changes: 164 additions & 0 deletions docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import * as React from 'react';
import Select, { selectClasses } from '@mui/base/Select';
import Option, { optionClasses } from '@mui/base/Option';
import { useTheme } from '@mui/system';

export default function UnstyledSelectBasic() {
return (
<React.Fragment>
<Select
className="CustomSelect"
slotProps={{
listbox: { className: 'CustomListbox' },
popper: { className: 'CustomPopper' },
}}
defaultValue={10}
>
<Option className="CustomOption" value={10}>
Ten
</Option>
<Option className="CustomOption" value={20}>
Twenty
</Option>
<Option className="CustomOption" value={30}>
Thirty
</Option>
</Select>
<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: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};

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>
{`
.CustomSelect {
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
min-height: calc(1.5em + 22px);
min-width: 320px;
padding: 12px;
border-radius: 12px;
text-align: left;
line-height: 1.5;
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
color: ${isDarkMode ? grey[300] : grey[900]};

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;

&:hover {
background: ${isDarkMode ? grey[800] : grey[50]};
border-color: ${isDarkMode ? grey[600] : grey[300]};
}

&.${selectClasses.focusVisible} {
border-color: ${cyan[400]};
outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
}

&.${selectClasses.expanded} {
&::after {
content: '▴';
}
}

&::after {
content: '▾';
float: right;
}
}
.CustomListbox {
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 6px;
margin: 12px 0;
min-width: 320px;
border-radius: 12px;
overflow: auto;
outline: 0px;
background: ${isDarkMode ? grey[900] : '#fff'};
border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
color: ${isDarkMode ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
}
.CustomPopper {
z-index: 1;
}
.CustomOption {
list-style: none;
padding: 8px;
border-radius: 8px;
cursor: default;

&:last-of-type {
border-bottom: none;
}

&.${optionClasses.selected} {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}

&.${optionClasses.highlighted} {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}

&.${optionClasses.highlighted}.${optionClasses.selected} {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}

&.${optionClasses.disabled} {
color: ${isDarkMode ? grey[700] : grey[400]};
}

&:hover:not(.${optionClasses.disabled}) {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
}
`}
</style>
);
}
2 changes: 1 addition & 1 deletion ...components/select/UnstyledSelectSimple.js → ...elect/UnstyledSelectBasic/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
return <Select {...props} ref={ref} slots={slots} />;
});

export default function UnstyledSelectSimple() {
export default function UnstyledSelectBasic() {
return (
<CustomSelect defaultValue={10}>
<StyledOption value={10}>Ten</StyledOption>
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/select/UnstyledSelectSimple.tsx → ...lect/UnstyledSelectBasic/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CustomSelect = React.forwardRef(function CustomSelect<
props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
) => JSX.Element;

export default function UnstyledSelectSimple() {
export default function UnstyledSelectBasic() {
return (
<CustomSelect defaultValue={10}>
<StyledOption value={10}>Ten</StyledOption>
Expand Down
0 ...ect/UnstyledSelectSimple.tsx copy.preview → ...tyledSelectBasic/system/index.tsx.preview
View file
Open in desktop
File renamed without changes.
Loading