fix(slider): ✏️ fix focus on Slider and stories

adaptui · Aug 20, 2020 · 841a63e · 841a63e
1 parent 3b6e4a4
commit 841a63e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/src/slider/SliderState.ts b/src/slider/SliderState.ts
@@ -111,7 +111,6 @@ export function useSliderState(props: UseSliderProps = {}) {
   } = props;
 
   const [isDragging, setDragging] = useBoolean();
-  const [isFocused, setFocused] = useBoolean();
 
   const [eventSource, setEventSource] = useState<EventSource>();
 
@@ -454,16 +453,12 @@ export function useSliderState(props: UseSliderProps = {}) {
     rootRef.current,
   );
 
-  const onFocus = useCallback(() => setFocused.on(), [setFocused]);
-  const onBlur = useCallback(() => setFocused.off(), [setFocused]);
-
   return {
     actions,
     state: {
       min,
       max,
       value,
-      isFocused,
       isDragging,
       isDisabled,
       isReadOnly,
@@ -476,8 +471,6 @@ export function useSliderState(props: UseSliderProps = {}) {
     },
     handlers: {
       onKeyDown,
-      onFocus,
-      onBlur,
     },
     styles: {
       rootStyle,

diff --git a/src/slider/SliderThumb.ts b/src/slider/SliderThumb.ts
@@ -65,8 +65,6 @@ export const useSliderThumb = createHook<useSliderThumbOptions, BoxHTMLProps>({
       "aria-disabled": ariaAttr(options.state.isDisabled),
       "aria-readonly": ariaAttr(options.state.isReadOnly),
       onKeyDown: callAllHandlers(htmlOnKeyDown, options.handlers.onKeyDown),
-      onFocus: callAllHandlers(htmlOnFocus, options.handlers.onFocus),
-      onBlur: callAllHandlers(htmlOnBlur, options.handlers.onBlur),
       style: { ...options.styles.thumbStyle, ...htmlStyle },
       ...htmlProps,
     };

diff --git a/src/slider/stories/Slider.stories.tsx b/src/slider/stories/Slider.stories.tsx
@@ -22,7 +22,7 @@ export default {
 } as Meta;
 
 export const Default = () => {
-  const slider = useSliderState({ isDisabled: true });
+  const slider = useSliderState();
 
   return (
     <Slider {...slider} style={sliderHorizontalStyle}>
@@ -35,7 +35,12 @@ export const Default = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -55,7 +60,12 @@ export const Reversed = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -75,7 +85,12 @@ export const Min20Max80 = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -95,7 +110,12 @@ export const Step10 = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -115,7 +135,12 @@ export const DefaultValue90 = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -135,7 +160,12 @@ export const Disabled = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -155,7 +185,12 @@ export const ReadOnly = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderHorizontalThumbStyle}
+        style={{
+          ...sliderHorizontalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateY(-50%) scale(1.15)"
+            : sliderHorizontalThumbStyle.transform,
+        }}
       />
     </Slider>
   );
@@ -172,7 +207,12 @@ export const Vertical = () => {
       <SliderThumb
         {...slider}
         aria-label="slider-thumb"
-        style={sliderVerticalThumbStyle}
+        style={{
+          ...sliderVerticalThumbStyle,
+          transform: slider.state.isDragging
+            ? "translateX(-50%) scale(1.15)"
+            : sliderVerticalThumbStyle.transform,
+        }}
       />
     </Slider>
   );

diff --git a/src/slider/stories/styles.ts b/src/slider/stories/styles.ts
@@ -25,7 +25,6 @@ export const sliderThumbStyle: CSSProperties = {
     "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
   width: "14px",
   height: "14px",
-  outline: "0px",
   borderRadius: "9999px",
   background: "rgb(255, 255, 255)",
   borderWidth: "1px",