From 835e1623a8b8d73c4771b5bb690cbc14940870b4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 13 Nov 2023 10:41:30 +0700 Subject: [PATCH] simplify --- .../components/button/UnstyledButtonCustom.js | 2 +- .../button/UnstyledButtonCustom.tsx | 2 +- .../UnstyledButtonIntroduction/css/index.js | 8 +- .../UnstyledButtonIntroduction/css/index.tsx | 8 +- .../system/index.js | 8 +- .../system/index.tsx | 8 +- .../button/UnstyledButtonsDisabledFocus.js | 2 +- .../button/UnstyledButtonsDisabledFocus.tsx | 2 +- .../UnstyledButtonsDisabledFocusCustom.js | 2 +- .../UnstyledButtonsDisabledFocusCustom.tsx | 2 +- .../index.js => UnstyledButtonsSimple.js} | 0 .../index.tsx => UnstyledButtonsSimple.tsx} | 0 ...view => UnstyledButtonsSimple.tsx.preview} | 0 .../button/UnstyledButtonsSimple/css/index.js | 97 ------------------- .../UnstyledButtonsSimple/css/index.tsx | 97 ------------------- .../css/index.tsx.preview | 9 -- .../UnstyledButtonsSimple/tailwind/index.js | 43 -------- .../UnstyledButtonsSimple/tailwind/index.tsx | 40 -------- .../tailwind/index.tsx.preview | 4 - .../components/button/UnstyledButtonsSpan.js | 4 +- .../components/button/UnstyledButtonsSpan.tsx | 13 +-- .../button/UnstyledButtonsSpan/css/index.js | 93 ------------------ .../button/UnstyledButtonsSpan/css/index.tsx | 93 ------------------ .../UnstyledButtonsSpan/css/index.tsx.preview | 11 --- .../UnstyledButtonsSpan/system/index.js | 82 ---------------- .../UnstyledButtonsSpan/system/index.tsx | 82 ---------------- .../system/index.tsx.preview | 4 - .../UnstyledButtonsSpan/tailwind/index.js | 57 ----------- .../UnstyledButtonsSpan/tailwind/index.tsx | 49 ---------- .../tailwind/index.tsx.preview | 8 -- .../components/button/UnstyledLinkButton.js | 4 +- .../components/button/UnstyledLinkButton.tsx | 4 +- docs/data/base/components/button/UseButton.js | 19 ++-- .../data/base/components/button/UseButton.tsx | 19 ++-- docs/data/base/components/button/button.md | 4 +- 35 files changed, 54 insertions(+), 826 deletions(-) rename docs/data/base/components/button/{UnstyledButtonsSimple/system/index.js => UnstyledButtonsSimple.js} (100%) rename docs/data/base/components/button/{UnstyledButtonsSimple/system/index.tsx => UnstyledButtonsSimple.tsx} (100%) rename docs/data/base/components/button/{UnstyledButtonsSimple/system/index.tsx.preview => UnstyledButtonsSimple.tsx.preview} (100%) delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/css/index.js delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx delete mode 100644 docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/css/index.js delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/system/index.js delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx delete mode 100644 docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js index 547be1d32f3892..c057fef09c7499 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.js +++ b/docs/data/base/components/button/UnstyledButtonCustom.js @@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &:active { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 150ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx index e7836df161ae45..e98295562540a0 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.tsx +++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx @@ -88,7 +88,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &:active { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 150ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js index 65647038710c14..d60494f1647dc1 100644 --- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js +++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js @@ -66,19 +66,19 @@ function Styles() { transition: all 150ms ease; cursor: pointer; border: 1px solid ${cyan[500]}; - box-shadow: 0 2px 4px ${ - isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)' + box-shadow: 0 2px 1px ${ + isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]}; } .IntroductionButton:hover { background-color: ${cyan[600]}; } - .IntroductionButton:active { + .IntroductionButton.Mui-active { background-color: ${cyan[700]}; box-shadow: none; transform: scale(0.99); } - .IntroductionButton:focus-visible { + .IntroductionButton.Mui-focusVisible { box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]}; outline: none; } diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx index 65647038710c14..d60494f1647dc1 100644 --- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx +++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx @@ -66,19 +66,19 @@ function Styles() { transition: all 150ms ease; cursor: pointer; border: 1px solid ${cyan[500]}; - box-shadow: 0 2px 4px ${ - isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)' + box-shadow: 0 2px 1px ${ + isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]}; } .IntroductionButton:hover { background-color: ${cyan[600]}; } - .IntroductionButton:active { + .IntroductionButton.Mui-active { background-color: ${cyan[700]}; box-shadow: none; transform: scale(0.99); } - .IntroductionButton:focus-visible { + .IntroductionButton.Mui-focusVisible { box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]}; outline: none; } diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js index 10e9e41563f8d4..2e87cc69e09a18 100644 --- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js +++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js @@ -47,21 +47,21 @@ const Button = styled(BaseButton)( transition: all 150ms ease; cursor: pointer; border: 1px solid ${blue[500]}; - box-shadow: 0 2px 4px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)' + box-shadow: 0 2px 1px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; &:hover { background-color: ${blue[600]}; } - &:active { + &.Mui-active { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.Mui-focusVisible { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx index 10e9e41563f8d4..2e87cc69e09a18 100644 --- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx +++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx @@ -47,21 +47,21 @@ const Button = styled(BaseButton)( transition: all 150ms ease; cursor: pointer; border: 1px solid ${blue[500]}; - box-shadow: 0 2px 4px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)' + box-shadow: 0 2px 1px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; &:hover { background-color: ${blue[600]}; } - &:active { + &.Mui-active { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.Mui-focusVisible { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js index 6491a48a14daad..5de362a93bda6a 100644 --- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js +++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js @@ -57,7 +57,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx index 6491a48a14daad..5de362a93bda6a 100644 --- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx +++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx @@ -57,7 +57,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js index 92168a297c8771..2b1817d016ee03 100644 --- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js +++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js @@ -59,7 +59,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx index c46f036a2f2cfa..27d361413b8fe4 100644 --- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx +++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx @@ -64,7 +64,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple.js similarity index 100% rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.js rename to docs/data/base/components/button/UnstyledButtonsSimple.js diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple.tsx similarity index 100% rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview similarity index 100% rename from docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx.preview rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js deleted file mode 100644 index 1aa84471eaaf70..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; -import { Button } from '@mui/base/Button'; -import { useTheme } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSimple() { - return ( - - - - - - - - ); -} - -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: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -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 ( - - ); -} diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx deleted file mode 100644 index 1aa84471eaaf70..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; -import { Button } from '@mui/base/Button'; -import { useTheme } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSimple() { - return ( - - - - - - - - ); -} - -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: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -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 ( - - ); -} diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview deleted file mode 100644 index 7f4fc49ccac306..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js deleted file mode 100644 index d99ce60ca1e5d2..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { Button as BaseButton } from '@mui/base/Button'; -import Stack from '@mui/material/Stack'; -import clsx from 'clsx'; -import { useTheme } from '@mui/system'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledButtonsSimple() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
- - Button - Disabled - -
- ); -} - -const CustomButton = React.forwardRef((props, ref) => { - const { className, ...other } = props; - return ( - - ); -}); - -CustomButton.propTypes = { - className: PropTypes.string, -}; diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx deleted file mode 100644 index df5012b5bcefc4..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { Button as BaseButton, ButtonProps } from '@mui/base/Button'; -import Stack from '@mui/material/Stack'; -import clsx from 'clsx'; -import { useTheme } from '@mui/system'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledButtonsSimple() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
- - Button - Disabled - -
- ); -} - -const CustomButton = React.forwardRef( - (props, ref) => { - const { className, ...other } = props; - return ( - - ); - }, -); diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview deleted file mode 100644 index 53f6465d2c7cfb..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - Button - Disabled - \ No newline at end of file diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js index 4a39112c579e26..976a79bb52caaf 100644 --- a/docs/data/base/components/button/UnstyledButtonsSpan.js +++ b/docs/data/base/components/button/UnstyledButtonsSpan.js @@ -57,7 +57,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); @@ -76,5 +76,5 @@ const Button = styled(BaseButton)( box-shadow: none; transform: scale(1); } - `, +`, ); diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx index 8f852a53fc3080..976a79bb52caaf 100644 --- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx +++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; -import { - Button as BaseButton, - buttonClasses, - ButtonTypeMap, -} from '@mui/base/Button'; +import { Button as BaseButton, buttonClasses } from '@mui/base/Button'; import { styled } from '@mui/system'; import Stack from '@mui/material/Stack'; -import { PolymorphicComponent } from '@mui/base/utils'; export default function UnstyledButtonsSpan() { return ( @@ -62,7 +57,7 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); @@ -81,5 +76,5 @@ const Button = styled(BaseButton)( box-shadow: none; transform: scale(1); } - `, -) as PolymorphicComponent; +`, +); diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js deleted file mode 100644 index 50bc1292d1e6e7..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import { Button } from '@mui/base/Button'; -import { useTheme } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSpan() { - return ( - - - - - - - - ); -} - -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: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -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 ( - - ); -} diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx deleted file mode 100644 index 50bc1292d1e6e7..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import { Button } from '@mui/base/Button'; -import { useTheme } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSpan() { - return ( - - - - - - - - ); -} - -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: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -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 ( - - ); -} diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview deleted file mode 100644 index f5854b7a13d486..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js deleted file mode 100644 index dbe0c9e6b7e1e2..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import { Button as BaseButton } from '@mui/base/Button'; -import { styled } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSpan() { - return ( - - - - - ); -} - -const blue = { - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0066CC', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Button = styled(BaseButton)( - ({ theme }) => ` - font-family: IBM Plex Sans, sans-serif; - font-weight: 600; - font-size: 0.875rem; - line-height: 1.5; - background-color: ${blue[500]}; - padding: 8px 16px; - border-radius: 8px; - color: white; - transition: all 150ms ease; - cursor: pointer; - border: 1px solid ${blue[500]}; - box-shadow: 0 2px 1px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' - }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; - - &:hover { - background-color: ${blue[600]}; - } - - &:active { - background-color: ${blue[700]}; - box-shadow: none; - } - - &:focus-visible { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; - outline: none; - } - - &.Mui-disabled { - background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}; - border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - cursor: not-allowed; - box-shadow: none; - } - - &.Mui-disabled:hover { - background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - } -`, -); diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx deleted file mode 100644 index dbe0c9e6b7e1e2..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import { Button as BaseButton } from '@mui/base/Button'; -import { styled } from '@mui/system'; -import Stack from '@mui/material/Stack'; - -export default function UnstyledButtonsSpan() { - return ( - - - - - ); -} - -const blue = { - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0066CC', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Button = styled(BaseButton)( - ({ theme }) => ` - font-family: IBM Plex Sans, sans-serif; - font-weight: 600; - font-size: 0.875rem; - line-height: 1.5; - background-color: ${blue[500]}; - padding: 8px 16px; - border-radius: 8px; - color: white; - transition: all 150ms ease; - cursor: pointer; - border: 1px solid ${blue[500]}; - box-shadow: 0 2px 1px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' - }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; - - &:hover { - background-color: ${blue[600]}; - } - - &:active { - background-color: ${blue[700]}; - box-shadow: none; - } - - &:focus-visible { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; - outline: none; - } - - &.Mui-disabled { - background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}; - border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - cursor: not-allowed; - box-shadow: none; - } - - &.Mui-disabled:hover { - background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; - } -`, -); diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview deleted file mode 100644 index 3a8d9ed0ae21de..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js deleted file mode 100644 index 5fd52f0d74ea8f..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { Button as BaseButton } from '@mui/base/Button'; -import Stack from '@mui/material/Stack'; -import clsx from 'clsx'; -import { useTheme } from '@mui/system'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledButtonsSimple() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
- - - Button - - - Disabled - - -
- ); -} - -const CustomButton = React.forwardRef((props, ref) => { - const { className, disabled, ...other } = props; - return ( - - ); -}); - -CustomButton.propTypes = { - className: PropTypes.string, - /** - * If `true`, the component is disabled. - * @default false - */ - disabled: PropTypes.bool, -}; diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx deleted file mode 100644 index 4e7aef776baed9..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { Button as BaseButton, ButtonProps } from '@mui/base/Button'; -import Stack from '@mui/material/Stack'; -import clsx from 'clsx'; -import { useTheme } from '@mui/system'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledButtonsSimple() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
- - - Button - - - Disabled - - -
- ); -} - -const CustomButton = React.forwardRef( - (props, ref) => { - const { className, disabled, ...other } = props; - return ( - - ); - }, -); diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview deleted file mode 100644 index 6eae560418bde6..00000000000000 --- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - Button - - - Disabled - - \ No newline at end of file diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js index 043d6bc183a91a..a39184fd15bad9 100644 --- a/docs/data/base/components/button/UnstyledLinkButton.js +++ b/docs/data/base/components/button/UnstyledLinkButton.js @@ -62,13 +62,13 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.${buttonClasses.focusVisible} { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx index 043d6bc183a91a..a39184fd15bad9 100644 --- a/docs/data/base/components/button/UnstyledLinkButton.tsx +++ b/docs/data/base/components/button/UnstyledLinkButton.tsx @@ -62,13 +62,13 @@ const Button = styled(BaseButton)( background-color: ${blue[600]}; } - &:active { + &.${buttonClasses.active} { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.${buttonClasses.focusVisible} { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js index fc7519fafbd04b..cb4ffcdb27b603 100644 --- a/docs/data/base/components/button/UseButton.js +++ b/docs/data/base/components/button/UseButton.js @@ -12,14 +12,15 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) { rootRef: ref, }); - const classes = { - active, - disabled, - focusVisible, - }; - return ( - + {children} ); @@ -86,13 +87,13 @@ const CustomButtonRoot = styled('button')( background-color: ${blue[600]}; } - &:active { + &.active { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.focusVisible { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx index bb5a05ecda081d..bb277cba10acb6 100644 --- a/docs/data/base/components/button/UseButton.tsx +++ b/docs/data/base/components/button/UseButton.tsx @@ -15,14 +15,15 @@ const CustomButton = React.forwardRef(function CustomButton( rootRef: ref, }); - const classes = { - active, - disabled, - focusVisible, - }; - return ( - + {children} ); @@ -80,13 +81,13 @@ const CustomButtonRoot = styled('button')( background-color: ${blue[600]}; } - &:active { + &.active { background-color: ${blue[700]}; box-shadow: none; transform: scale(0.99); } - &:focus-visible { + &.focusVisible { box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; outline: none; } diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index 4f9c8afe9e5982..1ce20c7cfdf67b 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -32,7 +32,7 @@ The Button behaves similar to the native HTML `