From f4588585591b79305d241e863885a993c2757dbd Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Mon, 14 Nov 2022 15:01:07 +0800
Subject: [PATCH] chore: remove `Slider` outline (#38489)

* chore: remove `Slider` outline

the `::before` pseudo-element here seems to make no sense and gives an incorrect border when setting the `:focus-visible` style.

* chore: optimize focus style

* chore: update hover style

* chore: accept suggested

Co-authored-by: MadCcc <1075746765@qq.com>

* chore: remove noused

Co-authored-by: MadCcc <1075746765@qq.com>
---
 components/slider/style/index.tsx | 76 +++++++++++++++----------------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 81242a1d7c..b2b71382c7 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -29,15 +29,8 @@ interface SliderToken extends FullToken<'Slider'> {
 
 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<SliderToken> = token => {
-  const {
-    componentCls,
-    controlSize,
-    dotSize,
-    marginFull,
-    marginPart,
-    colorFillContentHover,
-    antCls,
-  } = token;
+  const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } =
+    token;
 
   return {
     [componentCls]: {
@@ -68,10 +61,33 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         transition: `background-color ${token.motionDurationFast}`,
       },
 
+      '&:hover': {
+        [`${componentCls}-rail`]: {
+          backgroundColor: token.colorFillSecondary,
+        },
+
+        [`${componentCls}-track`]: {
+          backgroundColor: token.colorPrimaryBorderHover,
+        },
+
+        [`${componentCls}-dot`]: {
+          borderColor: colorFillContentHover,
+        },
+
+        [`${componentCls}-handle::after`]: {
+          boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorderHover}`,
+        },
+
+        [`${componentCls}-dot-active`]: {
+          borderColor: token.colorPrimary,
+        },
+      },
+
       [`${componentCls}-handle`]: {
         position: 'absolute',
         width: token.handleSize,
         height: token.handleSize,
+        outline: 'none',
 
         [`${componentCls}-dragging`]: {
           zIndex: 1,
@@ -81,8 +97,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         '&::before': {
           content: '""',
           position: 'absolute',
-          insetInlineStart: 0,
-          insetBlockStart: 0,
+          insetInlineStart: -token.handleLineWidth,
+          insetBlockStart: -token.handleLineWidth,
           width: token.handleSize + token.handleLineWidth * 2,
           height: token.handleSize + token.handleLineWidth * 2,
           backgroundColor: 'transparent',
@@ -108,10 +124,16 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
           `,
         },
 
-        '&:hover, &:active, &:focus-visible': {
+        '&:hover, &:active, &:focus': {
           '&::before': {
-            insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
-            insetBlockStart: (token.handleSize - token.handleSizeHover) / 2,
+            insetInlineStart: -(
+              (token.handleSizeHover - token.handleSize) / 2 +
+              token.handleLineWidthHover
+            ),
+            insetBlockStart: -(
+              (token.handleSizeHover - token.handleSize) / 2 +
+              token.handleLineWidthHover
+            ),
             width: token.handleSizeHover + token.handleLineWidthHover * 2,
             height: token.handleSizeHover + token.handleLineWidthHover * 2,
           },
@@ -126,32 +148,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         },
       },
 
-      '&:hover': {
-        [`${componentCls}-rail`]: {
-          backgroundColor: token.colorFillSecondary,
-        },
-
-        [`${componentCls}-track`]: {
-          backgroundColor: token.colorPrimaryBorderHover,
-        },
-
-        [`${componentCls}-dot`]: {
-          borderColor: colorFillContentHover,
-        },
-
-        [`${componentCls}-handle${antCls}-tooltip-open::after`]: {
-          boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
-        },
-
-        [`${componentCls}-handle::after`]: {
-          boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
-        },
-
-        [`${componentCls}-dot-active`]: {
-          borderColor: token.colorPrimary,
-        },
-      },
-
       [`${componentCls}-mark`]: {
         position: 'absolute',
         fontSize: token.fontSize,