WIP track component

mui · Jun 17, 2024 · 02f5897 · 02f5897
1 parent 746be06
commit 02f5897
Show file tree

Hide file tree

Showing 21 changed files with 385 additions and 114 deletions.
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
@@ -1,8 +1,8 @@
 ---
 productId: base-ui
 title: React Slider components
-components: Slider, SliderRoot, SliderOutput, SliderControl, SliderIndicator, SliderThumb
-hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderIndicator, useSliderThumb
+components: Slider, SliderRoot, SliderOutput, SliderControl, SliderTrack, SliderThumb, SliderIndicator
+hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderThumb, useSliderIndicator
 githubLabel: 'component: slider'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 packageName: '@base_ui/react'

diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
@@ -99,6 +99,10 @@ module.exports = [
     pathname: '/base-ui/react-slider/components-api/#slider-thumb',
     title: 'SliderThumb',
   },
+  {
+    pathname: '/base-ui/react-slider/components-api/#slider-track',
+    title: 'SliderTrack',
+  },
   {
     pathname: '/base-ui/react-snackbar/components-api/#snackbar',
     title: 'Snackbar',

diff --git a/docs/pages/base-ui/api/slider-track.json b/docs/pages/base-ui/api/slider-track.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SliderTrack",
+  "imports": [
+    "import * as Slider from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SliderTrack",
+  "forwardsRefTo": "HTMLSpanElement",
+  "filename": "/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/\">Slider</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/use-slider-track.json b/docs/pages/base-ui/api/use-slider-track.json
@@ -0,0 +1,20 @@
+{
+  "parameters": {
+    "rootRef": {
+      "type": { "name": "React.Ref&lt;Element&gt;", "description": "React.Ref&lt;Element&gt;" }
+    }
+  },
+  "returnValue": {
+    "getRootProps": {
+      "type": {
+        "name": "(externalProps?: React.ComponentPropsWithRef&lt;&#39;span&#39;&gt;) =&gt; React.ComponentPropsWithRef&lt;&#39;span&#39;&gt;",
+        "description": "(externalProps?: React.ComponentPropsWithRef&lt;&#39;span&#39;&gt;) =&gt; React.ComponentPropsWithRef&lt;&#39;span&#39;&gt;"
+      },
+      "required": true
+    }
+  },
+  "name": "useSliderTrack",
+  "filename": "/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts",
+  "imports": ["import { useSliderTrack } from '@base_ui/react/Slider';"],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js
@@ -9,6 +9,7 @@ import SliderIndicatorApiJsonPageContent from '../../api/slider-indicator.json';
 import SliderOutputApiJsonPageContent from '../../api/slider-output.json';
 import SliderRootApiJsonPageContent from '../../api/slider-root.json';
 import SliderThumbApiJsonPageContent from '../../api/slider-thumb.json';
+import SliderTrackApiJsonPageContent from '../../api/slider-track.json';
 import useSliderApiJsonPageContent from '../../api/use-slider.json';
 import useSliderControlApiJsonPageContent from '../../api/use-slider-control.json';
 import useSliderIndicatorApiJsonPageContent from '../../api/use-slider-indicator.json';
@@ -75,6 +76,13 @@ export const getStaticProps = () => {
   );
   const SliderThumbApiDescriptions = mapApiPageTranslations(SliderThumbApiReq);
 
+  const SliderTrackApiReq = require.context(
+    'docs-base/translations/api-docs/slider-track',
+    false,
+    /\.\/slider-track.*.json$/,
+  );
+  const SliderTrackApiDescriptions = mapApiPageTranslations(SliderTrackApiReq);
+
   const useSliderApiReq = require.context(
     'docs-base/translations/api-docs/use-slider',
     false,
@@ -126,6 +134,7 @@ export const getStaticProps = () => {
         SliderOutput: SliderOutputApiDescriptions,
         SliderRoot: SliderRootApiDescriptions,
         SliderThumb: SliderThumbApiDescriptions,
+        SliderTrack: SliderTrackApiDescriptions,
       },
       componentsApiPageContents: {
         Slider: SliderApiJsonPageContent,
@@ -134,6 +143,7 @@ export const getStaticProps = () => {
         SliderOutput: SliderOutputApiJsonPageContent,
         SliderRoot: SliderRootApiJsonPageContent,
         SliderThumb: SliderThumbApiJsonPageContent,
+        SliderTrack: SliderTrackApiJsonPageContent,
       },
       hooksApiDescriptions: {
         useSlider: useSliderApiDescriptions,

diff --git a/docs/pages/experiments/slider-change-committed-lag.tsx b/docs/pages/experiments/slider-change-committed-lag.tsx
@@ -23,8 +23,10 @@ export default function App() {
       >
         <Slider.Output className="MySlider-output" />
         <Slider.Control className="MySlider-control">
-          <Slider.Indicator className="MySlider-indicator" />
-          <Slider.Thumb className="MySlider-thumb one" />
+          <Slider.Track className="MySlider-track">
+            <Slider.Indicator className="MySlider-indicator" />
+            <Slider.Thumb className="MySlider-thumb one" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 

diff --git a/docs/pages/experiments/slider-label.tsx b/docs/pages/experiments/slider-label.tsx
@@ -37,8 +37,10 @@ export default function App() {
         </Label>
         <Slider.Output className="MySlider-output" />
         <Slider.Control className="MySlider-control">
-          <Slider.Indicator className="MySlider-indicator" />
-          <Slider.Thumb className="MySlider-thumb one" />
+          <Slider.Track className="MySlider-track">
+            <Slider.Indicator className="MySlider-indicator" />
+            <Slider.Thumb className="MySlider-thumb one" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 
@@ -48,9 +50,11 @@ export default function App() {
         </LabelRange>
         <Slider.Output className="MySlider-output" />
         <Slider.Control className="MySlider-control">
-          <Slider.Indicator className="MySlider-indicator" />
-          <Slider.Thumb className="MySlider-thumb one" />
-          <Slider.Thumb className="MySlider-thumb two" />
+          <Slider.Track className="MySlider-track">
+            <Slider.Indicator className="MySlider-indicator" />
+            <Slider.Thumb className="MySlider-thumb one" />
+            <Slider.Thumb className="MySlider-thumb two" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
       <Styles />

diff --git a/docs/pages/experiments/slider-rtl.tsx b/docs/pages/experiments/slider-rtl.tsx
@@ -8,8 +8,10 @@ export default function App() {
       <Slider.Root className="MySlider" defaultValue={50} direction="rtl">
         <Slider.Output className="MySlider-output" />
         <Slider.Control className="MySlider-control">
-          <Slider.Indicator className="MySlider-indicator" />
-          <Slider.Thumb className="MySlider-thumb one" />
+          <Slider.Track className="MySlider-track">
+            <Slider.Indicator className="MySlider-indicator" />
+            <Slider.Thumb className="MySlider-thumb one" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 
@@ -21,17 +23,21 @@ export default function App() {
       >
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Control className="VerticalSlider-control">
-          <Slider.Indicator className="VerticalSlider-indicator" />
-          <Slider.Thumb className="VerticalSlider-thumb one" />
+          <Slider.Track className="VerticalSlider-track">
+            <Slider.Indicator className="VerticalSlider-indicator" />
+            <Slider.Thumb className="VerticalSlider-thumb one" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 
       <Slider.Root className="MySlider" defaultValue={[50, 70]} direction="rtl">
         <Slider.Output className="MySlider-output" />
         <Slider.Control className="MySlider-control">
-          <Slider.Indicator className="MySlider-indicator" />
-          <Slider.Thumb className="MySlider-thumb one" />
-          <Slider.Thumb className="MySlider-thumb two" />
+          <Slider.Track className="MySlider-track">
+            <Slider.Indicator className="MySlider-indicator" />
+            <Slider.Thumb className="MySlider-thumb one" />
+            <Slider.Thumb className="MySlider-thumb two" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 
@@ -43,9 +49,11 @@ export default function App() {
       >
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Control className="VerticalSlider-control">
-          <Slider.Indicator className="VerticalSlider-indicator" />
-          <Slider.Thumb className="VerticalSlider-thumb one" />
-          <Slider.Thumb className="VerticalSlider-thumb two" />
+          <Slider.Track className="VerticalSlider-track">
+            <Slider.Indicator className="VerticalSlider-indicator" />
+            <Slider.Thumb className="VerticalSlider-thumb one" />
+            <Slider.Thumb className="VerticalSlider-thumb two" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
       <Styles />

diff --git a/docs/pages/experiments/slider-track-padding.tsx b/docs/pages/experiments/slider-track-padding.tsx
diff --git a/docs/pages/experiments/slider-vertical.tsx b/docs/pages/experiments/slider-vertical.tsx
@@ -8,17 +8,21 @@ export default function App() {
       <Slider.Root className="VerticalSlider" defaultValue={50} orientation="vertical">
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Control className="VerticalSlider-control">
-          <Slider.Indicator className="VerticalSlider-indicator" />
-          <Slider.Thumb className="VerticalSlider-thumb" />
+          <Slider.Track className="VerticalSlider-track">
+            <Slider.Indicator className="VerticalSlider-indicator" />
+            <Slider.Thumb className="VerticalSlider-thumb" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
 
       <Slider.Root className="VerticalSlider" defaultValue={[40, 60]} orientation="vertical">
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Control className="VerticalSlider-control">
-          <Slider.Indicator className="VerticalSlider-indicator" />
-          <Slider.Thumb className="VerticalSlider-thumb" />
-          <Slider.Thumb className="VerticalSlider-thumb" />
+          <Slider.Track className="VerticalSlider-track">
+            <Slider.Indicator className="VerticalSlider-indicator" />
+            <Slider.Thumb className="VerticalSlider-thumb" />
+            <Slider.Thumb className="VerticalSlider-thumb" />
+          </Slider.Track>
         </Slider.Control>
       </Slider.Root>
       <Styles />