feat: apply new input component border style (#45009)

* feat: apply new input component border style

* feat: ColorPicker & DatePicker

* chore: fix lint

components/color-picker/style/index.ts

@@ -20,9 +20,9 @@ export interface ColorPickerToken extends FullToken<'ColorPicker'> {
   colorPickerPresetColorSize: number;
 }
 
-export const genActiveStyle = (token: ColorPickerToken) => ({
+export const genActiveStyle = (token: ColorPickerToken, borderColor: string) => ({
-  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
   borderInlineEndWidth: token.lineWidth,
+  borderColor,
   outline: 0,
 });
 
@@ -78,40 +78,24 @@ const genClearStyle = (
 };
 
 const genStatusStyle = (token: ColorPickerToken): CSSObject => {
-  const {
+  const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover } = token;
-    componentCls,
-    colorError,
-    colorWarning,
-    colorErrorBorderHover,
-    colorWarningBorderHover,
-    colorErrorOutline,
-    colorWarningOutline,
-  } = token;
   return {
     [`&${componentCls}-status-error`]: {
       borderColor: colorError,
       '&:hover': {
-        borderColor: colorErrorBorderHover,
+        borderColor: colorErrorHover,
       },
       [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(
+        ...genActiveStyle(token, colorError),
-          mergeToken<ColorPickerToken>(token, {
-            controlOutline: colorErrorOutline,
-          }),
-        ),
       },
     },
     [`&${componentCls}-status-warning`]: {
       borderColor: colorWarning,
       '&:hover': {
-        borderColor: colorWarningBorderHover,
+        borderColor: colorWarningHover,
       },
       [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(
+        ...genActiveStyle(token, colorWarning),
-          mergeToken<ColorPickerToken>(token, {
-            controlOutline: colorWarningOutline,
-          }),
-        ),
       },
     },
   };
@@ -178,6 +162,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
     colorBorder,
     paddingXXS,
     fontSize,
+    colorPrimaryHover,
   } = token;
 
   return [
@@ -221,12 +206,11 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
             fontSize,
             color: colorText,
           },
-          '&-active': {
-            ...genActiveStyle(token),
-            borderColor: colorPrimary,
-          },
           '&:hover': {
-            borderColor: colorPrimary,
+            borderColor: colorPrimaryHover,
+          },
+          [`&${componentCls}-trigger-active`]: {
+            ...genActiveStyle(token, colorPrimary),
           },
           '&-disabled': {
             color: colorTextDisabled,

components/date-picker/style/index.ts

@@ -996,14 +996,18 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
     errorActiveShadow,
     colorWarning,
     warningActiveShadow,
+    colorErrorHover,
+    colorWarningHover,
   } = token;
 
   return {
-    [`${componentCls}:not(${componentCls}-disabled)`]: {
+    [`${componentCls}:not(${componentCls}-disabled):not([disabled])`]: {
       [`&${componentCls}-status-error`]: {
-        '&, &:not([disabled]):hover': {
+        backgroundColor: colorBgContainer,
-          backgroundColor: colorBgContainer,
+        borderColor: colorError,
-          borderColor: colorError,
+
+        '&:hover': {
+          borderColor: colorErrorHover,
         },
 
         [`&${componentCls}-focused, &:focus`]: {
@@ -1021,9 +1025,11 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
       },
 
       [`&${componentCls}-status-warning`]: {
-        '&, &:not([disabled]):hover': {
+        backgroundColor: colorBgContainer,
-          backgroundColor: colorBgContainer,
+        borderColor: colorWarning,
-          borderColor: colorWarning,
+
+        '&:hover': {
+          borderColor: colorWarningHover,
         },
 
         [`&${componentCls}-focused, &:focus`]: {
@@ -1105,11 +1111,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         borderRadius,
         transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
 
-        '&:hover, &-focused': {
+        '&:hover': {
           ...genHoverStyle(token),
         },
 
-        '&-focused': {
+        [`&-focused${componentCls}`]: {
           ...genActiveStyle(token),
         },
 

components/input-number/style/index.ts

@@ -1,14 +1,12 @@
-import type { SharedInputToken, SharedComponentToken } from '../../input/style';
+import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import {
-  initComponentToken,
-  initInputToken,
-  genActiveStyle,
   genBasicInputStyle,
   genDisabledStyle,
-  genHoverStyle,
   genInputGroupStyle,
   genPlaceholderStyle,
   genStatusStyle,
+  initComponentToken,
+  initInputToken,
 } from '../../input/style';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
@@ -151,14 +149,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           },
         },
 
-        '&:hover': {
-          ...genHoverStyle(token),
-        },
-
-        '&-focused': {
-          ...genActiveStyle(token),
-        },
-
         // ===================== Out Of Range =====================
         '&-out-of-range': {
           [`${componentCls}-input-wrap`]: {
@@ -395,7 +385,6 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
       },
 
       [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
-        ...genHoverStyle(token),
         zIndex: 1,
       },
 

components/input/style/index.ts

@@ -121,7 +121,12 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
   opacity: 1,
 
   '&:hover': {
-    ...genHoverStyle(mergeToken<InputToken>(token, { hoverBorderColor: token.colorBorder })),
+    ...genHoverStyle(
+      mergeToken<InputToken>(token, {
+        hoverBorderColor: token.colorBorder,
+        hoverBg: token.colorBgContainerDisabled,
+      }),
+    ),
   },
 });
 
@@ -160,7 +165,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
         borderColor: colorErrorBorderHover,
       },
 
-      '&:focus, &-focused': {
+      '&:focus, &:focus-within': {
         ...genActiveStyle(
           mergeToken<InputToken>(token, {
             activeBorderColor: colorError,
@@ -180,7 +185,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
         borderColor: colorWarningBorderHover,
       },
 
-      '&:focus, &-focused': {
+      '&:focus, &:focus-within': {
         ...genActiveStyle(
           mergeToken<InputToken>(token, {
             activeBorderColor: colorWarning,
@@ -217,7 +222,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
     ...genHoverStyle(token),
   },
 
-  '&:focus, &-focused': {
+  '&:focus, &:focus-within': {
     ...genActiveStyle(token),
   },
 
@@ -647,7 +652,6 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       display: 'inline-flex',
 
       [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
-        ...genHoverStyle(token),
         zIndex: 1,
         [`${componentCls}-search-with-button &`]: {
           zIndex: 0,
@@ -1034,10 +1038,7 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
     controlPaddingHorizontal,
     colorFillAlter,
     colorPrimaryHover,
-    controlOutlineWidth,
+    colorPrimary,
-    controlOutline,
-    colorErrorOutline,
-    colorWarningOutline,
   } = token;
 
   return {
@@ -1055,11 +1056,11 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
     paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
     paddingInlineLG: controlPaddingHorizontal - lineWidth,
     addonBg: colorFillAlter,
-    activeBorderColor: colorPrimaryHover,
+    activeBorderColor: colorPrimary,
     hoverBorderColor: colorPrimaryHover,
-    activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
+    activeShadow: `none`,
-    errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
+    errorActiveShadow: `none`,
-    warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
+    warningActiveShadow: `none`,
     hoverBg: 'transparent',
     activeBg: 'transparent',
   };

components/select/style/index.tsx

@@ -160,17 +160,16 @@ const genStatusStyle = (
     componentCls: string;
     antCls: string;
     borderHoverColor: string;
-    outlineColor: string;
+    borderActiveColor: string;
-    controlOutlineWidth: number;
   },
   overwriteDefaultBorder: boolean = false,
 ): CSSObject => {
-  const { componentCls, borderHoverColor, outlineColor, antCls } = token;
+  const { componentCls, borderHoverColor, antCls, borderActiveColor } = token;
 
   const overwriteStyle: CSSObject = overwriteDefaultBorder
     ? {
         [`${componentCls}-selector`]: {
-          borderColor: borderHoverColor,
+          borderColor: borderActiveColor,
         },
       }
     : {};
@@ -181,15 +180,14 @@ const genStatusStyle = (
         {
           ...overwriteStyle,
 
-          [`${componentCls}-focused& ${componentCls}-selector`]: {
-            borderColor: borderHoverColor,
-            boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
-            outline: 0,
-          },
-
           [`&:hover ${componentCls}-selector`]: {
             borderColor: borderHoverColor,
           },
+
+          [`${componentCls}-focused& ${componentCls}-selector`]: {
+            borderColor: borderActiveColor,
+            outline: 0,
+          },
         },
     },
   };
@@ -398,14 +396,14 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       componentCls,
       mergeToken<any>(token, {
         borderHoverColor: token.colorPrimaryHover,
-        outlineColor: token.controlOutline,
+        borderActiveColor: token.colorPrimary,
       }),
     ),
     genStatusStyle(
       `${componentCls}-status-error`,
       mergeToken<any>(token, {
         borderHoverColor: token.colorErrorHover,
-        outlineColor: token.colorErrorOutline,
+        borderActiveColor: token.colorError,
       }),
       true,
     ),
@@ -413,7 +411,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       `${componentCls}-status-warning`,
       mergeToken<any>(token, {
         borderHoverColor: token.colorWarningHover,
-        outlineColor: token.colorWarningOutline,
+        borderActiveColor: token.colorWarning,
       }),
       true,
     ),