fix: fix centered modal blur text on some 1080p monitor (#1046)

* fix: fix centered modal blur text on some 1080p monitor

* chore:change test

Co-authored-by: pointhalo <[email protected]>

packages/semi-foundation/modal/modal.scss

@@ -42,6 +42,10 @@ $module: #{$prefix}-modal;
         z-index: $z-modal;
         -webkit-overflow-scrolling: touch;
         outline: 0;
+        &-center{
+            display: flex;
+            align-items: center;
+        }
     }
     
     &-title {

packages/semi-ui/modal/Modal.tsx

@@ -347,12 +347,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         let style = styleFromProps;
         const maskStyle = maskStyleFromProps;
         const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
-        if (this.props.centered) {
-            style = {
-                transform: 'translateY(-50%)',
-                top: '50%', ...style,
-            };
-        }
         let wrapperStyle: {
             zIndex?: CSSProperties['zIndex'];
             position?: CSSProperties['position'];

packages/semi-ui/modal/ModalContent.tsx

@@ -318,7 +318,10 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                 <div
                     role="none"
                     tabIndex={-1}
-                    className={`${cssClasses.DIALOG}-wrap`}
+                    className={cls({
+                        [`${cssClasses.DIALOG}-wrap`]:true,
+                        [`${cssClasses.DIALOG}-wrap-center`]:this.props.centered
+                    })}
                     onClick={maskClosable ? this.onMaskClick : null}
                     onMouseUp={maskClosable ? this.onMaskMouseUp : null}
                 >

packages/semi-ui/modal/__test__/modal.test.js

@@ -287,7 +287,7 @@ describe('modal', () => {
     it('centered without motion', () => {
         let com = getModal({ centered: true, visible: true, motion: false });
         let modal = mount(com, { attachTo: document.getElementById('container') });
-        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal`)).toHaveStyle({ transform: 'translateY(-50%)', top: '50%' });
+        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal-wrap`)).toHaveClassName(`${BASE_CLASS_PREFIX}-modal-wrap-center`)
     });
 
     it('keepDOM', () => {

packages/semi-ui/modal/_story/__snapshots__/modal.stories.tsx.snap

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`模态框-点击遮罩层不可关闭 1`] = `
+<DialogComponent
+  maskClosable={false}
+>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={false}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;
+
+exports[`模态框默认 1`] = `
+<DialogComponent>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={true}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;