fix: the style of form-item (#31)

formilyjs · Nov 21, 2023 · 1ed63ec · 1ed63ec
1 parent f4b8843
commit 1ed63ec
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/packages/components/src/form-item/style/other.tsx b/packages/components/src/form-item/style/other.tsx
@@ -21,7 +21,8 @@ export const genOtherStyle: GenerateStyle = (token) => {
     lineHeight,
     controlOutlineWidth,
     controlOutline,
-    colorPrimaryHover,
+    colorErrorOutline,
+    colorWarningOutline,
     colorTextSecondary,
     paddingXS,
   } = token
@@ -31,11 +32,14 @@ export const genOtherStyle: GenerateStyle = (token) => {
     borderInlineEndWidth: lineWidth,
   })
 
-  const active = (color = colorPrimary): CSSProperties => ({
+  const active = (
+    color = colorPrimary,
+    outlineColor = controlOutline
+  ): CSSProperties => ({
     borderColor: color,
     borderInlineEndWidth: lineWidth,
     outline: 0,
-    boxShadow: `${controlOutlineWidth} 0 ${controlOutline} ${colorPrimaryHover}`,
+    boxShadow: `0 0 0 ${controlOutlineWidth}px ${outlineColor}`,
   })
 
   const extraLabelHeight = controlHeightSM - 2
@@ -126,7 +130,7 @@ export const genOtherStyle: GenerateStyle = (token) => {
 
             [`&${antCls}-select-open ${antCls}-select-selector,
               &${antCls}-select-focused ${antCls}-select-selector`]: {
-              ...active(colorWarning),
+              ...active(colorWarning, colorWarningOutline),
             },
           },
 
@@ -137,7 +141,7 @@ export const genOtherStyle: GenerateStyle = (token) => {
 
           [`&-focused,
             &:focus`]: {
-            ...active(colorWarning),
+            ...active(colorWarning, colorWarningOutline),
           },
 
           '&:not([disabled]):hover': {
@@ -148,14 +152,14 @@ export const genOtherStyle: GenerateStyle = (token) => {
 
         [`${antCls}-cascader-picker:focus ${antCls}-cascader-input`]: {
           backgroundColor: colorWarningBg,
-          ...active(colorWarning),
+          ...active(colorWarning, colorWarningOutline),
         },
 
         [`${antCls}-input-affix-wrapper-focused,
           ${antCls}-input-affix-wrapper:focus,
           ${antCls}-input-focused,
           ${antCls}-input:focus`]: {
-          ...active(colorWarning),
+          ...active(colorWarning, colorWarningOutline),
         },
       },
 
@@ -189,7 +193,7 @@ export const genOtherStyle: GenerateStyle = (token) => {
 
             [`&${antCls}-select-open ${antCls}-select-selector,
                 &${antCls}-select-focused ${antCls}-select-selector`]: {
-              ...active(colorError),
+              ...active(colorError, colorErrorOutline),
             },
           },
 
@@ -199,7 +203,7 @@ export const genOtherStyle: GenerateStyle = (token) => {
 
           [`&-focused,
             &:focus`]: {
-            ...active(colorError),
+            ...active(colorError, colorErrorOutline),
           },
 
           [`&:not([disabled]):hover`]: {
@@ -208,14 +212,14 @@ export const genOtherStyle: GenerateStyle = (token) => {
         },
 
         [`${antCls}-cascader-picker:focus ${antCls}-cascader-input`]: {
-          ...active(colorError),
+          ...active(colorError, colorErrorOutline),
         },
 
         [`${antCls}-input-affix-wrapper-focused,
             ${antCls}-input-affix-wrapper:focus,
             ${antCls}-input-focused,
             ${antCls}-input:focus`]: {
-          ...active(colorError),
+          ...active(colorError, colorErrorOutline),
         },
       },