fix: Fix the problem that the height setting in modal does not take e… (#2901)

* fix: Fix the problem that the height setting in modal does not take effect, affected versions 2.82.0-2.82.1

* fix: Fix the problem that the height setting in modal does not take effect, affected versions 2.82.0-2.82.1

cypress/e2e/modal.spec.js

@@ -64,4 +64,22 @@ describe('modal', () => {
             });
         });
     });
+
+    it('set height', () => {
+        cy.visit("http://localhost:6006/iframe.html?id=modal--set-height&viewMode=story");
+        cy.get(".semi-button").click();
+        cy.get('.semi-modal-content').then($content => {
+            const contentHeight = $content[0].getBoundingClientRect().height;
+            expect(contentHeight).to.be.equal(300);
+        });
+    });
+
+    it('set height in style', () => {
+        cy.visit("http://localhost:6006/iframe.html?id=modal--set-height-in-style&viewMode=story");
+        cy.get(".semi-button").click();
+        cy.get('.semi-modal-content').then($content => {
+            const contentHeight = $content[0].getBoundingClientRect().height;
+            expect(contentHeight).to.be.equal(300);
+        });
+    });
 });

packages/semi-foundation/modal/modal.scss

@@ -77,6 +77,10 @@ $module: #{$prefix}-modal;
         display: flex;
     }
 
+    &-content-height-set {
+        height: 100%;
+    }
+
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;

packages/semi-ui/modal/ModalContent.tsx

@@ -279,7 +279,10 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             onAnimationEnd={props.onAnimationEnd}
             className={cls([`${cssClasses.DIALOG}-content`,
                 props.contentClassName,
-                { [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen }])}>
+                {
+                    [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen,
+                    [`${cssClasses.DIALOG}-content-height-set`]: props.height || get(props.style, 'height')
+                }])}>
             {header}
             {body}
             {footer}

packages/semi-ui/modal/_story/modal.stories.jsx

@@ -385,3 +385,43 @@ export const FullScreen = () => {
         </div>
     );
 }
+
+export const SetHeight = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+      <div>
+          <Button onClick={() => setVisible(true)}>Open Modal</Button>
+          <Modal
+              title="高度设置的Modal"
+              visible={visible}
+              height={300}
+              // motion 为 false 是为了保证 e2e 取高度值的时候，拿到的不是动画中的值
+              motion={false}
+              onCancel={() => setVisible(false)}
+          >
+              <p>This is the content of a basic sidesheet.</p>
+              <p>Here is more content...</p>
+          </Modal>
+      </div>
+  );
+}
+
+export const SetHeightInStyle = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+      <div>
+          <Button onClick={() => setVisible(true)}>Open Modal</Button>
+          <Modal
+              title="style中设置高度的Modal"
+              visible={visible}
+              style={{ height: 300 }}
+              // motion 为 false 是为了保证 e2e 取高度值的时候，拿到的不是动画中的值
+              motion={false}
+              onCancel={() => setVisible(false)}
+          >
+              <p>This is the content of a basic sidesheet.</p>
+              <p>Here is more content...</p>
+          </Modal>
+      </div>
+  );
+}