fix: disable button focus style in Space.Compact (ant-design#39157)

* fix: button hover style in Space.Compact * fix: button hover style in Space.Compact * style: disable button focus effect when in compact-item * chore: update comments * fix: improve key name * fix: remove focus style
rentj1 · Dec 7, 2022 · cccbab7 · cccbab7
1 parent 7641b2f
commit cccbab7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 30 deletions.
diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
@@ -50,7 +50,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         ...genFocusStyle(token),
       },
 
-      ...genCompactItemStyle(token, componentCls),
+      ...genCompactItemStyle(token, componentCls, { focus: false }),
       ...genCompactItemVerticalStyle(token, componentCls),
 
       // make `btn-icon-only` not too narrow
@@ -69,7 +69,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
             display: 'inline-block',
             width: token.lineWidth,
             height: `calc(100% + ${token.lineWidth * 2}px)`,
-            backgroundColor: token.colorPrimaryBorder,
+            backgroundColor: token.colorPrimaryHover,
             content: '""',
           },
         },
@@ -87,7 +87,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
               display: 'inline-block',
               width: `calc(100% + ${token.lineWidth * 2}px)`,
               height: token.lineWidth,
-              backgroundColor: token.colorPrimaryBorder,
+              backgroundColor: token.colorPrimaryHover,
               content: '""',
             },
           },

diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
@@ -974,7 +974,9 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
 
         // Space.Compact
-        ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
+        ...genCompactItemStyle(token, componentCls, {
+          focusElCls: `${componentCls}-focused`,
+        }),
 
         '&:hover, &-focused': {
           ...genHoverStyle(token),

diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
@@ -263,12 +263,10 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
           width: '100%',
         },
         // Space.Compact
-        ...genCompactItemStyle(
-          token,
-          componentCls,
-          `${componentCls}-selector`,
-          `${componentCls}-focused`,
-        ),
+        ...genCompactItemStyle(token, componentCls, {
+          borderElCls: `${componentCls}-selector`,
+          focusElCls: `${componentCls}-focused`,
+        }),
       },
     },
 

diff --git a/components/style/compact-item.tsx b/components/style/compact-item.tsx
@@ -2,26 +2,40 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { DerivativeToken } from '../theme/internal';
 
+interface CompactItemOptions {
+  focus?: boolean;
+  /**
+   * Some component borders are implemented on child elements
+   * like `Select`
+   */
+  borderElCls?: string;
+  /**
+   * Some components have special `focus` className especially with popovers
+   * like `Select` and `DatePicker`
+   */
+  focusElCls?: string;
+}
+
 // handle border collapse
-function compactItemBorder(
-  token: DerivativeToken,
-  borderedItemCls?: string,
-  popoverFocusedCls?: string,
-): CSSObject {
-  const childCombinator = borderedItemCls ? '> *' : '';
+function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject {
+  const childCombinator = options.borderElCls ? '> *' : '';
+  const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active']
+    .filter(Boolean)
+    .map((n) => `&:${n} ${childCombinator}`)
+    .join(',');
   return {
     '&-item:not(&-last-item)': {
       marginInlineEnd: -token.lineWidth,
     },
 
     '&-item': {
-      [`&:hover ${childCombinator}, &:focus ${childCombinator}, &:active ${childCombinator}`]: {
+      [hoverEffects]: {
         zIndex: 2,
       },
 
-      ...(popoverFocusedCls
+      ...(options.focusElCls
         ? {
-            [`&${popoverFocusedCls}`]: {
+            [`&${options.focusElCls}`]: {
               zIndex: 2,
             },
           }
@@ -35,8 +49,8 @@ function compactItemBorder(
 }
 
 // handle border-radius
-function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string): CSSObject {
-  const childCombinator = borderedElementCls ? `> ${borderedElementCls}` : '';
+function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject {
+  const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : '';
 
   return {
     [`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: {
@@ -64,18 +78,12 @@ function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string)
 export function genCompactItemStyle(
   token: DerivativeToken,
   prefixCls: string,
-  /** Some component borders are implemented on child elements like `Select` */
-  borderedElementCls?: string,
-  /**
-   * Some components have special `focus` className especially with popovers like `Select` and
-   * `DatePicker`
-   */
-  popoverFocusedCls?: string,
+  options: CompactItemOptions = { focus: true },
 ): CSSObject {
   return {
     '&-compact': {
-      ...compactItemBorder(token, borderedElementCls, popoverFocusedCls),
-      ...compactItemBorderRadius(prefixCls, borderedElementCls),
+      ...compactItemBorder(token, options),
+      ...compactItemBorderRadius(prefixCls, options),
     },
   };
 }