style: unify Modal and Drawer close icon style

ant-design · Mar 16, 2024 · ae722da · ae722da
1 parent e0b57c5
commit ae722da
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
@@ -20,13 +20,18 @@ export interface ComponentToken {
    * @descEN Horizontal padding of footer
    */
   footerPaddingInline: number;
+  /** @internal */
+  closeBtnHoverBg: string;
+  /** @internal */
+  closeBtnActiveBg: string;
 }
 
 export interface DrawerToken extends FullToken<'Drawer'> {}
 
 // =============================== Base ===============================
 const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
   const {
+    borderRadiusSM,
     componentCls,
     zIndexPopup,
     colorBgMask,
@@ -40,9 +45,12 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
     lineWidth,
     lineType,
     colorSplit,
-    marginSM,
+    marginXXS,
     colorIcon,
     colorIconHover,
+    closeBtnHoverBg,
+    closeBtnActiveBg,
+    controlHeight,
     colorText,
     fontWeightStrong,
     footerPaddingBlock,
@@ -167,8 +175,12 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
       },
 
       [`${componentCls}-close`]: {
-        display: 'inline-block',
-        marginInlineEnd: marginSM,
+        display: 'inline-flex',
+        width: controlHeight,
+        height: controlHeight,
+        borderRadius: borderRadiusSM,
+        justifyContent: 'center',
+        marginInlineEnd: marginXXS,
         color: colorIcon,
         fontWeight: fontWeightStrong,
         fontSize: fontSizeLG,
@@ -181,9 +193,17 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         border: 0,
         outline: 0,
         cursor: 'pointer',
-        transition: `color ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}`,
         textRendering: 'auto',
 
+        '&:hover': {
+          backgroundColor: closeBtnHoverBg,
+        },
+
+        '&:active': {
+          backgroundColor: closeBtnActiveBg,
+        },
+
         '&:focus, &:hover': {
           color: colorIconHover,
           textDecoration: 'none',
@@ -227,6 +247,8 @@ export const prepareComponentToken: GetDefaultToken<'Drawer'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase,
   footerPaddingBlock: token.paddingXS,
   footerPaddingInline: token.padding,
+  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
+  closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover,
 });
 
 // ============================== Export ==============================

diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts
@@ -78,8 +78,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,7 +248,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           },
 
           '&:hover': {
-            color: token.modalIconHoverColor,
+            color: token.modalCloseIconHoverColor,
             backgroundColor: token.closeBtnHoverBg,
             textDecoration: 'none',
           },
@@ -348,9 +348,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(),
   });