fix(Modal): fix confirm icon style when using third-party icons

ant-design · Apr 16, 2024 · 0278c79 · 0278c79
1 parent 717272d
commit 0278c79
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -142,7 +142,7 @@ export function ConfirmContent(
           [`${bodyCls}-has-title`]: hasTitle,
         })}
       >
-        {mergedIcon}
+        <div className={`${confirmPrefixCls}-icon`}>{mergedIcon}</div>
         <div className={`${confirmPrefixCls}-paragraph`}>
           {hasTitle && <span className={`${confirmPrefixCls}-title`}>{props.title}</span>}
           <div className={`${confirmPrefixCls}-content`}>{props.content}</div>

diff --git a/components/modal/style/confirm.ts b/components/modal/style/confirm.ts
@@ -44,7 +44,8 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
         flexWrap: 'nowrap',
         alignItems: 'start',
 
-        [`> ${token.iconCls}`]: {
+        [`> ${confirmComponentCls}-icon`]: {
+          display: 'flex',
           flex: 'none',
           fontSize: modalConfirmIconSize,
           marginInlineEnd: token.confirmIconMarginInlineEnd,
@@ -53,7 +54,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
             .div(2)
             .equal(),
         },
-        [`&-has-title > ${token.iconCls}`]: {
+        [`&-has-title > ${confirmComponentCls}-icon`]: {
           marginTop: token
             .calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal())
             .div(2)
@@ -69,7 +70,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
       },
 
       // https://github.com/ant-design/ant-design/issues/48159
-      [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
+      [`${confirmComponentCls}-icon + ${confirmComponentCls}-paragraph`]: {
         maxWidth: `calc(100% - ${unit(
           token.calc(token.modalConfirmIconSize).add(token.marginSM).equal(),
         )})`,
@@ -100,20 +101,21 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
       },
     },
 
-    [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
+    [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
       color: token.colorError,
     },
 
-    [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
-        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
-      color: token.colorWarning,
-    },
+    [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${confirmComponentCls}-icon,
+        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]:
+      {
+        color: token.colorWarning,
+      },
 
-    [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
+    [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
       color: token.colorInfo,
     },
 
-    [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
+    [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${confirmComponentCls}-icon`]: {
       color: token.colorSuccess,
     },
   };