style: [Popconfirm] style optimize for close button in Popconfirm (#1520)

* style: [Popconfirm] style optimize for close button in Popconfirm

* style: [Popconfirm] style optimize fo close button in Popconfirm

cypress/integration/popconfirm.spec.js

@@ -32,7 +32,7 @@ describe('popConfirm', () => {
         cy.visit('http://localhost:6006/iframe.html?id=popconfirm--keyboard-and-focus&args=&viewMode=story');
         cy.get('[data-cy=initial-focus-content]').click();
         cy.get('.semi-popconfirm-body input').eq(0).should('be.focused');
-        cy.get('.semi-popconfirm-header .semi-popconfirm-btn-close').eq(0).click();
+        cy.get('.semi-popconfirm-header .semi-button').eq(0).click();
         cy.get('[data-cy=initial-focus-content] .semi-button').should('be.focused');
     });
 

packages/semi-foundation/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,6 +40,7 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
@@ -84,11 +76,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

packages/semi-foundation/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

packages/semi-foundation/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font