fix: Fix the problem that the height of modal does not cover the screen when fullScreen is set, since 2.82.0 (#2881)

cypress/e2e/modal.spec.js

@@ -51,4 +51,17 @@ describe('modal', () => {
         // cy.get('button[aria-label=close]').tab({ shift: true });
         // cy.contains('确定').should('be.focused');
     });
+
+    it('Full screen', () => {
+        cy.visit("http://localhost:6006/iframe.html?id=modal--full-screen&viewMode=story");
+        // 测试 classname 为 .semi-modal-content-fullScreen 的高度和 classname 为 .semi-modal-mask 高度一致
+        cy.get(".semi-button").click();
+        cy.get('.semi-modal-content-fullScreen').then($content => {
+            const contentHeight = $content[0].getBoundingClientRect().height;
+            cy.get('.semi-modal-mask').then($mask => {
+                const maskHeight = $mask[0].getBoundingClientRect().height;
+                expect(contentHeight).to.be.equal(maskHeight); 
+            });
+        });
+    });
 });

packages/semi-foundation/modal/modal.scss

@@ -80,6 +80,7 @@ $module: #{$prefix}-modal;
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        height: 100%;
         top: $spacing-modal_content_fullscreen-top;
     }
 

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

@@ -362,7 +362,26 @@ export const DraggableModal = () => {
     );
 };
 
-
 DraggableModal.story = {
     name: 'draggable modal',
 };
+
+export const FullScreen = () => {
+   const [visible, setVisible] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setVisible(true)}>Open Modal</Button>
+            <Modal
+                title="可拖拽Modal"
+                visible={visible}
+                fullScreen
+                // 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>
+    );
+}