From 7deb9c35ce377f55fce9c00eef068de95974386c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 27 Jun 2023 09:55:22 +0200 Subject: [PATCH 1/6] [docs][base] Add Tailwind CSS & plain CSS demo on the Slider page --- .../slider/UnstyledSliderBasic/css/index.js | 131 ++++++++++++++ .../slider/UnstyledSliderBasic/css/index.tsx | 131 ++++++++++++++ .../UnstyledSliderBasic/system/index.js | 106 ++++++++++++ .../UnstyledSliderBasic/system/index.tsx | 106 ++++++++++++ .../system/index.tsx.preview | 2 + .../UnstyledSliderBasic/tailwind/index.js | 161 ++++++++++++++++++ .../UnstyledSliderBasic/tailwind/index.tsx | 79 +++++++++ docs/data/base/components/slider/slider.md | 2 +- docs/tailwind.config.js | 3 + packages/mui-base/src/Slider/Slider.tsx | 1 + packages/mui-base/src/Slider/Slider.types.ts | 1 + 11 files changed, 722 insertions(+), 1 deletion(-) create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/css/index.js create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.js create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js create mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/css/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/css/index.js new file mode 100644 index 00000000000000..7adf6f79e4c75a --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/css/index.js @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { useTheme, alpha } from '@mui/system'; +import Slider, { sliderClasses } from '@mui/base/Slider'; + +export default function UnstyledSlider() { + 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: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +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/slider/UnstyledSliderBasic/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx new file mode 100644 index 00000000000000..7adf6f79e4c75a --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { useTheme, alpha } from '@mui/system'; +import Slider, { sliderClasses } from '@mui/base/Slider'; + +export default function UnstyledSlider() { + 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: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +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/slider/UnstyledSliderBasic/system/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js new file mode 100644 index 00000000000000..215236f098aaff --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js @@ -0,0 +1,106 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import Slider, { sliderClasses } from '@mui/base/Slider'; + +export default function UnstyledSlider() { + return ( + + + + + ); +} + +const blue = { + 100: '#DAECFF', + 200: '#99CCF3', + 400: '#3399FF', + 300: '#66B2FF', + 500: '#007FFF', + 600: '#0072E5', + 900: '#003A75', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +const StyledSlider = styled(Slider)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + height: 6px; + width: 100%; + padding: 16px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + + &:hover { + opacity: 1; + } + + &.${sliderClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; + opacity: 0.5; + } + + & .${sliderClasses.rail} { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.4; + } + + & .${sliderClasses.track} { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .${sliderClasses.thumb} { + position: absolute; + width: 16px; + height: 16px; + margin-left: -6px; + margin-top: -6px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 3px solid currentColor; + background-color: #fff; + + :hover, + &.${sliderClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? blue[400] : blue[300], + 0.15, + )}; + } + + &.${sliderClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[300], + 0.3, + )}; + } + } +`, +); diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx new file mode 100644 index 00000000000000..215236f098aaff --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import Slider, { sliderClasses } from '@mui/base/Slider'; + +export default function UnstyledSlider() { + return ( + + + + + ); +} + +const blue = { + 100: '#DAECFF', + 200: '#99CCF3', + 400: '#3399FF', + 300: '#66B2FF', + 500: '#007FFF', + 600: '#0072E5', + 900: '#003A75', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +const StyledSlider = styled(Slider)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + height: 6px; + width: 100%; + padding: 16px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + + &:hover { + opacity: 1; + } + + &.${sliderClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; + opacity: 0.5; + } + + & .${sliderClasses.rail} { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.4; + } + + & .${sliderClasses.track} { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .${sliderClasses.thumb} { + position: absolute; + width: 16px; + height: 16px; + margin-left: -6px; + margin-top: -6px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 3px solid currentColor; + background-color: #fff; + + :hover, + &.${sliderClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? blue[400] : blue[300], + 0.15, + )}; + } + + &.${sliderClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[300], + 0.3, + )}; + } + } +`, +); diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview new file mode 100644 index 00000000000000..d326ff94b11db6 --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js new file mode 100644 index 00000000000000..1a0a679005e395 --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js @@ -0,0 +1,161 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { useTheme } from '@mui/system'; +import Slider from '@mui/base/Slider'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +const Thumb = React.forwardRef(function Thumb(props, ref) { + const { ownerState, className, ...other } = props; + const focusVisible = props['data-index'] === ownerState.focusedThumbIndex; + const active = props['data-index'] === ownerState.activeThumbIndex; + return ( + + ); +}); + +Thumb.propTypes = { + className: PropTypes.string, + ownerState: PropTypes.shape({ + activeThumbIndex: PropTypes.number.isRequired, + 'aria-label': PropTypes.string, + 'aria-labelledby': PropTypes.string, + 'aria-valuetext': PropTypes.string, + defaultValue: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + ]), + disabled: PropTypes.bool.isRequired, + disableSwap: PropTypes.bool, + dragging: PropTypes.bool.isRequired, + focusedThumbIndex: PropTypes.number.isRequired, + getAriaLabel: PropTypes.func, + getAriaValueText: PropTypes.func, + isRtl: PropTypes.bool.isRequired, + marked: PropTypes.bool.isRequired, + marks: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.number.isRequired, + }), + ), + PropTypes.bool, + ]), + max: PropTypes.number.isRequired, + min: PropTypes.number.isRequired, + name: PropTypes.string, + onChange: PropTypes.func, + onChangeCommitted: PropTypes.func, + orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, + rootRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + current: function (props, propName) { + if (props[propName] == null) { + return null; + } else if ( + typeof props[propName] !== 'object' || + props[propName].nodeType !== 1 + ) { + return new Error( + "Expected prop '" + propName + "' to be of type Element", + ); + } + }, + }), + ]), + scale: PropTypes.func.isRequired, + slotProps: PropTypes.shape({ + input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + valueLabel: PropTypes.oneOfType([PropTypes.any, PropTypes.func]), + }), + slots: PropTypes.shape({ + input: PropTypes.elementType, + mark: PropTypes.elementType, + markLabel: PropTypes.elementType, + rail: PropTypes.elementType, + root: PropTypes.elementType, + thumb: PropTypes.elementType, + track: PropTypes.elementType, + valueLabel: PropTypes.elementType, + }), + step: PropTypes.number, + tabIndex: PropTypes.number, + track: PropTypes.oneOf(['inverted', 'normal', false]).isRequired, + value: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + ]), + valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) + .isRequired, + }).isRequired, +}; + +export default function UnstyledSliderBasic() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( +
+ ({ + className: `h-1.5 w-full py-4 inline-block relative touch-none ${ + disabled + ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' + : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + }`, + }), + rail: { + className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + }, + track: { className: 'block absolute h-1 rounded-sm bg-current' }, + }} + slots={{ + thumb: Thumb, + }} + defaultValue={10} + /> + ({ + className: `h-1.5 w-full py-4 inline-block relative touch-none ${ + disabled + ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' + : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + }`, + }), + rail: { + className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + }, + track: { className: 'block absolute h-1 rounded-sm bg-current' }, + }} + slots={{ + thumb: Thumb, + }} + defaultValue={10} + disabled + /> +
+ ); +} diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx new file mode 100644 index 00000000000000..ec5e6db021f8c8 --- /dev/null +++ b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { useTheme } from '@mui/system'; +import Slider, { SliderThumbSlotProps } from '@mui/base/Slider'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +const Thumb = React.forwardRef(function Thumb( + props, + ref, +) { + const { ownerState, className, ...other } = props; + const focusVisible = props['data-index'] === ownerState.focusedThumbIndex; + const active = props['data-index'] === ownerState.activeThumbIndex; + return ( + + ); +}); + +export default function UnstyledSliderBasic() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( +
+ ({ + className: `h-1.5 w-full py-4 inline-block relative touch-none ${ + disabled + ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' + : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + }`, + }), + rail: { + className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + }, + track: { className: 'block absolute h-1 rounded-sm bg-current' }, + }} + slots={{ + thumb: Thumb, + }} + defaultValue={10} + /> + ({ + className: `h-1.5 w-full py-4 inline-block relative touch-none ${ + disabled + ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' + : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + }`, + }), + rail: { + className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + }, + track: { className: 'block absolute h-1 rounded-sm bg-current' }, + }} + slots={{ + thumb: Thumb, + }} + defaultValue={10} + disabled + /> +
+ ); +} diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index 2250d764c87d4a..8bddf333fc8934 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -43,7 +43,7 @@ export default function MyApp() { The following demo shows how to create and style two basic sliders. Notice that both are set to a default value of 10 with the `defaultValue` prop, and the second slider cannot be adjusted due to the `disabled` prop: -{{"demo": "UnstyledSlider.js", "defaultCodeOpen": false}} +{{"demo": "UnstyledSliderBasic", "defaultCodeOpen": false}} ### Anatomy diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index bbafda154a4c66..9226737454ff40 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -12,6 +12,9 @@ module.exports = { boxShadow: { 'outline-purple': '0 0 0 3px #c084fc', }, + border: { + ['3']: '3px', + }, }, }, corePlugins: { diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx index 524ae6d2b4c2e1..f3a462d572595c 100644 --- a/packages/mui-base/src/Slider/Slider.tsx +++ b/packages/mui-base/src/Slider/Slider.tsx @@ -126,6 +126,7 @@ const Slider = React.forwardRef(function Slider 0 && marks.some((mark) => mark.label), dragging, focusedThumbIndex, + activeThumbIndex: active, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-base/src/Slider/Slider.types.ts b/packages/mui-base/src/Slider/Slider.types.ts index f97e2e4577a4c4..92e5cd2ed884f5 100644 --- a/packages/mui-base/src/Slider/Slider.types.ts +++ b/packages/mui-base/src/Slider/Slider.types.ts @@ -12,6 +12,7 @@ export type SliderOwnerState = Simplify< SliderOwnProps & { disabled: boolean; focusedThumbIndex: number; + activeThumbIndex: number; isRtl: boolean; max: number; min: number; From 9d28b39dd889db1852225d38b63715ed4aabff81 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 27 Jun 2023 10:57:59 +0200 Subject: [PATCH 2/6] lint --- .../UnstyledSliderBasic/tailwind/index.js | 81 +------------------ docs/scripts/formattedTSDemos.js | 2 +- docs/tailwind.config.js | 2 +- 3 files changed, 3 insertions(+), 82 deletions(-) diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js index 1a0a679005e395..52f0f2dbaf62c8 100644 --- a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js +++ b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js @@ -29,86 +29,7 @@ const Thumb = React.forwardRef(function Thumb(props, ref) { Thumb.propTypes = { className: PropTypes.string, - ownerState: PropTypes.shape({ - activeThumbIndex: PropTypes.number.isRequired, - 'aria-label': PropTypes.string, - 'aria-labelledby': PropTypes.string, - 'aria-valuetext': PropTypes.string, - defaultValue: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.number), - PropTypes.number, - ]), - disabled: PropTypes.bool.isRequired, - disableSwap: PropTypes.bool, - dragging: PropTypes.bool.isRequired, - focusedThumbIndex: PropTypes.number.isRequired, - getAriaLabel: PropTypes.func, - getAriaValueText: PropTypes.func, - isRtl: PropTypes.bool.isRequired, - marked: PropTypes.bool.isRequired, - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - max: PropTypes.number.isRequired, - min: PropTypes.number.isRequired, - name: PropTypes.string, - onChange: PropTypes.func, - onChangeCommitted: PropTypes.func, - orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - rootRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: function (props, propName) { - if (props[propName] == null) { - return null; - } else if ( - typeof props[propName] !== 'object' || - props[propName].nodeType !== 1 - ) { - return new Error( - "Expected prop '" + propName + "' to be of type Element", - ); - } - }, - }), - ]), - scale: PropTypes.func.isRequired, - slotProps: PropTypes.shape({ - input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - valueLabel: PropTypes.oneOfType([PropTypes.any, PropTypes.func]), - }), - slots: PropTypes.shape({ - input: PropTypes.elementType, - mark: PropTypes.elementType, - markLabel: PropTypes.elementType, - rail: PropTypes.elementType, - root: PropTypes.elementType, - thumb: PropTypes.elementType, - track: PropTypes.elementType, - valueLabel: PropTypes.elementType, - }), - step: PropTypes.number, - tabIndex: PropTypes.number, - track: PropTypes.oneOf(['inverted', 'normal', false]).isRequired, - value: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.number), - PropTypes.number, - ]), - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - .isRequired, - }).isRequired, + ownerState: PropTypes.object.isRequired, }; export default function UnstyledSliderBasic() { diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index eb1d5ef79267a6..86245e2f386a88 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -102,7 +102,7 @@ async function transpileFile(tsxPath, program) { const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, { shouldResolveObject: ({ name }) => { - if (name === 'classes') { + if (name === 'classes' || name === 'ownerState') { return false; } diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 9226737454ff40..202d32fff1f47b 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -13,7 +13,7 @@ module.exports = { 'outline-purple': '0 0 0 3px #c084fc', }, border: { - ['3']: '3px', + 3: '3px', }, }, }, From d68c0ede16517e429f3bd2f3f4580d8eb5b347d8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 27 Jun 2023 12:39:28 +0200 Subject: [PATCH 3/6] Fix type issue --- packages/mui-base/src/Slider/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx index f3a462d572595c..5a50bd586afa63 100644 --- a/packages/mui-base/src/Slider/Slider.tsx +++ b/packages/mui-base/src/Slider/Slider.tsx @@ -90,7 +90,7 @@ const Slider = React.forwardRef(function Slider = { + const partialOwnerState: Omit = { ...props, marks: marksProp, disabled, From 15819bc3fecb5f6107b42b2074fe8f4892059606 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 27 Jun 2023 13:20:56 +0200 Subject: [PATCH 4/6] prettier --- packages/mui-base/src/Slider/Slider.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx index 5a50bd586afa63..9219a9f9d484f6 100644 --- a/packages/mui-base/src/Slider/Slider.tsx +++ b/packages/mui-base/src/Slider/Slider.tsx @@ -90,7 +90,10 @@ const Slider = React.forwardRef(function Slider = { + const partialOwnerState: Omit< + SliderOwnerState, + 'focusedThumbIndex' | 'activeThumbIndex' | 'marked' | 'dragging' + > = { ...props, marks: marksProp, disabled, From f19fae87eaa6ac7e193c1ed49d7e99c9930d15a3 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 27 Jun 2023 16:31:12 -0300 Subject: [PATCH 5/6] Changed hex to rgba on boxShadow --- docs/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 202d32fff1f47b..46893e46d89c7c 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { theme: { extend: { boxShadow: { - 'outline-purple': '0 0 0 3px #c084fc', + 'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)', }, border: { 3: '3px', From 94107af6ad79a26f93878825b7ad6ccb5435953d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 3 Jul 2023 09:44:17 +0200 Subject: [PATCH 6/6] update tailwind CSS demo --- .../UnstyledSliderBasic/tailwind/index.js | 41 +++++-------------- .../UnstyledSliderBasic/tailwind/index.tsx | 40 +++++------------- .../components/tabs/UnstyledTabsRouting.js | 31 +------------- 3 files changed, 22 insertions(+), 90 deletions(-) diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js index 52f0f2dbaf62c8..8b6681e97e3b3d 100644 --- a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js +++ b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js @@ -1,6 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; import { useTheme } from '@mui/system'; import Slider from '@mui/base/Slider'; @@ -9,29 +7,6 @@ function useIsDarkMode() { return theme.palette.mode === 'dark'; } -const Thumb = React.forwardRef(function Thumb(props, ref) { - const { ownerState, className, ...other } = props; - const focusVisible = props['data-index'] === ownerState.focusedThumbIndex; - const active = props['data-index'] === ownerState.activeThumbIndex; - return ( - - ); -}); - -Thumb.propTypes = { - className: PropTypes.string, - ownerState: PropTypes.object.isRequired, -}; - export default function UnstyledSliderBasic() { // Replace this with your app logic for determining dark mode const isDarkMode = useIsDarkMode(); @@ -51,9 +26,11 @@ export default function UnstyledSliderBasic() { className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', }, track: { className: 'block absolute h-1 rounded-sm bg-current' }, - }} - slots={{ - thumb: Thumb, + thumb: (_, { active, focused }) => ({ + className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ + focused || active ? 'shadow-outline-purple' : '' + }`, + }), }} defaultValue={10} /> @@ -70,9 +47,11 @@ export default function UnstyledSliderBasic() { className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', }, track: { className: 'block absolute h-1 rounded-sm bg-current' }, - }} - slots={{ - thumb: Thumb, + thumb: (_, { active, focused }) => ({ + className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ + focused || active ? 'shadow-outline-purple' : '' + }`, + }), }} defaultValue={10} disabled diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx index ec5e6db021f8c8..8b6681e97e3b3d 100644 --- a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx +++ b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx @@ -1,34 +1,12 @@ import * as React from 'react'; -import clsx from 'clsx'; import { useTheme } from '@mui/system'; -import Slider, { SliderThumbSlotProps } from '@mui/base/Slider'; +import Slider from '@mui/base/Slider'; function useIsDarkMode() { const theme = useTheme(); return theme.palette.mode === 'dark'; } -const Thumb = React.forwardRef(function Thumb( - props, - ref, -) { - const { ownerState, className, ...other } = props; - const focusVisible = props['data-index'] === ownerState.focusedThumbIndex; - const active = props['data-index'] === ownerState.activeThumbIndex; - return ( - - ); -}); - export default function UnstyledSliderBasic() { // Replace this with your app logic for determining dark mode const isDarkMode = useIsDarkMode(); @@ -48,9 +26,11 @@ export default function UnstyledSliderBasic() { className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', }, track: { className: 'block absolute h-1 rounded-sm bg-current' }, - }} - slots={{ - thumb: Thumb, + thumb: (_, { active, focused }) => ({ + className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ + focused || active ? 'shadow-outline-purple' : '' + }`, + }), }} defaultValue={10} /> @@ -67,9 +47,11 @@ export default function UnstyledSliderBasic() { className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', }, track: { className: 'block absolute h-1 rounded-sm bg-current' }, - }} - slots={{ - thumb: Thumb, + thumb: (_, { active, focused }) => ({ + className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ + focused || active ? 'shadow-outline-purple' : '' + }`, + }), }} defaultValue={10} disabled diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.js b/docs/data/base/components/tabs/UnstyledTabsRouting.js index f194f133d922da..e3e4732e1549a3 100644 --- a/docs/data/base/components/tabs/UnstyledTabsRouting.js +++ b/docs/data/base/components/tabs/UnstyledTabsRouting.js @@ -125,36 +125,7 @@ const RouterLink = React.forwardRef(function RouterLink(props, ref) { }); RouterLink.propTypes = { - ownerState: PropTypes.shape({ - action: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: PropTypes.shape({ - focusVisible: PropTypes.func.isRequired, - }), - }), - ]), - active: PropTypes.bool.isRequired, - children: PropTypes.node, - className: PropTypes.string, - disabled: PropTypes.bool.isRequired, - focusableWhenDisabled: PropTypes.bool, - highlighted: PropTypes.bool.isRequired, - href: PropTypes.string, - onChange: PropTypes.func, - onFocusVisible: PropTypes.func, - selected: PropTypes.bool.isRequired, - slotProps: PropTypes.shape({ - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), - slots: PropTypes.shape({ - root: PropTypes.elementType, - }), - tabIndex: PropTypes.number, - to: PropTypes.string, - type: PropTypes.oneOf(['button', 'reset', 'submit']), - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - }).isRequired, + ownerState: PropTypes.object.isRequired, }; const StyledTab = styled(Tab)`