Slider improvements

.yarn/versions/68ce2791.yml

@@ -0,0 +1,35 @@
+releases:
+  "@interop-ui/popper": prerelease
+  "@interop-ui/react-accessible-icon": prerelease
+  "@interop-ui/react-accordion": prerelease
+  "@interop-ui/react-alert-dialog": prerelease
+  "@interop-ui/react-announce": prerelease
+  "@interop-ui/react-arrow": prerelease
+  "@interop-ui/react-aspect-ratio": prerelease
+  "@interop-ui/react-avatar": prerelease
+  "@interop-ui/react-checkbox": prerelease
+  "@interop-ui/react-collapsible": prerelease
+  "@interop-ui/react-collection": prerelease
+  "@interop-ui/react-debug-context": prerelease
+  "@interop-ui/react-dialog": prerelease
+  "@interop-ui/react-dismissable-layer": prerelease
+  "@interop-ui/react-focus-scope": prerelease
+  "@interop-ui/react-label": prerelease
+  "@interop-ui/react-popover": prerelease
+  "@interop-ui/react-popper": prerelease
+  "@interop-ui/react-portal": prerelease
+  "@interop-ui/react-progress-bar": prerelease
+  "@interop-ui/react-radio-group": prerelease
+  "@interop-ui/react-separator": prerelease
+  "@interop-ui/react-slider": prerelease
+  "@interop-ui/react-switch": prerelease
+  "@interop-ui/react-tabs": prerelease
+  "@interop-ui/react-toggle-button": prerelease
+  "@interop-ui/react-tooltip": prerelease
+  "@interop-ui/react-use-size": prerelease
+  "@interop-ui/react-utils": prerelease
+  "@interop-ui/react-visually-hidden": prerelease
+
+declined:
+  - interop-ui
+  - "@interop-ui/docs"

packages/react/slider/src/Slider.stories.tsx

@@ -1,51 +1,151 @@
 import * as React from 'react';
-import { Slider as SliderPrimitive, styles } from './Slider';
+import { Slider, styles } from './Slider';
 
 export default { title: 'Slider' };
 
 export const Basic = () => (
-  <Slider>
-    <SliderTrack>
-      <SliderRange />
-    </SliderTrack>
-    <SliderThumb />
+  <Slider defaultValue={10} style={styles.root}>
+    <Slider.Track style={styles.track}>
+      <Slider.Range style={styles.range} />
+    </Slider.Track>
+    <Slider.Thumb style={styles.thumb} />
   </Slider>
 );
 
-export const InlineStyle = () => (
-  <Slider>
-    <SliderTrack
-      style={{
-        height: 4,
-        background: 'gainsboro',
-        borderRadius: 4,
-      }}
-    >
-      <SliderRange style={{ background: 'black' }} />
-    </SliderTrack>
-    <SliderThumb
-      style={{
-        borderRadius: 15,
-        width: 15,
-        height: 15,
-        background: 'black',
-      }}
-    />
-  </Slider>
-);
+export const Horizontal = () => {
+  const [isFocusRange, setIsFocusRange] = React.useState([false, false]);
+  const [isFocusSingle, setIsFocusSingle] = React.useState(false);
 
-const Slider = (props: React.ComponentProps<typeof SliderPrimitive>) => (
-  <SliderPrimitive {...props} style={{ ...styles.root, ...props.style }} />
-);
+  return (
+    <>
+      <Slider as={Root} defaultValue={[10, 30]} style={{ height: 15 }}>
+        <Slider.Track as={Track} style={{ height: 4 }}>
+          <Slider.Range as={Range} style={{ height: '100%' }} />
+        </Slider.Track>
+        <Slider.Thumb
+          as={Thumb}
+          style={{ top: '50%' }}
+          focused={isFocusRange[0]}
+          onFocus={() => setIsFocusRange([true, false])}
+          onBlur={() => setIsFocusRange([false, false])}
+        />
+        <Slider.Thumb
+          as={Thumb}
+          style={{ top: '50%' }}
+          focused={isFocusRange[1]}
+          onFocus={() => setIsFocusRange([false, true])}
+          onBlur={() => setIsFocusRange([false, false])}
+        />
+      </Slider>
 
-const SliderRange = (props: React.ComponentProps<typeof SliderPrimitive.Range>) => (
-  <SliderPrimitive.Range {...props} style={{ ...styles.range, ...props.style }} />
-);
+      <br />
 
-const SliderTrack = (props: React.ComponentProps<typeof SliderPrimitive.Track>) => (
-  <SliderPrimitive.Track {...props} style={{ ...styles.track, ...props.style }} />
-);
+      <Slider as={Root} defaultValue={10} style={{ height: 15 }}>
+        <Slider.Track as={Track} style={{ height: 4 }}>
+          <Slider.Range as={Range} style={{ height: '100%' }} />
+        </Slider.Track>
+        <Slider.Thumb
+          as={Thumb}
+          style={{ top: '50%' }}
+          focused={isFocusSingle}
+          onFocus={() => setIsFocusSingle(true)}
+          onBlur={() => setIsFocusSingle(false)}
+        />
+      </Slider>
+    </>
+  );
+};
 
-const SliderThumb = (props: React.ComponentProps<typeof SliderPrimitive.Thumb>) => (
-  <SliderPrimitive.Thumb {...props} style={{ ...styles.thumb, ...props.style }} />
-);
+export const Vertical = () => {
+  const [isFocusRange, setIsFocusRange] = React.useState([false, false]);
+  const [isFocusSingle, setIsFocusSingle] = React.useState(false);
+
+  return (
+    <>
+      <Slider
+        as={Root}
+        defaultValue={[10, 30]}
+        orientation="vertical"
+        style={{ width: 15, flexDirection: 'column' }}
+      >
+        <Slider.Track as={Track} style={{ height: '300px', width: 4 }}>
+          <Slider.Range as={Range} style={{ width: '100%' }} />
+        </Slider.Track>
+        <Slider.Thumb
+          as={Thumb}
+          style={{ left: '50%' }}
+          focused={isFocusRange[0]}
+          onFocus={() => setIsFocusRange([true, false])}
+          onBlur={() => setIsFocusRange([false, false])}
+        />
+        <Slider.Thumb
+          as={Thumb}
+          style={{ left: '50%' }}
+          focused={isFocusRange[1]}
+          onFocus={() => setIsFocusRange([false, true])}
+          onBlur={() => setIsFocusRange([false, false])}
+        />
+      </Slider>
+
+      <br />
+
+      <Slider
+        as={Root}
+        defaultValue={10}
+        orientation="vertical"
+        style={{ width: 15, flexDirection: 'column' }}
+      >
+        <Slider.Track as={Track} style={{ height: '300px', width: 4 }}>
+          <Slider.Range as={Range} style={{ width: '100%' }} />
+        </Slider.Track>
+        <Slider.Thumb
+          as={Thumb}
+          style={{ left: '50%' }}
+          focused={isFocusSingle}
+          onFocus={() => setIsFocusSingle(true)}
+          onBlur={() => setIsFocusSingle(false)}
+        />
+      </Slider>
+    </>
+  );
+};
+
+const Root = React.forwardRef((props: any, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    style={{ ...styles.root, ...props.style, display: 'flex', alignItems: 'center' }}
+  />
+));
+
+const Track = React.forwardRef((props: any, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    style={{ ...styles.track, ...props.style, background: 'gainsboro', borderRadius: 4 }}
+  />
+));
+
+const Range = React.forwardRef((props: any, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    style={{ ...styles.range, ...props.style, background: 'black', borderRadius: 'inherit' }}
+  />
+));
+
+const Thumb = React.forwardRef(({ focused, ...props }: any, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    style={{
+      ...styles.thumb,
+      ...props.style,
+      borderRadius: 15,
+      width: 15,
+      height: 15,
+      background: 'black',
+      outline: focused ? `2px solid red` : undefined,
+    }}
+  />
+));