From dec4772a2172f097dbeacf8591154b88dafe808d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 4 Sep 2023 22:40:14 +0200 Subject: [PATCH] [docs] Trim trailing whitespace (#38793) --- .../AutocompleteIntroduction/system/index.js | 6 +- .../AutocompleteIntroduction/system/index.tsx | 6 +- .../components/button/UnstyledButtonCustom.js | 4 +- .../button/UnstyledButtonCustom.tsx | 4 +- .../button/UnstyledButtonsSimple/css/index.js | 5 +- .../UnstyledButtonsSimple/css/index.tsx | 5 +- .../BasicFormControl/system/index.js | 2 +- .../BasicFormControl/system/index.tsx | 2 +- .../form-control/FormControlFunctionChild.js | 1 - .../form-control/FormControlFunctionChild.tsx | 1 - .../input/UnstyledInputBasic/css/index.js | 6 +- .../input/UnstyledInputBasic/css/index.tsx | 6 +- .../UnstyledInputIntroduction/css/index.js | 4 +- .../UnstyledInputIntroduction/css/index.tsx | 4 +- .../components/menu/MenuSimple/css/index.js | 3 +- .../components/menu/MenuSimple/css/index.tsx | 3 +- docs/data/base/components/menu/UseMenu.js | 5 +- docs/data/base/components/menu/UseMenu.tsx | 5 +- .../NumberInputBasic/system/index.js | 3 +- .../NumberInputBasic/system/index.tsx | 3 +- .../number-input/NumberInputIntroduction.js | 3 +- .../number-input/NumberInputIntroduction.tsx | 3 +- .../QuantityInput/system/index.js | 3 - .../QuantityInput/system/index.tsx | 3 - .../popper/UnstyledPopperBasic/css/index.js | 5 +- .../popper/UnstyledPopperBasic/css/index.tsx | 5 +- .../UnstyledPopperBasic/system/index.js | 4 +- .../UnstyledPopperBasic/system/index.tsx | 4 +- .../UnstyledPopupIntroduction/css/index.js | 60 +++++++++---------- .../UnstyledPopupIntroduction/css/index.tsx | 60 +++++++++---------- .../UnstyledSelectIntroduction/css/index.js | 4 -- .../UnstyledSelectIntroduction/css/index.tsx | 4 -- .../snackbar/UnstyledSnackbar/css/index.js | 2 +- .../snackbar/UnstyledSnackbar/css/index.tsx | 2 +- .../UnstyledSnackbarIntroduction/css/index.js | 2 +- .../css/index.tsx | 2 +- .../UnstyledSwitchIntroduction/css/index.js | 3 +- .../UnstyledSwitchIntroduction/css/index.tsx | 3 +- .../system/index.js | 1 - .../system/index.tsx | 1 - .../components/switch/UnstyledSwitches.js | 1 - .../components/switch/UnstyledSwitches.tsx | 1 - .../TableCustomized/css/index.js | 2 +- .../TableCustomized/css/index.tsx | 2 +- .../css/index.js | 6 +- .../css/index.tsx | 6 +- .../textarea-autosize/EmptyTextarea.js | 6 +- .../textarea-autosize/EmptyTextarea.tsx | 6 +- .../textarea-autosize/MaxHeightTextarea.js | 6 +- .../textarea-autosize/MaxHeightTextarea.tsx | 6 +- .../textarea-autosize/MinHeightTextarea.js | 6 +- .../textarea-autosize/MinHeightTextarea.tsx | 6 +- .../UnstyledTextarea/css/index.js | 4 +- .../UnstyledTextarea/css/index.tsx | 4 +- .../UnstyledTextarea/system/index.js | 6 +- .../UnstyledTextarea/system/index.tsx | 6 +- .../material-icons/material-icons-pt.md | 2 +- .../material-icons/material-icons-zh.md | 2 +- .../interoperability/interoperability-pt.md | 2 +- .../interoperability/interoperability-zh.md | 2 +- docs/pages/experiments/base/listbox.tsx | 2 +- .../productBaseUI/BaseUIThemesDemo.tsx | 3 +- .../productMaterial/MaterialComponents.tsx | 2 +- .../modules/components/JoyThemeBuilder.tsx | 2 +- .../src/LinearProgress/LinearProgress.tsx | 2 +- 65 files changed, 155 insertions(+), 190 deletions(-) diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js index 9aa53294a34be7..73c984e5efc078 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js @@ -155,7 +155,7 @@ const StyledAutocompleteRoot = styled('div')( padding-right: 5px; overflow: hidden; width: 320px; - + &.focused { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; @@ -264,7 +264,7 @@ const StyledPopupIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; @@ -289,7 +289,7 @@ const StyledClearIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx index 1d465838034b49..394748ee3e017d 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx @@ -138,7 +138,7 @@ const StyledAutocompleteRoot = styled('div')( padding-right: 5px; overflow: hidden; width: 320px; - + &.focused { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; @@ -247,7 +247,7 @@ const StyledPopupIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; @@ -272,7 +272,7 @@ const StyledClearIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js index f24ea77300da7e..4f4e2399fafeaf 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.js +++ b/docs/data/base/components/button/UnstyledButtonCustom.js @@ -53,7 +53,7 @@ const CustomButtonRoot = styled(ButtonRoot)( transition: all 800ms ease; pointer-events: none; } - + & .bg { stroke: var(--main-color); stroke-width: 1; @@ -86,7 +86,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &.${buttonClasses.active} { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 300ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx index 6733dee6f7e020..72413739662779 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.tsx +++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx @@ -54,7 +54,7 @@ const CustomButtonRoot = styled(ButtonRoot)( transition: all 800ms ease; pointer-events: none; } - + & .bg { stroke: var(--main-color); stroke-width: 1; @@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &.${buttonClasses.active} { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 300ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js index 1caf7cb2550212..f7cdde1f0fd0be 100644 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js +++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js @@ -54,12 +54,11 @@ function Styles() { .CustomButton:active:not(.${buttonClasses.disabled}) { background-color: ${cyan[700]}; } - + .${buttonClasses.disabled} { opacity: 0.5; cursor: not-allowed; - - + } `} ); diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx index 1caf7cb2550212..f7cdde1f0fd0be 100644 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx +++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx @@ -54,12 +54,11 @@ function Styles() { .CustomButton:active:not(.${buttonClasses.disabled}) { background-color: ${cyan[700]}; } - + .${buttonClasses.disabled} { opacity: 0.5; cursor: not-allowed; - - + } `} ); diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.js b/docs/data/base/components/form-control/BasicFormControl/system/index.js index 74956e018b87b0..f2b89b5af1061b 100644 --- a/docs/data/base/components/form-control/BasicFormControl/system/index.js +++ b/docs/data/base/components/form-control/BasicFormControl/system/index.js @@ -16,7 +16,7 @@ export default function BasicFormControl() { const StyledInput = styled(Input)( ({ theme }) => ` - + .${inputClasses.input} { width: 320px; font-size: 0.875rem; diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx index 3b3d38e15c2cd4..a76d389e9f983c 100644 --- a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx +++ b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx @@ -16,7 +16,7 @@ export default function BasicFormControl() { const StyledInput = styled(Input)( ({ theme }) => ` - + .${inputClasses.input} { width: 320px; font-size: 0.875rem; diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js index 2710be182fb482..1d15c03b3e2ff4 100644 --- a/docs/data/base/components/form-control/FormControlFunctionChild.js +++ b/docs/data/base/components/form-control/FormControlFunctionChild.js @@ -18,7 +18,6 @@ export default function FormControlFunctionChild() { const StyledInput = styled(Input)( ({ theme }) => ` - display: inline-block; .${inputClasses.input} { diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx index 0ec778fa20ae5a..2ec9f57b26b993 100644 --- a/docs/data/base/components/form-control/FormControlFunctionChild.tsx +++ b/docs/data/base/components/form-control/FormControlFunctionChild.tsx @@ -18,7 +18,6 @@ export default function FormControlFunctionChild() { const StyledInput = styled(Input)( ({ theme }) => ` - display: inline-block; .${inputClasses.input} { diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js index f115837b61c88c..a64877d635bed1 100644 --- a/docs/data/base/components/input/UnstyledInputBasic/css/index.js +++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.js @@ -65,16 +65,16 @@ function Styles() { background: ${isDarkMode ? grey[900] : '#fff'}; border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]}; - + &:hover { border-color: ${cyan[400]}; } - + &:focus { border-color: ${cyan[400]}; box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; } - + &:focus-visible { outline: 0; } diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx index f115837b61c88c..a64877d635bed1 100644 --- a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx +++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx @@ -65,16 +65,16 @@ function Styles() { background: ${isDarkMode ? grey[900] : '#fff'}; border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]}; - + &:hover { border-color: ${cyan[400]}; } - + &:focus { border-color: ${cyan[400]}; box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; } - + &:focus-visible { outline: 0; } diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js index ddf9d9f8f09a9b..7db613fae34b34 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js +++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js @@ -65,11 +65,11 @@ function Styles() { background: ${isDarkMode ? grey[900] : '#fff'}; border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]}; - + &:hover { border-color: ${cyan[400]}; } - + &:focus { border-color: ${cyan[400]}; box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]}; diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx index ddf9d9f8f09a9b..7db613fae34b34 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx +++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx @@ -65,11 +65,11 @@ function Styles() { background: ${isDarkMode ? grey[900] : '#fff'}; border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]}; - + &:hover { border-color: ${cyan[400]}; } - + &:focus { border-color: ${cyan[400]}; box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]}; diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js index 817e9ec525430f..0c5e3c2730567f 100644 --- a/docs/data/base/components/menu/MenuSimple/css/index.js +++ b/docs/data/base/components/menu/MenuSimple/css/index.js @@ -140,7 +140,6 @@ function Styles() { cursor: pointer; border: 1px solid ${isDarkMode ? grey[800] : grey[200]}; color: ${isDarkMode ? cyan[300] : cyan[400]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -150,7 +149,7 @@ function Styles() { background: ${isDarkMode ? grey[800] : grey[50]}; border-color: ${isDarkMode ? grey[600] : grey[300]}; } - + .TriggerButton:focus-visible { border-color: ${cyan[400]}; outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]}; diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx index 7941a093d09e0a..90749a10a77fd2 100644 --- a/docs/data/base/components/menu/MenuSimple/css/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/css/index.tsx @@ -140,7 +140,6 @@ function Styles() { cursor: pointer; border: 1px solid ${isDarkMode ? grey[800] : grey[200]}; color: ${isDarkMode ? cyan[300] : cyan[400]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -150,7 +149,7 @@ function Styles() { background: ${isDarkMode ? grey[800] : grey[50]}; border-color: ${isDarkMode ? grey[600] : grey[300]}; } - + .TriggerButton:focus-visible { border-color: ${cyan[400]}; outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]}; diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js index 1120423f829f3e..2053fb5680b27c 100644 --- a/docs/data/base/components/menu/UseMenu.js +++ b/docs/data/base/components/menu/UseMenu.js @@ -188,16 +188,15 @@ const styles = ` border: 1px solid ${grey[200]}; color: ${grey[900]}; cursor: pointer; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; - + &:hover { background: ${grey[50]}; border-color: ${grey[300]}; } - + &:focus-visible { border-color: ${blue[400]}; outline: 3px solid ${blue[200]}; diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx index a512bc2d2bab3e..129b7b2615f71b 100644 --- a/docs/data/base/components/menu/UseMenu.tsx +++ b/docs/data/base/components/menu/UseMenu.tsx @@ -187,16 +187,15 @@ const styles = ` border: 1px solid ${grey[200]}; color: ${grey[900]}; cursor: pointer; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; - + &:hover { background: ${grey[50]}; border-color: ${grey[300]}; } - + &:focus-visible { border-color: ${blue[400]}; outline: 3px solid ${blue[200]}; diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.js b/docs/data/base/components/number-input/NumberInputBasic/system/index.js index b5920b72210369..2a708e438c961e 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/system/index.js +++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.js @@ -126,7 +126,6 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -141,7 +140,7 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 1/2; } - + &.${numberInputClasses.decrementButton} { grid-column: 2/3; grid-row: 2/3; diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx index 0c6d88aa426446..57e0b14b9cbf23 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx +++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx @@ -130,7 +130,6 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -145,7 +144,7 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 1/2; } - + &.${numberInputClasses.decrementButton} { grid-column: 2/3; grid-row: 2/3; diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js index d0518191dbbbd2..08b7d982256a42 100644 --- a/docs/data/base/components/number-input/NumberInputIntroduction.js +++ b/docs/data/base/components/number-input/NumberInputIntroduction.js @@ -121,7 +121,6 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -136,7 +135,7 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 1/2; } - + &.${numberInputClasses.decrementButton} { grid-column: 2/3; grid-row: 2/3; diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction.tsx index fbab0df46eda37..41c83fc1a34bbe 100644 --- a/docs/data/base/components/number-input/NumberInputIntroduction.tsx +++ b/docs/data/base/components/number-input/NumberInputIntroduction.tsx @@ -125,7 +125,6 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 0; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -140,7 +139,7 @@ const StyledButton = styled('button')( grid-column: 2/3; grid-row: 1/2; } - + &.${numberInputClasses.decrementButton} { grid-column: 2/3; grid-row: 2/3; diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.js b/docs/data/base/components/number-input/QuantityInput/system/index.js index bb48c57411a7a8..d6e947347003a6 100644 --- a/docs/data/base/components/number-input/QuantityInput/system/index.js +++ b/docs/data/base/components/number-input/QuantityInput/system/index.js @@ -60,7 +60,6 @@ const StyledInputRoot = styled('div')( font-family: IBM Plex Sans, sans-serif; font-weight: 400; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]}; - display: flex; flex-flow: row nowrap; justify-content: center; @@ -110,14 +109,12 @@ const StyledButton = styled('button')( border-radius: 999px; color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]}; background: transparent; - width: 40px; height: 40px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.tsx b/docs/data/base/components/number-input/QuantityInput/system/index.tsx index 4cd346988c5225..a9ef7fcfa7dc1b 100644 --- a/docs/data/base/components/number-input/QuantityInput/system/index.tsx +++ b/docs/data/base/components/number-input/QuantityInput/system/index.tsx @@ -66,7 +66,6 @@ const StyledInputRoot = styled('div')( font-family: IBM Plex Sans, sans-serif; font-weight: 400; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]}; - display: flex; flex-flow: row nowrap; justify-content: center; @@ -116,14 +115,12 @@ const StyledButton = styled('button')( border-radius: 999px; color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]}; background: transparent; - width: 40px; height: 40px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js index 2139fc1f221472..707d9c7aa48701 100644 --- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js +++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js @@ -66,7 +66,6 @@ function Styles() { const isDarkMode = useIsDarkMode(); return ( ); diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx index afaeb697b58c9f..be870592eddfaf 100644 --- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx +++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx @@ -62,40 +62,38 @@ function Styles() { // Replace this with your app logic for determining dark mode const isDarkMode = useIsDarkMode(); return ( - ); diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js index c85a1bacb30954..16f99ef827b9ae 100644 --- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js +++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js @@ -101,9 +101,6 @@ function Styles() { color: ${isDarkMode ? grey[300] : grey[900]}; position: relative; box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]}; - - - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -118,7 +115,6 @@ function Styles() { outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]}; } - & > svg { font-size: 1rem; position: absolute; diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx index 00c6ae2d818f05..f67e0106e645ab 100644 --- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx +++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx @@ -101,9 +101,6 @@ function Styles() { color: ${isDarkMode ? grey[300] : grey[900]}; position: relative; box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]}; - - - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -118,7 +115,6 @@ function Styles() { outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]}; } - & > svg { font-size: 1rem; position: absolute; diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js index eec5c0e0c3291a..bb36790e37b6ec 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js +++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js @@ -77,7 +77,7 @@ function Styles() { from { transform: translateX(100%); } - + to { transform: translateX(0); } diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx index eec5c0e0c3291a..bb36790e37b6ec 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx +++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx @@ -77,7 +77,7 @@ function Styles() { from { transform: translateX(100%); } - + to { transform: translateX(0); } diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js index 79f7b301d975af..f78872f16b33bf 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js +++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js @@ -137,7 +137,7 @@ function Styles() { from { transform: translateX(100%); } - + to { transform: translateX(0); } diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx index 547ae8229d9ba8..b7828d6d12f200 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx +++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx @@ -138,7 +138,7 @@ function Styles() { from { transform: translateX(100%); } - + to { transform: translateX(0); } diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js index 47b8a3082e0ff0..bb919c7d2e33ad 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js @@ -112,7 +112,6 @@ function Styles() { border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -150,7 +149,7 @@ function Styles() { z-index: 1; margin: 0; } - + `} ); diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx index 47b8a3082e0ff0..bb919c7d2e33ad 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx @@ -112,7 +112,6 @@ function Styles() { border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -150,7 +149,7 @@ function Styles() { z-index: 1; margin: 0; } - + `} ); diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js index b8e5ab6425583e..331b17a4a60c57 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js @@ -81,7 +81,6 @@ const Root = styled('span')( border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx index b8e5ab6425583e..331b17a4a60c57 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx @@ -81,7 +81,6 @@ const Root = styled('span')( border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js index 38edba2147b0c4..23c54478e38776 100644 --- a/docs/data/base/components/switch/UnstyledSwitches.js +++ b/docs/data/base/components/switch/UnstyledSwitches.js @@ -81,7 +81,6 @@ const Root = styled('span')( border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx index 38edba2147b0c4..23c54478e38776 100644 --- a/docs/data/base/components/switch/UnstyledSwitches.tsx +++ b/docs/data/base/components/switch/UnstyledSwitches.tsx @@ -81,7 +81,6 @@ const Root = styled('span')( border-radius: 16px; background-color: #fff; position: relative; - transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.js b/docs/data/base/components/table-pagination/TableCustomized/css/index.js index 01d52b207f299a..9c4d968a0688d6 100644 --- a/docs/data/base/components/table-pagination/TableCustomized/css/index.js +++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.js @@ -164,7 +164,7 @@ function Styles() { .TablePaginationDemo th { background-color: ${isDarkMode ? cyan[800] : cyan[50]}; } - + .CustomTablePagination .${classes.spacer} { display: none; } diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx index c3f9fae825ca22..c924d1d72ffb2a 100644 --- a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx +++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx @@ -169,7 +169,7 @@ function Styles() { .TablePaginationDemo th { background-color: ${isDarkMode ? cyan[800] : cyan[50]}; } - + .CustomTablePagination .${classes.spacer} { display: none; } diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js index b11fa85653c4a4..b576613dc8e31b 100644 --- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js +++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js @@ -93,10 +93,12 @@ function Styles() { .TablePaginationIntroductionDemo { width: 500px; max-width: 100%; - } + } + th { background-color: ${isDarkMode ? grey[900] : '#fff'}; } + .TablePaginationIntroductionDemo table { font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -116,7 +118,7 @@ function Styles() { .TablePaginationIntroductionDemo th { background-color: ${isDarkMode ? grey[900] : '#fff'}; } - + .CustomTablePagination .${classes.spacer} { display: none; } diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx index 658aa2b87d49a8..43b582907026ed 100644 --- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx +++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx @@ -98,10 +98,12 @@ function Styles() { .TablePaginationIntroductionDemo { width: 500px; max-width: 100%; - } + } + th { background-color: ${isDarkMode ? grey[900] : '#fff'}; } + .TablePaginationIntroductionDemo table { font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -121,7 +123,7 @@ function Styles() { .TablePaginationIntroductionDemo th { background-color: ${isDarkMode ? grey[900] : '#fff'}; } - + .CustomTablePagination .${classes.spacer} { display: none; } diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js index 1b69b87b439a68..48d27659bfde96 100644 --- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js +++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js @@ -38,16 +38,16 @@ export default function EmptyTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx index 1b69b87b439a68..48d27659bfde96 100644 --- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx +++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx @@ -38,16 +38,16 @@ export default function EmptyTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js index 4a851b38eae588..01b8b5dee5199e 100644 --- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js +++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js @@ -38,16 +38,16 @@ export default function MaxHeightTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx index 4a851b38eae588..01b8b5dee5199e 100644 --- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx +++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx @@ -38,16 +38,16 @@ export default function MaxHeightTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js index abb9bb169098f4..1324d251d63b04 100644 --- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js +++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js @@ -38,16 +38,16 @@ export default function MinHeightTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx index abb9bb169098f4..1324d251d63b04 100644 --- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx +++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx @@ -38,16 +38,16 @@ export default function MinHeightTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js index ad68709ff1f1b2..8f6344393c8e47 100644 --- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js +++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js @@ -75,10 +75,10 @@ function Styles() { box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; outline: none; } - + // firefox .CustomTextarea:focus-visible { - outline: 0; + outline: 0; } `} diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx index ad68709ff1f1b2..8f6344393c8e47 100644 --- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx +++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx @@ -75,10 +75,10 @@ function Styles() { box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; outline: none; } - + // firefox .CustomTextarea:focus-visible { - outline: 0; + outline: 0; } `} diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js index e26d0f61e51de2..ae355fd760a508 100644 --- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js +++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js @@ -38,16 +38,16 @@ export default function EmptyTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx index e26d0f61e51de2..ae355fd760a508 100644 --- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx +++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx @@ -38,16 +38,16 @@ export default function EmptyTextarea() { background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; - + &:hover { border-color: ${blue[400]}; } - + &:focus { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - + // firefox &:focus-visible { outline: 0; diff --git a/docs/data/material/components/material-icons/material-icons-pt.md b/docs/data/material/components/material-icons/material-icons-pt.md index 7aa84683f9e623..ce3156b026d3e1 100644 --- a/docs/data/material/components/material-icons/material-icons-pt.md +++ b/docs/data/material/components/material-icons/material-icons-pt.md @@ -15,7 +15,7 @@ O pacote npm, [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-mat :::info The `@mui/icons-material` package depends on `@mui/material`, which requires Emotion packages. -If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`. +If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`. See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly. ::: diff --git a/docs/data/material/components/material-icons/material-icons-zh.md b/docs/data/material/components/material-icons/material-icons-zh.md index ad8519706fffc8..1c6ff7930028a5 100644 --- a/docs/data/material/components/material-icons/material-icons-zh.md +++ b/docs/data/material/components/material-icons/material-icons-zh.md @@ -15,7 +15,7 @@ The following npm package, [@mui/icons-material](https://www.npmjs.com/package/@ :::info The `@mui/icons-material` package depends on `@mui/material`, which requires Emotion packages. -If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`. +If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`. See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly. ::: diff --git a/docs/data/material/guides/interoperability/interoperability-pt.md b/docs/data/material/guides/interoperability/interoperability-pt.md index b7049cf7b744a3..6c93cf1de96afa 100644 --- a/docs/data/material/guides/interoperability/interoperability-pt.md +++ b/docs/data/material/guides/interoperability/interoperability-pt.md @@ -861,6 +861,6 @@ There is [an ESLint plugin](https://docs.tss-react.dev/detecting-unused-classes) ::: :::warning -For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default. +For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default. Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI. ::: diff --git a/docs/data/material/guides/interoperability/interoperability-zh.md b/docs/data/material/guides/interoperability/interoperability-zh.md index 74d8dccb415c6d..2e4a50485eb227 100644 --- a/docs/data/material/guides/interoperability/interoperability-zh.md +++ b/docs/data/material/guides/interoperability/interoperability-zh.md @@ -855,6 +855,6 @@ There is [an ESLint plugin](https://docs.tss-react.dev/detecting-unused-classes) ::: :::warning -For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default. +For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default. Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI. ::: diff --git a/docs/pages/experiments/base/listbox.tsx b/docs/pages/experiments/base/listbox.tsx index acdb62766465c4..fbdfc67412e677 100644 --- a/docs/pages/experiments/base/listbox.tsx +++ b/docs/pages/experiments/base/listbox.tsx @@ -27,7 +27,7 @@ const styles = ` .list:focus-visible { outline: none; } - + .item { width: 50px; height: 50px; diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx index dc6785b06694f5..1de1bb4a9a5099 100644 --- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx +++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx @@ -505,7 +505,6 @@ const StyledSwitch = styled('span')(` border-radius: max(2px, var(--border-radius)); background-color: #fff; position: relative; - transition-property: left; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 120ms; @@ -625,7 +624,7 @@ const StyledBadge = styled(Badge)( list-style: none; font-family: IBM Plex Sans, sans-serif; position: relative; - display: inline-block; + display: inline-block; & .${badgeClasses.badge} { --_scale: 1.5em; diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx index e2d5a1afd97f2a..b651e77e429d3e 100644 --- a/docs/src/components/productMaterial/MaterialComponents.tsx +++ b/docs/src/components/productMaterial/MaterialComponents.tsx @@ -68,7 +68,7 @@ const CODES = { Add item `, 'Text field': ` diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx index e99209473b0552..51da85ac1ac359 100644 --- a/docs/src/modules/components/JoyThemeBuilder.tsx +++ b/docs/src/modules/components/JoyThemeBuilder.tsx @@ -349,7 +349,7 @@ const theme = extendTheme(${JSON.stringify( (k, v) => (v === undefined ? '__undefined' : v), 2, ).replace(/"__undefined"/g, 'undefined')}) - + export default theme;`; function getPaletteFormProps(colorSchemes: any, colorMode: string, node: string) { diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx index a0974408418a53..af9fa127fda8a0 100644 --- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx +++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx @@ -38,7 +38,7 @@ const progressKeyframe = keyframes` 75% { width: var(--LinearProgress-progressMaxWidth); } - + 100% { left: var(--_LinearProgress-progressInset); width: var(--LinearProgress-progressMinWidth);