style: unify Modal and Drawer close icon style (ant-design#47909)

* style: unify Modal and Drawer close icon style * style: fix Drawer close icon style * style: add focus style * style: unify close btn style * test: update snapshots * style: tweak drawer close icon size
DraculaPrince · Mar 29, 2024 · 672d748 · 672d748
1 parent 40e34e0
commit 672d748
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 131 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';
@@ -27,26 +28,31 @@ export interface DrawerToken extends FullToken<'Drawer'> {}
 // =============================== Base ===============================
 const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
   const {
+    borderRadiusSM,
     componentCls,
     zIndexPopup,
     colorBgMask,
     colorBgElevated,
     motionDurationSlow,
     motionDurationMid,
+    paddingXS,
     padding,
     paddingLG,
     fontSizeLG,
     lineHeightLG,
     lineWidth,
     lineType,
     colorSplit,
-    marginSM,
+    marginXS,
     colorIcon,
     colorIconHover,
+    colorBgTextHover,
+    colorBgTextActive,
     colorText,
     fontWeightStrong,
     footerPaddingBlock,
     footerPaddingInline,
+    calc,
   } = token;
 
   const wrapperCls = `${componentCls}-content-wrapper`;
@@ -167,8 +173,13 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
       },
 
       [`${componentCls}-close`]: {
-        display: 'inline-block',
-        marginInlineEnd: marginSM,
+        display: 'inline-flex',
+        width: calc(fontSizeLG).add(paddingXS).equal(),
+        height: calc(fontSizeLG).add(paddingXS).equal(),
+        borderRadius: borderRadiusSM,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginInlineEnd: marginXS,
         color: colorIcon,
         fontWeight: fontWeightStrong,
         fontSize: fontSizeLG,
@@ -179,15 +190,21 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         textDecoration: 'none',
         background: 'transparent',
         border: 0,
-        outline: 0,
         cursor: 'pointer',
-        transition: `color ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}`,
         textRendering: 'auto',
 
-        '&:focus, &:hover': {
+        '&:hover': {
           color: colorIconHover,
+          backgroundColor: colorBgTextHover,
           textDecoration: 'none',
         },
+
+        '&:active': {
+          backgroundColor: colorBgTextActive,
+        },
+
+        ...genFocusStyle(token),
       },
 
       [`${componentCls}-title`]: {

diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts
@@ -42,10 +42,6 @@ export interface ComponentToken {
    */
   footerBg: string;
 
-  /** @internal */
-  closeBtnHoverBg: string;
-  /** @internal */
-  closeBtnActiveBg: string;
   /** @internal */
   contentPadding: number | string;
   /** @internal */
@@ -78,8 +74,8 @@ export interface ModalToken extends FullToken<'Modal'> {
   modalFooterBorderColorSplit: string;
   modalFooterBorderStyle: string;
   modalFooterBorderWidth: number;
-  modalIconHoverColor: string;
   modalCloseIconColor: string;
+  modalCloseIconHoverColor: string;
   modalCloseBtnSize: number | string;
   modalConfirmIconSize: number | string;
   modalTitleHeight: number | string;
@@ -248,13 +244,13 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           },
 
           '&:hover': {
-            color: token.modalIconHoverColor,
-            backgroundColor: token.closeBtnHoverBg,
+            color: token.modalCloseIconHoverColor,
+            backgroundColor: token.colorBgTextHover,
             textDecoration: 'none',
           },
 
           '&:active': {
-            backgroundColor: token.closeBtnActiveBg,
+            backgroundColor: token.colorBgTextActive,
           },
 
           ...genFocusStyle(token),
@@ -348,9 +344,9 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalT
     modalFooterBorderColorSplit: token.colorSplit,
     modalFooterBorderStyle: token.lineType,
     modalFooterBorderWidth: token.lineWidth,
-    modalIconHoverColor: token.colorIconHover,
     modalCloseIconColor: token.colorIcon,
-    modalCloseBtnSize: token.fontHeight,
+    modalCloseIconHoverColor: token.colorIconHover,
+    modalCloseBtnSize: token.controlHeight,
     modalConfirmIconSize: token.fontHeight,
     modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal(),
   });
@@ -367,8 +363,6 @@ export const prepareComponentToken = (token: GlobalToken) => ({
   titleColor: token.colorTextHeading,
 
   // internal
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
-  closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover,
   contentPadding: token.wireframe
     ? 0
     : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,

diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
@@ -27,13 +27,7 @@ export function getCloseIcon(prefixCls: string, closeIcon?: React.ReactNode): Re
   if (closeIcon === null || closeIcon === false) {
     return null;
   }
-  return (
-    closeIcon || (
-      <span className={`${prefixCls}-close-x`}>
-        <CloseOutlined className={`${prefixCls}-close-icon`} />
-      </span>
-    )
-  );
+  return closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />;
 }
 
 export interface PureContentProps {

diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -510,28 +510,24 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
       tabindex="0"
     >
       <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
       >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
       </span>
     </a>
   </div>

diff --git a/components/notification/__tests__/__snapshots__/demo.test.ts.snap b/components/notification/__tests__/__snapshots__/demo.test.ts.snap
@@ -498,28 +498,24 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
       tabindex="0"
     >
       <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
       >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
       </span>
     </a>
   </div>

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';
@@ -21,8 +21,6 @@ export interface ComponentToken {
    * @descEN Width of Notification
    */
   width: number;
-  /** @internal */
-  closeBtnHoverBg: string;
 }
 
 export interface NotificationToken extends FullToken<'Notification'> {
@@ -80,11 +78,6 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
       wordWrap: 'break-word',
     },
 
-    [`${componentCls}-close-icon`]: {
-      fontSize,
-      cursor: 'pointer',
-    },
-
     [`${noticeCls}-message`]: {
       marginBottom: token.marginXS,
       color: colorTextHeading,
@@ -151,8 +144,14 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
 
       '&:hover': {
         color: token.colorIconHover,
-        backgroundColor: token.closeBtnHoverBg,
+        backgroundColor: token.colorBgTextHover,
       },
+
+      '&:active': {
+        backgroundColor: token.colorBgTextActive,
+      },
+
+      ...genFocusStyle(token),
     },
 
     [`${noticeCls}-btn`]: {
@@ -262,7 +261,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export const prepareComponentToken = (token: AliasToken) => ({
   zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
 });
 
 export const prepareNotificationToken: (