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

* feat: apply new input component border style * feat: ColorPicker & DatePicker * chore: fix lint
2025-06-07 01:13:58 +08:00 · 2023-09-22 13:55:54 +08:00 · 2023-09-22 13:55:54 +08:00 · 431e00b1d0
commit 431e00b1d0
parent 081b33d7b8
5 changed files with 55 additions and 77 deletions
--- a/components/color-picker/style/index.ts
+++ b/components/color-picker/style/index.ts
@ -20,9 +20,9 @@ export interface ColorPickerToken extends FullToken<'ColorPicker'> {
  colorPickerPresetColorSize: number;
 }

-export const genActiveStyle = (token: ColorPickerToken) => ({
-  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
+export const genActiveStyle = (token: ColorPickerToken, borderColor: string) => ({
  borderInlineEndWidth: token.lineWidth,
+  borderColor,
  outline: 0,
 });

@ -78,40 +78,24 @@ const genClearStyle = (
 };

 const genStatusStyle = (token: ColorPickerToken): CSSObject => {
-  const {
-    componentCls,
-    colorError,
-    colorWarning,
-    colorErrorBorderHover,
-    colorWarningBorderHover,
-    colorErrorOutline,
-    colorWarningOutline,
-  } = token;
+  const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover } = token;
  return {
    [`&${componentCls}-status-error`]: {
      borderColor: colorError,
      '&:hover': {
-        borderColor: colorErrorBorderHover,
+        borderColor: colorErrorHover,
      },
      [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(
-          mergeToken<ColorPickerToken>(token, {
-            controlOutline: colorErrorOutline,
-          }),
-        ),
+        ...genActiveStyle(token, colorError),
      },
    },
    [`&${componentCls}-status-warning`]: {
      borderColor: colorWarning,
      '&:hover': {
-        borderColor: colorWarningBorderHover,
+        borderColor: colorWarningHover,
      },
      [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(
-          mergeToken<ColorPickerToken>(token, {
-            controlOutline: colorWarningOutline,
-          }),
-        ),
+        ...genActiveStyle(token, colorWarning),
      },
    },
  };
@ -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,
--- a/components/date-picker/style/index.ts
+++ b/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,
-          borderColor: colorError,
+        backgroundColor: colorBgContainer,
+        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,
-          borderColor: colorWarning,
+        backgroundColor: colorBgContainer,
+        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),
        },

--- a/components/input-number/style/index.ts
+++ b/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,
      },

--- a/components/input/style/index.ts
+++ b/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,
-    controlOutline,
-    colorErrorOutline,
-    colorWarningOutline,
+    colorPrimary,
  } = 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}`,
-    errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
-    warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
+    activeShadow: `none`,
+    errorActiveShadow: `none`,
+    warningActiveShadow: `none`,
    hoverBg: 'transparent',
    activeBg: 'transparent',
  };
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -160,17 +160,16 @@ const genStatusStyle = (
    componentCls: string;
    antCls: string;
    borderHoverColor: string;
-    outlineColor: string;
-    controlOutlineWidth: number;
+    borderActiveColor: string;
  },
  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,
    ),