style: add focus style

ant-design · Mar 16, 2024 · b0d6781 · b0d6781
1 parent c7e9c80
commit b0d6781
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
@@ -1,5 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 
+import { genFocusStyle } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
@@ -188,23 +189,21 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         textDecoration: 'none',
         background: 'transparent',
         border: 0,
-        outline: 0,
         cursor: 'pointer',
         transition: `all ${motionDurationMid}`,
         textRendering: 'auto',
 
         '&:hover': {
+          color: colorIconHover,
           backgroundColor: colorBgTextHover,
+          textDecoration: 'none',
         },
 
         '&:active': {
           backgroundColor: colorBgTextActive,
         },
 
-        '&:focus, &:hover': {
-          color: colorIconHover,
-          textDecoration: 'none',
-        },
+        ...genFocusStyle(token),
       },
 
       [`${componentCls}-title`]: {

diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
@@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
@@ -151,6 +151,12 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
         color: token.colorIconHover,
         backgroundColor: token.colorBgTextHover,
       },
+
+      '&:active': {
+        backgroundColor: token.colorBgTextHover,
+      },
+
+      ...genFocusStyle(token),
     },
 
     [`${noticeCls}-btn`]: {

diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts
@@ -1,6 +1,6 @@
 import { TinyColor } from '@ctrl/tinycolor';
 
-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { ArrowOffsetToken } from '../../style/placementArrow';
 import getArrowStyle, {
   getArrowOffsetToken,
@@ -129,6 +129,12 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
               color: token.colorIconHover,
               backgroundColor: token.colorBgTextHover,
             },
+
+            '&:active': {
+              backgroundColor: token.colorBgTextActive,
+            },
+
+            ...genFocusStyle(token),
           },
 
           [`${componentCls}-cover`]: {