enhance: (Modal) adjust padding of Modal with no action button

ant-design · Feb 28, 2022 · 67ed51e · 67ed51e · github-actions · Feb 28, 2022
1 parent b644cd4
commit 67ed51e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/src/components/modal/demos/demo1.tsx b/src/components/modal/demos/demo1.tsx
@@ -117,6 +117,20 @@ export default () => {
             异步操作执行失败
           </Button>
           <DemoDescription content='onAction、onConfirm、onCancel、onClick 这些事件函数都支持返回一个 Promise，通过这种方式，可以让按钮在执行异步操作的时候变为加载状态' />
+          <Button
+            block
+            onClick={() => {
+              Modal.show({
+                content: '点击遮罩关闭',
+                closeOnMaskClick: true,
+              })
+            }}
+          >
+            无操作按钮
+          </Button>
+          <DemoDescription>
+            当你不设置操作按钮时，可以把 Modal 当作一个普通的弹层来使用
+          </DemoDescription>
         </Space>
       </DemoBlock>
 

diff --git a/src/components/modal/modal.less b/src/components/modal/modal.less
@@ -82,6 +82,10 @@
 .adm-modal-footer {
   user-select: none;
   padding: 8px 12px 12px;
+  &-empty {
+    padding: 0;
+    height: 8px;
+  }
   &.adm-space {
     --gap-vertical: 20px;
   }

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -117,7 +117,14 @@ export const Modal: FC<ModalProps> = p => {
           props.content
         )}
       </div>
-      <Space direction='vertical' block className={cls('footer')}>
+      <Space
+        direction='vertical'
+        block
+        className={classNames(
+          cls('footer'),
+          props.actions.length === 0 && cls('footer-empty')
+        )}
+      >
         {props.actions.map((action, index) => {
           return (
             <ModalActionButton