update tailwind CSS demo

mui · Jul 3, 2023 · 94107af · 94107af
1 parent d8616f8
commit 94107af
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 90 deletions.
diff --git 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 (
-    <span
-      ref={ref}
-      className={clsx(
-        `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 ${
-          focusVisible || active ? 'shadow-outline-purple' : ''
-        }`,
-        className,
-      )}
-      {...other}
-    />
-  );
-});
-
-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
@@ -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<HTMLSpanElement, SliderThumbSlotProps>(function Thumb(
-  props,
-  ref,
-) {
-  const { ownerState, className, ...other } = props;
-  const focusVisible = props['data-index'] === ownerState.focusedThumbIndex;
-  const active = props['data-index'] === ownerState.activeThumbIndex;
-  return (
-    <span
-      ref={ref}
-      className={clsx(
-        `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 ${
-          focusVisible || active ? 'shadow-outline-purple' : ''
-        }`,
-        className,
-      )}
-      {...other}
-    />
-  );
-});
-
 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
@@ -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)`