[docs] Improve Base component demos (mui#30884)

Stono · Feb 10, 2022 · b59ea3e · b59ea3e
1 parent 680ef66
commit b59ea3e
Show file tree

Hide file tree

Showing 26 changed files with 1,173 additions and 545 deletions.
diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.js b/docs/data/material/components/selects/UnstyledSelectControlled.js
@@ -5,28 +5,53 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
 
-const StyledButton = styled('button')`
+const blue = {
+  100: '#DAECFF',
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
+
+const StyledButton = styled('button')(
+  ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
-  min-width: 200px;
-  background: #fff;
-  border: 1px solid #ccc;
+  min-width: 320px;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   border-radius: 0.75em;
-  margin: 0.5em;
+  margin-top: 0.5em;
   padding: 10px;
   text-align: left;
   line-height: 1.5;
-  color: #000;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+  }
 
   &.${selectUnstyledClasses.focusVisible} {
-    outline: 4px solid rgba(100, 100, 100, 0.3);
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 
   &.${selectUnstyledClasses.expanded} {
-    border-radius: 0.75em 0.75em 0 0;
-
     &::after {
       content: '▴';
     }
@@ -36,59 +61,76 @@ const StyledButton = styled('button')`
     content: '▾';
     float: right;
   }
-`;
+  `,
+);
 
-const StyledListbox = styled('ul')`
+const StyledListbox = styled('ul')(
+  ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background-color: #fff;
-  min-width: 200px;
-  border: 1px solid #ccc;
-  border-top: none;
-  color: #000;
-`;
-
-const StyledOption = styled(OptionUnstyled)`
+  padding: 5px;
+  margin: 10px 0;
+  min-width: 320px;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
+  border-radius: 0.75em;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  overflow: auto;
+  outline: 0px;
+  `,
+);
+
+const StyledOption = styled(OptionUnstyled)(
+  ({ theme }) => `
   list-style: none;
-  padding: 4px 10px;
-  margin: 0;
-  border-bottom: 1px solid #ddd;
+  padding: 8px;
+  border-radius: 0.45em;
   cursor: default;
 
   &:last-of-type {
     border-bottom: none;
   }
 
-  &.${optionUnstyledClasses.disabled} {
-    color: #888;
-  }
-
   &.${optionUnstyledClasses.selected} {
-    background-color: rgba(25, 118, 210, 0.08);
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
   &.${optionUnstyledClasses.highlighted} {
-    background-color: #16d;
-    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
   &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
-    background-color: #05e;
-    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
+  }
+
+  &.${optionUnstyledClasses.disabled} {
+    color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
   &:hover:not(.${optionUnstyledClasses.disabled}) {
-    background-color: #39e;
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
-`;
+  `,
+);
 
 const StyledPopper = styled(PopperUnstyled)`
   z-index: 1;
 `;
 
+const Paragraph = styled('p')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  margin: 10px 0;
+  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  `,
+);
+
 function CustomSelect(props) {
   const components = {
     Root: StyledButton,
@@ -123,7 +165,7 @@ export default function UnstyledSelectsMultiple() {
         <StyledOption value={30}>Thirty</StyledOption>
       </CustomSelect>
 
-      <p>Selected value: {value}</p>
+      <Paragraph>Selected value: {value}</Paragraph>
     </div>
   );
 }
diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx b/docs/data/material/components/selects/UnstyledSelectControlled.tsx
@@ -7,28 +7,53 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
 
-const StyledButton = styled('button')`
+const blue = {
+  100: '#DAECFF',
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
+
+const StyledButton = styled('button')(
+  ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
-  min-width: 200px;
-  background: #fff;
-  border: 1px solid #ccc;
+  min-width: 320px;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   border-radius: 0.75em;
-  margin: 0.5em;
+  margin-top: 0.5em;
   padding: 10px;
   text-align: left;
   line-height: 1.5;
-  color: #000;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+  }
 
   &.${selectUnstyledClasses.focusVisible} {
-    outline: 4px solid rgba(100, 100, 100, 0.3);
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 
   &.${selectUnstyledClasses.expanded} {
-    border-radius: 0.75em 0.75em 0 0;
-
     &::after {
       content: '▴';
     }
@@ -38,59 +63,76 @@ const StyledButton = styled('button')`
     content: '▾';
     float: right;
   }
-`;
+  `,
+);
 
-const StyledListbox = styled('ul')`
+const StyledListbox = styled('ul')(
+  ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background-color: #fff;
-  min-width: 200px;
-  border: 1px solid #ccc;
-  border-top: none;
-  color: #000;
-`;
-
-const StyledOption = styled(OptionUnstyled)`
+  padding: 5px;
+  margin: 10px 0;
+  min-width: 320px;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
+  border-radius: 0.75em;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  overflow: auto;
+  outline: 0px;
+  `,
+);
+
+const StyledOption = styled(OptionUnstyled)(
+  ({ theme }) => `
   list-style: none;
-  padding: 4px 10px;
-  margin: 0;
-  border-bottom: 1px solid #ddd;
+  padding: 8px;
+  border-radius: 0.45em;
   cursor: default;
 
   &:last-of-type {
     border-bottom: none;
   }
 
-  &.${optionUnstyledClasses.disabled} {
-    color: #888;
-  }
-
   &.${optionUnstyledClasses.selected} {
-    background-color: rgba(25, 118, 210, 0.08);
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
   &.${optionUnstyledClasses.highlighted} {
-    background-color: #16d;
-    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
   &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
-    background-color: #05e;
-    color: #fff;
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
+  }
+
+  &.${optionUnstyledClasses.disabled} {
+    color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
   &:hover:not(.${optionUnstyledClasses.disabled}) {
-    background-color: #39e;
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
-`;
+  `,
+);
 
 const StyledPopper = styled(PopperUnstyled)`
   z-index: 1;
 `;
 
+const Paragraph = styled('p')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  margin: 10px 0;
+  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  `,
+);
+
 function CustomSelect(props: SelectUnstyledProps<number>) {
   const components: SelectUnstyledProps<number>['components'] = {
     Root: StyledButton,
@@ -112,7 +154,7 @@ export default function UnstyledSelectsMultiple() {
         <StyledOption value={30}>Thirty</StyledOption>
       </CustomSelect>
 
-      <p>Selected value: {value}</p>
+      <Paragraph>Selected value: {value}</Paragraph>
     </div>
   );
 }
diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx.preview b/docs/data/material/components/selects/UnstyledSelectControlled.tsx.preview
@@ -4,4 +4,4 @@
   <StyledOption value={30}>Thirty</StyledOption>
 </CustomSelect>
 
-<p>Selected value: {value}</p>
+<Paragraph>Selected value: {value}</Paragraph>