From 2d469f408ee73e45e3bc650a638109a730e10d73 Mon Sep 17 00:00:00 2001 From: danilo leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 20 Dec 2021 10:59:53 -0300 Subject: [PATCH] [docs] Base components demos design polish (#30149) Co-authored-by: siriwatknp --- .stylelintrc.js | 2 + .../buttons/UnstyledButtonsSimple.js | 28 +-- .../buttons/UnstyledButtonsSimple.tsx | 28 +-- .../components/buttons/UnstyledButtonsSpan.js | 28 +-- .../buttons/UnstyledButtonsSpan.tsx | 28 +-- .../components/switches/UnstyledSwitches.js | 19 +- .../components/switches/UnstyledSwitches.tsx | 19 +- .../components/switches/UseSwitchesBasic.js | 21 +- .../components/switches/UseSwitchesBasic.tsx | 21 +- .../components/switches/UseSwitchesCustom.js | 54 +++-- .../components/switches/UseSwitchesCustom.tsx | 54 +++-- .../src/pages/components/switches/switches.md | 2 + .../components/tables/TableCustomized.js | 198 +++++++++++++++++ .../components/tables/TableCustomized.tsx | 203 ++++++++++++++++++ .../pages/components/tables/TableUnstyled.js | 34 ++- .../pages/components/tables/TableUnstyled.tsx | 34 ++- docs/src/pages/components/tables/tables.md | 4 + .../components/tabs/UnstyledTabsCustomized.js | 41 ++-- .../tabs/UnstyledTabsCustomized.tsx | 41 ++-- .../components/text-fields/UnstyledInput.js | 50 +++-- .../components/text-fields/UnstyledInput.tsx | 50 +++-- .../pages/components/text-fields/UseInput.js | 50 +++-- .../pages/components/text-fields/UseInput.tsx | 50 +++-- 23 files changed, 835 insertions(+), 224 deletions(-) create mode 100644 docs/src/pages/components/tables/TableCustomized.js create mode 100644 docs/src/pages/components/tables/TableCustomized.tsx diff --git a/.stylelintrc.js b/.stylelintrc.js index 291948472baa26..90e28d4802339a 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -14,5 +14,7 @@ module.exports = { 'declaration-colon-newline-after': null, 'value-keyword-case': null, 'value-list-comma-newline-after': null, // not compatible with prettier + 'function-parentheses-newline-inside': null, // not compatible with prettier + 'string-no-newline': null, // not compatible with prettier }, }; diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSimple.js b/docs/src/pages/components/buttons/UnstyledButtonsSimple.js index e90278e57c8a42..682c2d87e1a224 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonsSimple.js +++ b/docs/src/pages/components/buttons/UnstyledButtonsSimple.js @@ -3,25 +3,30 @@ import Stack from '@mui/material/Stack'; import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('button')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.${buttonUnstyledClasses.active} { - background-color: #004386; + background-color: ${blue[700]}; } &.${buttonUnstyledClasses.focusVisible} { @@ -32,7 +37,6 @@ const CustomButtonRoot = styled('button')` &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx b/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx index 769a9e3cecf0fd..aaca68f8eb91c3 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx +++ b/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx @@ -6,25 +6,30 @@ import ButtonUnstyled, { } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('button')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.${buttonUnstyledClasses.active} { - background-color: #004386; + background-color: ${blue[700]}; } &.${buttonUnstyledClasses.focusVisible} { @@ -35,7 +40,6 @@ const CustomButtonRoot = styled('button')` &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSpan.js b/docs/src/pages/components/buttons/UnstyledButtonsSpan.js index c220edc5314652..d5e150422ac0ca 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonsSpan.js +++ b/docs/src/pages/components/buttons/UnstyledButtonsSpan.js @@ -3,25 +3,30 @@ import Stack from '@mui/material/Stack'; import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('span')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.${buttonUnstyledClasses.active} { - background-color: #004386; + background-color: ${blue[700]}; } &.${buttonUnstyledClasses.focusVisible} { @@ -32,7 +37,6 @@ const CustomButtonRoot = styled('span')` &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx b/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx index 35f95180d08c5f..a2159042df4799 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx +++ b/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx @@ -6,25 +6,30 @@ import ButtonUnstyled, { } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('span')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.${buttonUnstyledClasses.active} { - background-color: #004386; + background-color: ${blue[700]}; } &.${buttonUnstyledClasses.focusVisible} { @@ -35,7 +40,6 @@ const CustomButtonRoot = styled('span')` &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/switches/UnstyledSwitches.js b/docs/src/pages/components/switches/UnstyledSwitches.js index 273e4eaeda0920..c075ffaa667fbc 100644 --- a/docs/src/pages/components/switches/UnstyledSwitches.js +++ b/docs/src/pages/components/switches/UnstyledSwitches.js @@ -2,11 +2,20 @@ import * as React from 'react'; import { styled } from '@mui/system'; import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled'; +const blue = { + 500: '#007FFF', +}; + +const grey = { + 400: '#BFC7CF', + 500: '#AAB4BE', +}; + const Root = styled('span')` font-size: 0; position: relative; display: inline-block; - width: 32px; + width: 40px; height: 20px; margin: 10px; cursor: pointer; @@ -17,7 +26,7 @@ const Root = styled('span')` } & .${switchUnstyledClasses.track} { - background: #b3c3d3; + background: ${grey[400]}; border-radius: 10px; display: block; height: 100%; @@ -38,19 +47,19 @@ const Root = styled('span')` } &.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} { - background-color: rgba(255, 255, 255, 1); + background-color: ${grey[500]}; box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25); } &.${switchUnstyledClasses.checked} { .${switchUnstyledClasses.thumb} { - left: 14px; + left: 22px; top: 3px; background-color: #fff; } .${switchUnstyledClasses.track} { - background: #007fff; + background: ${blue[500]}; } } diff --git a/docs/src/pages/components/switches/UnstyledSwitches.tsx b/docs/src/pages/components/switches/UnstyledSwitches.tsx index 273e4eaeda0920..c075ffaa667fbc 100644 --- a/docs/src/pages/components/switches/UnstyledSwitches.tsx +++ b/docs/src/pages/components/switches/UnstyledSwitches.tsx @@ -2,11 +2,20 @@ import * as React from 'react'; import { styled } from '@mui/system'; import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled'; +const blue = { + 500: '#007FFF', +}; + +const grey = { + 400: '#BFC7CF', + 500: '#AAB4BE', +}; + const Root = styled('span')` font-size: 0; position: relative; display: inline-block; - width: 32px; + width: 40px; height: 20px; margin: 10px; cursor: pointer; @@ -17,7 +26,7 @@ const Root = styled('span')` } & .${switchUnstyledClasses.track} { - background: #b3c3d3; + background: ${grey[400]}; border-radius: 10px; display: block; height: 100%; @@ -38,19 +47,19 @@ const Root = styled('span')` } &.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} { - background-color: rgba(255, 255, 255, 1); + background-color: ${grey[500]}; box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25); } &.${switchUnstyledClasses.checked} { .${switchUnstyledClasses.thumb} { - left: 14px; + left: 22px; top: 3px; background-color: #fff; } .${switchUnstyledClasses.track} { - background: #007fff; + background: ${blue[500]}; } } diff --git a/docs/src/pages/components/switches/UseSwitchesBasic.js b/docs/src/pages/components/switches/UseSwitchesBasic.js index 22fd4e258b47a7..ae34c00b282e17 100644 --- a/docs/src/pages/components/switches/UseSwitchesBasic.js +++ b/docs/src/pages/components/switches/UseSwitchesBasic.js @@ -3,15 +3,24 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import { useSwitch } from '@mui/base/SwitchUnstyled'; +const blue = { + 500: '#007FFF', +}; + +const grey = { + 400: '#BFC7CF', + 500: '#AAB4BE', +}; + const BasicSwitchRoot = styled('span')` font-size: 0; position: relative; display: inline-block; - width: 32px; + width: 40px; height: 20px; - background: #b3c3d3; - border-radius: 10px; margin: 10px; + background: ${grey[400]}; + border-radius: 10px; cursor: pointer; &.Switch-disabled { @@ -20,7 +29,7 @@ const BasicSwitchRoot = styled('span')` } &.Switch-checked { - background: #007fff; + background: ${blue[500]}; } `; @@ -48,12 +57,12 @@ const BasicSwitchThumb = styled('span')` transition: all 200ms ease; &.Switch-focusVisible { - background-color: rgba(255, 255, 255, 1); + background-color: ${grey[500]}; box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25); } &.Switch-checked { - left: 14px; + left: 22px; top: 3px; background-color: #fff; } diff --git a/docs/src/pages/components/switches/UseSwitchesBasic.tsx b/docs/src/pages/components/switches/UseSwitchesBasic.tsx index 82e17699aa0f60..1a3abd9c971530 100644 --- a/docs/src/pages/components/switches/UseSwitchesBasic.tsx +++ b/docs/src/pages/components/switches/UseSwitchesBasic.tsx @@ -3,15 +3,24 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import { useSwitch, UseSwitchProps } from '@mui/base/SwitchUnstyled'; +const blue = { + 500: '#007FFF', +}; + +const grey = { + 400: '#BFC7CF', + 500: '#AAB4BE', +}; + const BasicSwitchRoot = styled('span')` font-size: 0; position: relative; display: inline-block; - width: 32px; + width: 40px; height: 20px; - background: #b3c3d3; - border-radius: 10px; margin: 10px; + background: ${grey[400]}; + border-radius: 10px; cursor: pointer; &.Switch-disabled { @@ -20,7 +29,7 @@ const BasicSwitchRoot = styled('span')` } &.Switch-checked { - background: #007fff; + background: ${blue[500]}; } `; @@ -48,12 +57,12 @@ const BasicSwitchThumb = styled('span')` transition: all 200ms ease; &.Switch-focusVisible { - background-color: rgba(255, 255, 255, 1); + background-color: ${grey[500]}; box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25); } &.Switch-checked { - left: 14px; + left: 22px; top: 3px; background-color: #fff; } diff --git a/docs/src/pages/components/switches/UseSwitchesCustom.js b/docs/src/pages/components/switches/UseSwitchesCustom.js index 460c166b722dbe..e68de76b784f0f 100644 --- a/docs/src/pages/components/switches/UseSwitchesCustom.js +++ b/docs/src/pages/components/switches/UseSwitchesCustom.js @@ -3,12 +3,21 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import { useSwitch } from '@mui/base/SwitchUnstyled'; +const blue = { + 700: '#0059B2', +}; + +const grey = { + 400: '#BFC7CF', + 800: '#2F3A45', +}; + const SwitchRoot = styled('span')` display: inline-block; position: relative; - width: 62px; - height: 34px; - padding: 7px; + width: 64px; + height: 36px; + padding: 8px; `; const SwitchInput = styled('input')` @@ -23,48 +32,47 @@ const SwitchInput = styled('input')` cursor: pointer; `; -const SwitchThumb = styled('span')( - ({ theme }) => ` +const SwitchThumb = styled('span')` position: absolute; display: block; - background-color: ${theme.palette.mode === 'dark' ? '#003892' : '#001e3c'}; - width: 32px; - height: 32px; - border-radius: 16px; - top: 1px; - left: 7px; + background-color: ${blue[700]}; + width: 30px; + height: 30px; + border-radius: 8px; + top: 3px; + left: 4px; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); - &:before { + &::before { display: block; - content: ""; + content: ''; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,') center center no-repeat; + '#fff', + )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/>') + center center no-repeat; } &.focusVisible { - background-color: #79B; + background-color: #79b; } &.checked { - transform: translateX(16px); - - &:before { + transform: translateX(24px); + + &::before { background-image: url('data:image/svg+xml;utf8,'); } } -`, -); +`; const SwitchTrack = styled('span')( ({ theme }) => ` - background-color: ${theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be'}; - border-radius: 10px; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]}; + border-radius: 4px; width: 100%; height: 100%; display: block; diff --git a/docs/src/pages/components/switches/UseSwitchesCustom.tsx b/docs/src/pages/components/switches/UseSwitchesCustom.tsx index f8a2692bed46bc..f1861524723ce2 100644 --- a/docs/src/pages/components/switches/UseSwitchesCustom.tsx +++ b/docs/src/pages/components/switches/UseSwitchesCustom.tsx @@ -3,12 +3,21 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import { useSwitch, UseSwitchProps } from '@mui/base/SwitchUnstyled'; +const blue = { + 700: '#0059B2', +}; + +const grey = { + 400: '#BFC7CF', + 800: '#2F3A45', +}; + const SwitchRoot = styled('span')` display: inline-block; position: relative; - width: 62px; - height: 34px; - padding: 7px; + width: 64px; + height: 36px; + padding: 8px; `; const SwitchInput = styled('input')` @@ -23,48 +32,47 @@ const SwitchInput = styled('input')` cursor: pointer; `; -const SwitchThumb = styled('span')( - ({ theme }) => ` +const SwitchThumb = styled('span')` position: absolute; display: block; - background-color: ${theme.palette.mode === 'dark' ? '#003892' : '#001e3c'}; - width: 32px; - height: 32px; - border-radius: 16px; - top: 1px; - left: 7px; + background-color: ${blue[700]}; + width: 30px; + height: 30px; + border-radius: 8px; + top: 3px; + left: 4px; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); - &:before { + &::before { display: block; - content: ""; + content: ''; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,') center center no-repeat; + '#fff', + )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/>') + center center no-repeat; } &.focusVisible { - background-color: #79B; + background-color: #79b; } &.checked { - transform: translateX(16px); - - &:before { + transform: translateX(24px); + + &::before { background-image: url('data:image/svg+xml;utf8,'); } } -`, -); +`; const SwitchTrack = styled('span')( ({ theme }) => ` - background-color: ${theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be'}; - border-radius: 10px; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]}; + border-radius: 4px; width: 100%; height: 100%; display: block; diff --git a/docs/src/pages/components/switches/switches.md b/docs/src/pages/components/switches/switches.md index 1580d56560f11e..c3acf0d54e92b8 100644 --- a/docs/src/pages/components/switches/switches.md +++ b/docs/src/pages/components/switches/switches.md @@ -61,6 +61,8 @@ You can learn more about this in the [overrides documentation page](/customizati The switch also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. +### Unstyled component + ```jsx import SwitchUnstyled from '@mui/base/SwitchUnstyled'; ``` diff --git a/docs/src/pages/components/tables/TableCustomized.js b/docs/src/pages/components/tables/TableCustomized.js new file mode 100644 index 00000000000000..625ff67bb18ad5 --- /dev/null +++ b/docs/src/pages/components/tables/TableCustomized.js @@ -0,0 +1,198 @@ +import * as React from 'react'; +import { styled } from '@mui/system'; +import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled'; + +function createData(name, calories, fat) { + return { name, calories, fat }; +} + +const rows = [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Eclair', 262, 16.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Gingerbread', 356, 16.0), + createData('Honeycomb', 408, 3.2), + createData('Ice cream sandwich', 237, 9.0), + createData('Jelly Bean', 375, 0.0), + createData('KitKat', 518, 26.0), + createData('Lollipop', 392, 0.2), + createData('Marshmallow', 318, 0), + createData('Nougat', 360, 19.0), + createData('Oreo', 437, 18.0), +].sort((a, b) => (a.calories < b.calories ? -1 : 1)); + +const blue = { + 200: '#A5D8FF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const Root = styled('div')( + ({ theme }) => ` + table { + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + border-collapse: collapse; + width: 100%; + } + + td, + th { + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + text-align: left; + padding: 6px; + } + + th { + background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]}; + } + `, +); + +const CustomTablePagination = styled(TablePaginationUnstyled)( + ({ theme }) => ` + & .MuiTablePaginationUnstyled-spacer { + display: none; + } + & .MuiTablePaginationUnstyled-toolbar { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + + @media (min-width: 768px) { + flex-direction: row; + align-items: center; + } + } + & .MuiTablePaginationUnstyled-selectLabel { + margin: 0; + } + & .MuiTablePaginationUnstyled-select { + padding: 2px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + border-radius: 50px; + background-color: transparent; + &:hover { + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + } + &:focus { + outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } + } + & .MuiTablePaginationUnstyled-displayedRows { + margin: 0; + + @media (min-width: 768px) { + margin-left: auto; + } + } + & .MuiTablePaginationUnstyled-actions { + padding: 2px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + border-radius: 50px; + text-align: center; + } + & .MuiTablePaginationUnstyled-actions > button { + margin: 0 8px; + border: transparent; + border-radius: 2px; + background-color: transparent; + &:hover { + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + } + &:focus { + outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } + } + `, +); + +export default function UnstyledTable() { + const [page, setPage] = React.useState(0); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + + // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = + page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + return ( + + + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + : rows + ).map((row) => ( + + + + + + ))} + + {emptyRows > 0 && ( + + + )} + + + + + + +
DessertCaloriesFat
{row.name} + {row.calories} + + {row.fat} +
+
+ + ); +} diff --git a/docs/src/pages/components/tables/TableCustomized.tsx b/docs/src/pages/components/tables/TableCustomized.tsx new file mode 100644 index 00000000000000..42404140d430dc --- /dev/null +++ b/docs/src/pages/components/tables/TableCustomized.tsx @@ -0,0 +1,203 @@ +import * as React from 'react'; +import { styled } from '@mui/system'; +import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled'; + +function createData(name: string, calories: number, fat: number) { + return { name, calories, fat }; +} + +const rows = [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Eclair', 262, 16.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Gingerbread', 356, 16.0), + createData('Honeycomb', 408, 3.2), + createData('Ice cream sandwich', 237, 9.0), + createData('Jelly Bean', 375, 0.0), + createData('KitKat', 518, 26.0), + createData('Lollipop', 392, 0.2), + createData('Marshmallow', 318, 0), + createData('Nougat', 360, 19.0), + createData('Oreo', 437, 18.0), +].sort((a, b) => (a.calories < b.calories ? -1 : 1)); + +const blue = { + 200: '#A5D8FF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const Root = styled('div')( + ({ theme }) => ` + table { + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + border-collapse: collapse; + width: 100%; + } + + td, + th { + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + text-align: left; + padding: 6px; + } + + th { + background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]}; + } + `, +); + +const CustomTablePagination = styled(TablePaginationUnstyled)( + ({ theme }) => ` + & .MuiTablePaginationUnstyled-spacer { + display: none; + } + & .MuiTablePaginationUnstyled-toolbar { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + + @media (min-width: 768px) { + flex-direction: row; + align-items: center; + } + } + & .MuiTablePaginationUnstyled-selectLabel { + margin: 0; + } + & .MuiTablePaginationUnstyled-select { + padding: 2px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + border-radius: 50px; + background-color: transparent; + &:hover { + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + } + &:focus { + outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } + } + & .MuiTablePaginationUnstyled-displayedRows { + margin: 0; + + @media (min-width: 768px) { + margin-left: auto; + } + } + & .MuiTablePaginationUnstyled-actions { + padding: 2px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]}; + border-radius: 50px; + text-align: center; + } + & .MuiTablePaginationUnstyled-actions > button { + margin: 0 8px; + border: transparent; + border-radius: 2px; + background-color: transparent; + &:hover { + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + } + &:focus { + outline: 1px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } + } + `, +); + +export default function UnstyledTable() { + const [page, setPage] = React.useState(0); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + + // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = + page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + const handleChangePage = ( + event: React.MouseEvent | null, + newPage: number, + ) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = ( + event: React.ChangeEvent, + ) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + return ( + + + + + + + + + + + {(rowsPerPage > 0 + ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + : rows + ).map((row) => ( + + + + + + ))} + + {emptyRows > 0 && ( + + + )} + + + + + + +
DessertCaloriesFat
{row.name} + {row.calories} + + {row.fat} +
+
+ + ); +} diff --git a/docs/src/pages/components/tables/TableUnstyled.js b/docs/src/pages/components/tables/TableUnstyled.js index 53be8da1a074ff..ef6ba50f629648 100644 --- a/docs/src/pages/components/tables/TableUnstyled.js +++ b/docs/src/pages/components/tables/TableUnstyled.js @@ -40,11 +40,39 @@ const Root = styled('div')` background-color: #ddd; } `; + const CustomTablePagination = styled(TablePaginationUnstyled)` & .MuiTablePaginationUnstyled-toolbar { display: flex; + flex-direction: column; + align-items: flex-start; gap: 10px; - align-items: center; + + @media (min-width: 768px) { + flex-direction: row; + align-items: center; + } + } + + & .MuiTablePaginationUnstyled-selectLabel { + margin: 0; + } + + & .MuiTablePaginationUnstyled-displayedRows { + margin: 0; + + @media (min-width: 768px) { + margin-left: auto; + } + } + + & .MuiTablePaginationUnstyled-spacer { + display: none; + } + + & .MuiTablePaginationUnstyled-actions { + display: flex; + gap: 0.25rem; } `; @@ -66,8 +94,8 @@ export default function UnstyledTable() { }; return ( - - + +
diff --git a/docs/src/pages/components/tables/TableUnstyled.tsx b/docs/src/pages/components/tables/TableUnstyled.tsx index dd4f885012a306..760513f03dffbc 100644 --- a/docs/src/pages/components/tables/TableUnstyled.tsx +++ b/docs/src/pages/components/tables/TableUnstyled.tsx @@ -40,11 +40,39 @@ const Root = styled('div')` background-color: #ddd; } `; + const CustomTablePagination = styled(TablePaginationUnstyled)` & .MuiTablePaginationUnstyled-toolbar { display: flex; + flex-direction: column; + align-items: flex-start; gap: 10px; - align-items: center; + + @media (min-width: 768px) { + flex-direction: row; + align-items: center; + } + } + + & .MuiTablePaginationUnstyled-selectLabel { + margin: 0; + } + + & .MuiTablePaginationUnstyled-displayedRows { + margin: 0; + + @media (min-width: 768px) { + margin-left: auto; + } + } + + & .MuiTablePaginationUnstyled-spacer { + display: none; + } + + & .MuiTablePaginationUnstyled-actions { + display: flex; + gap: 0.25rem; } `; @@ -71,8 +99,8 @@ export default function UnstyledTable() { }; return ( - -
Dessert
+ +
diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md index 13bc9b37b24a45..af6fe32d2f6f25 100644 --- a/docs/src/pages/components/tables/tables.md +++ b/docs/src/pages/components/tables/tables.md @@ -126,6 +126,10 @@ If you would like to use an unstyled Table, you can use the primitive elements a {{"demo": "pages/components/tables/TableUnstyled.js"}} +#### Customized look and feel + +{{"demo": "pages/components/tables/TableCustomized.js"}} + ## Accessibility (WAI tutorial: ) diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.js b/docs/src/pages/components/tabs/UnstyledTabsCustomized.js index f08625c37a0fad..e85a02b712ef41 100644 --- a/docs/src/pages/components/tabs/UnstyledTabsCustomized.js +++ b/docs/src/pages/components/tabs/UnstyledTabsCustomized.js @@ -6,7 +6,7 @@ import TabPanelUnstyled from '@mui/base/TabPanelUnstyled'; import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled'; -const primary = { +const blue = { 50: '#F0F7FF', 100: '#C2E0FF', 200: '#80BFFF', @@ -20,52 +20,55 @@ const primary = { }; const Tab = styled(TabUnstyled)` - color: ${primary[100]}; + font-family: IBM Plex Sans, sans-serif; + color: white; cursor: pointer; - font-size: 1rem; - background: ${primary[500]}; - padding: 15px 20px; + font-size: 0.875rem; + font-weight: bold; + background-color: transparent; + width: 100%; + padding: 12px 16px; + margin: 6px 6px; border: none; + border-radius: 5px; display: flex; - - &.Mui-selected { - color: #fff; - font-weight: bold; - } + justify-content: center; &:hover { - color: #fff; + background-color: ${blue[400]}; } &.${buttonUnstyledClasses.focusVisible} { color: #fff; outline: none; - background-color: ${primary[600]}; - border-bottom: 2px solid ${primary[600]}; + background-color: ${blue[200]}; } &.${tabUnstyledClasses.selected} { - border-bottom: 2px solid #fff; + background-color: ${blue[50]}; + color: ${blue[600]}; } &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; const TabPanel = styled(TabPanelUnstyled)` width: 100%; + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; `; const TabsList = styled(TabsListUnstyled)` - background-color: ${primary[500]}; + min-width: 320px; + background-color: ${blue[500]}; border-radius: 8px; - box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02); - padding: 0 10px 0 10px; - margin-bottom: 10px; + margin-bottom: 16px; display: flex; + align-items: center; + justify-content: center; align-content: space-between; `; diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx b/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx index f08625c37a0fad..e85a02b712ef41 100644 --- a/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx +++ b/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx @@ -6,7 +6,7 @@ import TabPanelUnstyled from '@mui/base/TabPanelUnstyled'; import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled'; -const primary = { +const blue = { 50: '#F0F7FF', 100: '#C2E0FF', 200: '#80BFFF', @@ -20,52 +20,55 @@ const primary = { }; const Tab = styled(TabUnstyled)` - color: ${primary[100]}; + font-family: IBM Plex Sans, sans-serif; + color: white; cursor: pointer; - font-size: 1rem; - background: ${primary[500]}; - padding: 15px 20px; + font-size: 0.875rem; + font-weight: bold; + background-color: transparent; + width: 100%; + padding: 12px 16px; + margin: 6px 6px; border: none; + border-radius: 5px; display: flex; - - &.Mui-selected { - color: #fff; - font-weight: bold; - } + justify-content: center; &:hover { - color: #fff; + background-color: ${blue[400]}; } &.${buttonUnstyledClasses.focusVisible} { color: #fff; outline: none; - background-color: ${primary[600]}; - border-bottom: 2px solid ${primary[600]}; + background-color: ${blue[200]}; } &.${tabUnstyledClasses.selected} { - border-bottom: 2px solid #fff; + background-color: ${blue[50]}; + color: ${blue[600]}; } &.${buttonUnstyledClasses.disabled} { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; const TabPanel = styled(TabPanelUnstyled)` width: 100%; + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; `; const TabsList = styled(TabsListUnstyled)` - background-color: ${primary[500]}; + min-width: 320px; + background-color: ${blue[500]}; border-radius: 8px; - box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02); - padding: 0 10px 0 10px; - margin-bottom: 10px; + margin-bottom: 16px; display: flex; + align-items: center; + justify-content: center; align-content: space-between; `; diff --git a/docs/src/pages/components/text-fields/UnstyledInput.js b/docs/src/pages/components/text-fields/UnstyledInput.js index 509c60be86b551..0ed4a604e863c5 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.js +++ b/docs/src/pages/components/text-fields/UnstyledInput.js @@ -2,30 +2,48 @@ import * as React from 'react'; import InputUnstyled from '@mui/base/InputUnstyled'; import { styled } from '@mui/system'; -const StyledInputElement = styled('input')` - width: 200px; - font-size: 1rem; +const blue = { + 200: '#80BFFF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledInputElement = styled('input')( + ({ theme }) => ` + width: 320px; + font-size: 0.875rem; font-family: IBM Plex Sans, sans-serif; font-weight: 400; - line-height: 1.4375em; - background: rgb(243, 246, 249); - border: 1px solid #e5e8ec; - border-radius: 10px; - padding: 6px 10px; - color: #20262d; - transition: width 300ms ease; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 8px; + padding: 12px 12px; + transition: all 150ms ease; &:hover { - background: #eaeef3; - border-color: #e5e8ec; + background: ${theme.palette.mode === 'dark' ? null : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; } &:focus { - outline: none; - width: 220px; - transition: width 200ms ease-out; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; } -`; +`, +); const CustomInput = React.forwardRef(function CustomInput(props, ref) { return ( diff --git a/docs/src/pages/components/text-fields/UnstyledInput.tsx b/docs/src/pages/components/text-fields/UnstyledInput.tsx index ce9a3fba427b76..5e965cd11fd8d1 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.tsx +++ b/docs/src/pages/components/text-fields/UnstyledInput.tsx @@ -2,30 +2,48 @@ import * as React from 'react'; import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled'; import { styled } from '@mui/system'; -const StyledInputElement = styled('input')` - width: 200px; - font-size: 1rem; +const blue = { + 200: '#80BFFF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledInputElement = styled('input')( + ({ theme }) => ` + width: 320px; + font-size: 0.875rem; font-family: IBM Plex Sans, sans-serif; font-weight: 400; - line-height: 1.4375em; - background: rgb(243, 246, 249); - border: 1px solid #e5e8ec; - border-radius: 10px; - padding: 6px 10px; - color: #20262d; - transition: width 300ms ease; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 8px; + padding: 12px 12px; + transition: all 150ms ease; &:hover { - background: #eaeef3; - border-color: #e5e8ec; + background: ${theme.palette.mode === 'dark' ? null : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; } &:focus { - outline: none; - width: 220px; - transition: width 200ms ease-out; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; } -`; +`, +); const CustomInput = React.forwardRef(function CustomInput( props: InputUnstyledProps, diff --git a/docs/src/pages/components/text-fields/UseInput.js b/docs/src/pages/components/text-fields/UseInput.js index b6d40c3e01ac3e..0815bfc88397e4 100644 --- a/docs/src/pages/components/text-fields/UseInput.js +++ b/docs/src/pages/components/text-fields/UseInput.js @@ -2,30 +2,48 @@ import * as React from 'react'; import { useInput } from '@mui/base'; import { styled } from '@mui/system'; -const StyledInputElement = styled('input')` - width: 200px; - font-size: 1rem; +const blue = { + 200: '#80BFFF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledInputElement = styled('input')( + ({ theme }) => ` + width: 320px; + font-size: 0.875rem; font-family: IBM Plex Sans, sans-serif; font-weight: 400; - line-height: 1.4375em; - background: rgb(243, 246, 249); - border: 1px solid #e5e8ec; - border-radius: 10px; - padding: 6px 10px; - color: #20262d; - transition: width 300ms ease; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 8px; + padding: 12px 12px; + transition: all 150ms ease; &:hover { - background: #eaeef3; - border-color: #e5e8ec; + background: ${theme.palette.mode === 'dark' ? null : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; } &:focus { - outline: none; - width: 220px; - transition: width 200ms ease-out; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; } -`; +`, +); const CustomInput = React.forwardRef(function CustomInput(props, ref) { const { getRootProps, getInputProps } = useInput(props, ref); diff --git a/docs/src/pages/components/text-fields/UseInput.tsx b/docs/src/pages/components/text-fields/UseInput.tsx index 922a50a62a7bfa..a176f3afeba9c5 100644 --- a/docs/src/pages/components/text-fields/UseInput.tsx +++ b/docs/src/pages/components/text-fields/UseInput.tsx @@ -2,30 +2,48 @@ import * as React from 'react'; import { useInput } from '@mui/base'; import { styled } from '@mui/system'; -const StyledInputElement = styled('input')` - width: 200px; - font-size: 1rem; +const blue = { + 200: '#80BFFF', + 400: '#3399FF', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledInputElement = styled('input')( + ({ theme }) => ` + width: 320px; + font-size: 0.875rem; font-family: IBM Plex Sans, sans-serif; font-weight: 400; - line-height: 1.4375em; - background: rgb(243, 246, 249); - border: 1px solid #e5e8ec; - border-radius: 10px; - padding: 6px 10px; - color: #20262d; - transition: width 300ms ease; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 8px; + padding: 12px 12px; + transition: all 150ms ease; &:hover { - background: #eaeef3; - border-color: #e5e8ec; + background: ${theme.palette.mode === 'dark' ? null : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; } &:focus { - outline: none; - width: 220px; - transition: width 200ms ease-out; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; } -`; +`, +); const CustomInput = React.forwardRef(function CustomInput( props: React.InputHTMLAttributes,
Dessert