From 832b8c40753c74f73162669e15896f2e1431ac31 Mon Sep 17 00:00:00 2001
From: Ali Sasani <alisasanibab@gmail.com>
Date: Tue, 15 Aug 2023 12:36:26 +0100
Subject: [PATCH] [docs][base] Add Tailwind CSS + plain CSS demo on the Slider
 page (#38413)

---
 .../UnstyledSliderIntroduction/css/index.js   | 131 ++++++++++++++++++
 .../UnstyledSliderIntroduction/css/index.tsx  | 131 ++++++++++++++++++
 .../system/index.js}                          |   0
 .../system/index.tsx}                         |   0
 .../system/index.tsx.preview}                 |   0
 .../tailwind/index.js                         | 112 +++++++++++++++
 .../tailwind/index.tsx                        |  95 +++++++++++++
 .../tailwind/index.tsx.preview                |   2 +
 docs/data/base/components/slider/slider.md    |   2 +-
 9 files changed, 472 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
 create mode 100644 docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
 rename docs/data/base/components/slider/{UnstyledSliderIntroduction.js => UnstyledSliderIntroduction/system/index.js} (100%)
 rename docs/data/base/components/slider/{UnstyledSliderIntroduction.tsx => UnstyledSliderIntroduction/system/index.tsx} (100%)
 rename docs/data/base/components/slider/{UnstyledSliderIntroduction.tsx.preview => UnstyledSliderIntroduction/system/index.tsx.preview} (100%)
 create mode 100644 docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
 create mode 100644 docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
 create mode 100644 docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview

diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
new file mode 100644
index 00000000000000..1590eddd47e088
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..1590eddd47e088
--- /dev/null
+++ 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/docs/data/base/components/slider/UnstyledSliderIntroduction.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
similarity index 100%
rename from docs/data/base/components/slider/UnstyledSliderIntroduction.js
rename to docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
similarity index 100%
rename from docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
rename to docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/slider/UnstyledSliderIntroduction.tsx.preview
rename to docs/data/base/components/slider/UnstyledSliderIntroduction/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
new file mode 100644
index 00000000000000..67e91b513c0339
--- /dev/null
+++ 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]),
+  }),
+};
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
new file mode 100644
index 00000000000000..c0860e55e7600f
--- /dev/null
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Slider, SliderProps } 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: any, args: any) =>
+  typeof fn === 'function' ? fn(args) : fn;
+
+const CustomSlider = React.forwardRef<HTMLSpanElement, SliderProps>((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,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..d1eb2628eafe30
--- /dev/null
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,2 @@
+<CustomSlider defaultValue={50} />
+<CustomSlider defaultValue={10} disabled />
\ No newline at end of file
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index 1e2f05ce78da47..b86400e0b92cba 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -22,7 +22,7 @@ The Slider component lets users make selections from a range of values along a h
 
 Sliders are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters such as gradients or saturation.
 
-{{"demo": "UnstyledSliderIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+{{"demo": "UnstyledSliderIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Component