[docs][base] Add Tailwind CSS + plain CSS demo on the Slider page (#3…

…8413)
mui · Aug 15, 2023 · 832b8c4 · 832b8c4
1 parent 39d11b4
commit 832b8c4
Show file tree

Hide file tree

Showing 9 changed files with 472 additions and 1 deletion.
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/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 UnstyledSliderIntroduction() {
+  return (
+    <div style={{ width: 320 }}>
+      <Slider
+        slotProps={{
+          root: { className: 'CustomSlider' },
+          rail: { className: 'CustomSlider-rail' },
+          track: { className: 'CustomSlider-track' },
+          thumb: { className: 'CustomSlider-thumb' },
+        }}
+        defaultValue={50}
+      />
+      <Slider
+        slotProps={{
+          root: { className: 'CustomSlider' },
+          rail: { className: 'CustomSlider-rail' },
+          track: { className: 'CustomSlider-track' },
+          thumb: { className: 'CustomSlider-thumb' },
+        }}
+        defaultValue={10}
+        disabled
+      />
+      <Styles />
+    </div>
+  );
+}
+
+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 (
+    <style>{`
+    .CustomSlider {
+      color: ${isDarkMode ? cyan[300] : cyan[500]};
+      height: 6px;
+      width: 100%;
+      padding: 16px 0;
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      touch-action: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .CustomSlider:hover {
+      opacity: 1;
+    }
+
+    .CustomSlider.${sliderClasses.disabled} { 
+      pointer-events: none;
+      cursor: default;
+      color: ${isDarkMode ? grey[600] : grey[300]};
+      opacity: 0.5;
+    }
+
+    .CustomSlider-rail {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      border-radius: 2px;
+      background-color: currentColor;
+      opacity: 0.4;
+    }
+
+    .CustomSlider-track {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 2px;
+      background-color: currentColor;
+    }
+
+    .CustomSlider-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;
+    }
+
+    .CustomSlider-thumb:hover,&.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
+    }
+
+    .CustomSlider-thumb.${sliderClasses.active} {
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
+    }
+    `}</style>
+  );
+}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/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 UnstyledSliderIntroduction() {
+  return (
+    <div style={{ width: 320 }}>
+      <Slider
+        slotProps={{
+          root: { className: 'CustomSlider' },
+          rail: { className: 'CustomSlider-rail' },
+          track: { className: 'CustomSlider-track' },
+          thumb: { className: 'CustomSlider-thumb' },
+        }}
+        defaultValue={50}
+      />
+      <Slider
+        slotProps={{
+          root: { className: 'CustomSlider' },
+          rail: { className: 'CustomSlider-rail' },
+          track: { className: 'CustomSlider-track' },
+          thumb: { className: 'CustomSlider-thumb' },
+        }}
+        defaultValue={10}
+        disabled
+      />
+      <Styles />
+    </div>
+  );
+}
+
+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 (
+    <style>{`
+    .CustomSlider {
+      color: ${isDarkMode ? cyan[300] : cyan[500]};
+      height: 6px;
+      width: 100%;
+      padding: 16px 0;
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      touch-action: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .CustomSlider:hover {
+      opacity: 1;
+    }
+
+    .CustomSlider.${sliderClasses.disabled} { 
+      pointer-events: none;
+      cursor: default;
+      color: ${isDarkMode ? grey[600] : grey[300]};
+      opacity: 0.5;
+    }
+
+    .CustomSlider-rail {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      border-radius: 2px;
+      background-color: currentColor;
+      opacity: 0.4;
+    }
+
+    .CustomSlider-track {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 2px;
+      background-color: currentColor;
+    }
+
+    .CustomSlider-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;
+    }
+
+    .CustomSlider-thumb:hover,&.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
+    }
+
+    .CustomSlider-thumb.${sliderClasses.active} {
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
+    }
+    `}</style>
+  );
+}
diff --git a/...ents/slider/UnstyledSliderIntroduction.js → ...nstyledSliderIntroduction/system/index.js b/...ents/slider/UnstyledSliderIntroduction.js → ...nstyledSliderIntroduction/system/index.js
diff --git a/...nts/slider/UnstyledSliderIntroduction.tsx → ...styledSliderIntroduction/system/index.tsx b/...nts/slider/UnstyledSliderIntroduction.tsx → ...styledSliderIntroduction/system/index.tsx
diff --git a/...er/UnstyledSliderIntroduction.tsx.preview → ...iderIntroduction/system/index.tsx.preview b/...er/UnstyledSliderIntroduction.tsx.preview → ...iderIntroduction/system/index.tsx.preview
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/system';
+import { Slider } from '@mui/base/Slider';
+import clsx from 'clsx';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ width: 320 }}>
+      <CustomSlider defaultValue={50} />
+      <CustomSlider defaultValue={10} disabled />
+    </div>
+  );
+}
+
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+
+const CustomSlider = React.forwardRef((props, ref) => {
+  return (
+    <Slider
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `h-1.5 w-full py-4 inline-block relative touch-none ${
+                ownerState.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'
+              }`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        rail: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.rail,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              'block absolute w-full h-1 rounded-sm bg-current opacity-40',
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        track: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.track,
+            ownerState,
+          );
+
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              'block absolute h-1 rounded-sm bg-current',
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        thumb: (ownerState, { active, focused }) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.thumb,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            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 ${
+                focused || active ? 'shadow-outline-purple' : ''
+              }`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});
+
+CustomSlider.propTypes = {
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  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]),
+  }),
+};