Remove useSliderContext from demos

mui · Sep 27, 2024 · 6f8e65f · 6f8e65f
1 parent 6ba2983
commit 6f8e65f
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 130 deletions.
diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
@@ -16,14 +16,21 @@ export default function RtlSlider() {
         direction="rtl"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-rtl:"
+          className={classes.label}
+        >
           Volume (RTL)
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-rtl:"
+            />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -32,17 +39,13 @@ export default function RtlSlider() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 

diff --git a/docs/data/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
@@ -15,30 +15,32 @@ export default function RtlSlider() {
         direction="rtl"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-rtl:"
+          className={classes.label}
+        >
           Volume (RTL)
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-rtl:"
+            />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
     </div>
   );
 }
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 function useIsDarkMode() {

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -18,14 +18,18 @@ export default function UnstyledSliderIntroduction() {
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} inputId=":slider-thumb-input:" />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -34,17 +38,13 @@ export default function UnstyledSliderIntroduction() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -17,30 +17,29 @@ export default function UnstyledSliderIntroduction() {
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} inputId=":slider-thumb-input:" />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
     </div>
   );
 }
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 function useIsDarkMode() {

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -13,12 +13,14 @@ export default function UnstyledSliderIntroduction() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
             <SliderIndicator />
-            <SliderThumb />
+            <SliderThumb inputId=":slider-thumb-input:" />
           </SliderTrack>
         </SliderControl>
       </Slider>
@@ -27,17 +29,13 @@ export default function UnstyledSliderIntroduction() {
 }
 
 function BaseLabel(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 BaseLabel.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -12,28 +12,25 @@ export default function UnstyledSliderIntroduction() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
             <SliderIndicator />
-            <SliderThumb />
+            <SliderThumb inputId=":slider-thumb-input:" />
           </SliderTrack>
         </SliderControl>
       </Slider>
     </Box>
   );
 }
 
-function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+function BaseLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 const grey = {

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
@@ -1,10 +1,12 @@
 <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-  <Label id="VolumeSliderLabel">Volume</Label>
+  <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+    Volume
+  </Label>
   <SliderOutput />
   <SliderControl>
     <SliderTrack>
       <SliderIndicator />
-      <SliderThumb />
+      <SliderThumb inputId=":slider-thumb-input:" />
     </SliderTrack>
   </SliderControl>
 </Slider>
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -23,7 +23,9 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
@@ -184,21 +186,12 @@ SliderIndicator.propTypes = {
 };
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label
-      id={id}
-      htmlFor={htmlFor}
-      className={classNames('font-bold', disabled && 'text-gray-500')}
-      {...otherProps}
-    />
-  );
+  return <label id={id} htmlFor={htmlFor} className="font-bold" {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -22,7 +22,9 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
@@ -158,18 +160,8 @@ const SliderIndicator = React.forwardRef(function SliderIndicator(
   );
 });
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label
-      id={id}
-      htmlFor={htmlFor}
-      className={classNames('font-bold', disabled && 'text-gray-500')}
-      {...otherProps}
-    />
-  );
+  return <label id={id} htmlFor={htmlFor} className="font-bold" {...otherProps} />;
 }
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
@@ -1,5 +1,7 @@
 <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-  <Label id="VolumeSliderLabel">Volume</Label>
+  <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+    Volume
+  </Label>
   <SliderOutput />
   <SliderControl>
     <SliderTrack>

diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
@@ -16,13 +16,20 @@ export default function VerticalSlider() {
         aria-labelledby="VolumeSliderLabel"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-vertical:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-vertical:"
+            />
           </Slider.Track>
         </Slider.Control>
         <Slider.Output className={classes.output} />
@@ -32,17 +39,13 @@ export default function VerticalSlider() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };