feat:modal

packages/semi-foundation/modal/modal.scss

@@ -73,6 +73,10 @@ $module: #{$prefix}-modal;
         box-shadow: $shadow-modal_content;
     }
 
+    &-footerfill{
+        display: flex;
+    }
+
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;

packages/semi-foundation/modal/modalFoundation.ts

@@ -54,7 +54,8 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
-    preventScroll?: boolean
+    preventScroll?: boolean;
+    footerFill?: boolean
 }
 
 export interface ModalState {

packages/semi-ui/modal/Modal.tsx

@@ -82,6 +82,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         lazyRender: PropTypes.bool,
         direction: PropTypes.oneOf(strings.directions),
         fullScreen: PropTypes.bool,
+        footerFill: PropTypes.bool,
     };
 
 
@@ -267,6 +268,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             confirmLoading,
             cancelLoading,
             hasCancel,
+            footerFill,
         } = this.props;
         const getCancelButton = (locale: Locale['Modal']) => {
             if (!hasCancel) {
@@ -278,6 +280,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                         onClick={this.handleCancel}
                         loading={cancelLoading === undefined ? this.state.onCancelReturnPromiseStatus === "pending" : cancelLoading}
                         type="tertiary"
+                        block={footerFill}
                         autoFocus={true}
                         {...this.props.cancelButtonProps}
                         x-semi-children-alias="cancelText"
@@ -291,12 +294,15 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         return (
             <LocaleConsumer componentName="Modal">
                 {(locale: Locale['Modal'], localeCode: Locale['code']) => (
-                    <div>
+                    <div className={cls({
+                        [`${cssClasses.DIALOG}-footerfill`]: footerFill
+                    })}>
                         {getCancelButton(locale)}
                         <Button
                             aria-label="confirm"
                             type={okType}
                             theme="solid"
+                            block={footerFill}
                             loading={confirmLoading === undefined ? this.state.onOKReturnPromiseStatus === "pending" : confirmLoading}
                             onClick={this.handleOk}
                             {...this.props.okButtonProps}

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

@@ -340,4 +340,4 @@ export const UseModalAfterClose = () => {
       </ConfigProvider>
   );
 };
-UseModalAfterClose.storyName = "useModal afterClose";
+UseModalAfterClose.storyName = "useModal afterClose";