From 2b69d220b2954a57bd04c028d44f347325dab411 Mon Sep 17 00:00:00 2001 From: Haneen Mahdin Date: Wed, 4 May 2022 16:28:20 +0530 Subject: [PATCH 1/3] [MobileStepper] Add support for CSS vars --- .../material-ui/mobile-stepper.tsx | 78 +++++++++++++++++++ .../src/MobileStepper/MobileStepper.js | 10 +-- 2 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 docs/pages/experiments/material-ui/mobile-stepper.tsx diff --git a/docs/pages/experiments/material-ui/mobile-stepper.tsx b/docs/pages/experiments/material-ui/mobile-stepper.tsx new file mode 100644 index 00000000000000..4f2e7f4cdda88d --- /dev/null +++ b/docs/pages/experiments/material-ui/mobile-stepper.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import { MobileStepper } from '@mui/material'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + const [activeStep, setStep] = React.useState(3); + + const handleIncrease = () => setStep(activeStep + 1); + const handleDecrease = () => setStep(activeStep - 1); + + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + Mobile Stepper + + + Decrement} + nextButton={} + /> + + + + + ); +} diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index 722f45c73513c5..227506cbb3b32b 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -37,21 +37,21 @@ const MobileStepperRoot = styled(Paper, { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - background: theme.palette.background.default, + background: (theme.vars || theme).palette.background.default, padding: 8, ...(ownerState.position === 'bottom' && { position: 'fixed', bottom: 0, left: 0, right: 0, - zIndex: theme.zIndex.mobileStepper, + zIndex: (theme.vars || theme).zIndex.mobileStepper, }), ...(ownerState.position === 'top' && { position: 'fixed', top: 0, left: 0, right: 0, - zIndex: theme.zIndex.mobileStepper, + zIndex: (theme.vars || theme).zIndex.mobileStepper, }), })); @@ -80,13 +80,13 @@ const MobileStepperDot = styled('div', { transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shortest, }), - backgroundColor: theme.palette.action.disabled, + backgroundColor: (theme.vars || theme).palette.action.disabled, borderRadius: '50%', width: 8, height: 8, margin: '0 2px', ...(dotActive && { - backgroundColor: theme.palette.primary.main, + backgroundColor: (theme.vars || theme).palette.primary.main, }), }), })); From d68e12816eea82e29fe73516483289813cbd4201 Mon Sep 17 00:00:00 2001 From: Haneen Mahdin Date: Wed, 4 May 2022 20:26:48 +0530 Subject: [PATCH 2/3] Use a better demo --- .../material-ui/mobile-stepper.tsx | 95 ++++++++++++++++--- 1 file changed, 82 insertions(+), 13 deletions(-) diff --git a/docs/pages/experiments/material-ui/mobile-stepper.tsx b/docs/pages/experiments/material-ui/mobile-stepper.tsx index 4f2e7f4cdda88d..799a211545aad6 100644 --- a/docs/pages/experiments/material-ui/mobile-stepper.tsx +++ b/docs/pages/experiments/material-ui/mobile-stepper.tsx @@ -2,14 +2,93 @@ import * as React from 'react'; import { Experimental_CssVarsProvider as CssVarsProvider, useColorScheme, + useTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import Moon from '@mui/icons-material/DarkMode'; import Sun from '@mui/icons-material/LightMode'; -import { MobileStepper } from '@mui/material'; +import MobileStepper from '@mui/material/MobileStepper'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; + +const steps = [ + { + label: 'Select campaign settings', + description: `For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more.`, + }, + { + label: 'Create an ad group', + description: 'An ad group contains one or more ads which target a shared set of keywords.', + }, + { + label: 'Create an ad', + description: `Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues.`, + }, +]; + +function TextMobileStepper() { + const theme = useTheme(); + const [activeStep, setActiveStep] = React.useState(0); + const maxSteps = steps.length; + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; + + return ( + + + {steps[activeStep].label} + + + {steps[activeStep].description} + + + Next + {theme.direction === 'rtl' ? : } + + } + backButton={ + + } + /> + + ); +} + const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -38,11 +117,6 @@ const ColorSchemePicker = () => { }; export default function CssVarsTemplate() { - const [activeStep, setStep] = React.useState(3); - - const handleIncrease = () => setStep(activeStep + 1); - const handleDecrease = () => setStep(activeStep - 1); - return ( @@ -64,12 +138,7 @@ export default function CssVarsTemplate() { Mobile Stepper - Decrement} - nextButton={} - /> + From 6d8f0e1f8d057e93756ef05e05d42d2935737777 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 May 2022 23:48:14 +0700 Subject: [PATCH 3/3] run prettier --- docs/pages/experiments/material-ui/mobile-stepper.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/pages/experiments/material-ui/mobile-stepper.tsx b/docs/pages/experiments/material-ui/mobile-stepper.tsx index 799a211545aad6..f8e35214623738 100644 --- a/docs/pages/experiments/material-ui/mobile-stepper.tsx +++ b/docs/pages/experiments/material-ui/mobile-stepper.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Experimental_CssVarsProvider as CssVarsProvider, useColorScheme, - useTheme + useTheme, } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; @@ -89,7 +89,6 @@ function TextMobileStepper() { ); } - const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); const [mounted, setMounted] = React.useState(false);