feat: [Modal] support btnVariant

Author: akai

src/components/Modal/Base.tsx

@@ -21,6 +21,7 @@ export type ModalProps = {
   overflow?: boolean;
   actions?: ButtonProps[];
   vertical?: boolean;
+  btnVariant?: ButtonProps['variant'];
   bgColor?: string;
   onClose?: () => void;
   onBackdropClick?: () => void;
@@ -45,6 +46,7 @@ export const Base: React.FC<ModalProps> = (props) => {
     overflow,
     actions,
     vertical = true,
+    btnVariant,
     bgColor,
     children,
     onBackdropClick,
@@ -121,15 +123,12 @@ export const Base: React.FC<ModalProps> = (props) => {
           </div>
           <div className={clsx(`${baseClass}-body`, { overflow })}>{children}</div>
           {actions && (
-            <div className={`${baseClass}-footer ${baseClass}-footer--${vertical ? 'v' : 'h'}`}>
+            <div
+              className={`${baseClass}-footer ${baseClass}-footer--${vertical ? 'v' : 'h'}`}
+              data-variant={btnVariant || 'round'}
+            >
               {actions.map((item) => (
-                <Button
-                  size="lg"
-                  block={isPopup}
-                  variant={!isPopup && vertical ? 'outline' : undefined}
-                  {...item}
-                  key={item.label}
-                />
+                <Button size="lg" block={isPopup} variant={btnVariant} {...item} key={item.label} />
               ))}
             </div>
           )}

src/components/Modal/Confirm.tsx

@@ -3,5 +3,11 @@ import clsx from 'clsx';
 import { Base, ModalProps } from './Base';
 
 export const Confirm: React.FC<ModalProps> = ({ className, ...other }) => (
-  <Base baseClass="Modal" className={clsx('Confirm', className)} showClose={false} {...other} />
+  <Base
+    baseClass="Modal"
+    className={clsx('Confirm', className)}
+    showClose={false}
+    btnVariant="outline"
+    {...other}
+  />
 );

src/components/Modal/Modal.tsx

@@ -1,4 +1,10 @@
 import React from 'react';
 import { Base, ModalProps } from './Base';
 
-export const Modal: React.FC<ModalProps> = (props) => <Base baseClass="Modal" {...props} />;
+export const Modal: React.FC<ModalProps> = (props) => (
+  <Base
+    baseClass="Modal"
+    btnVariant={props.vertical === false ? undefined : 'outline'}
+    {...props}
+  />
+);

src/components/Modal/style.less

@@ -25,6 +25,7 @@
 .Modal-dialog {
   position: relative;
   z-index: @zindex-modal;
+  overflow: hidden;
   width: @modal-width;
   border-radius: @modal-border-radius;
   background: @modal-bg;
@@ -55,38 +56,40 @@
 
 .Modal-footer {
   display: flex;
+
+  .Btn--outline {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-width: 1px 0 0;
+    border-color: var(--gray-6);
+    border-radius: 0;
+
+    &:not(.Btn--primary) {
+      color: var(--gray-2);
+    }
+  }
 }
 
 .Modal-footer--h {
-  padding: 0 15px 18px;
+  &[data-variant='round'] {
+    padding: 0 15px 18px;
 
+    .Btn + .Btn {
+      margin-left: @modal-btn-x-spacing;
+    }
+  }
+  &[data-variant='outline'] {
+    .Btn + .Btn {
+      border-left-width: 1px;
+    }
+  }
   .Btn {
     flex: 1;
   }
-  .Btn + .Btn {
-    margin-left: @modal-btn-x-spacing;
-  }
 }
 
 .Modal-footer--v {
   flex-direction: column;
-
-  .Btn {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border: 0;
-    border-top: @modal-btn-y-border-width solid @modal-btn-y-border-color;
-    border-radius: 0;
-    background: @modal-btn-y-bg;
-    color: @modal-btn-y-color;
-
-    &:last-child {
-      border-radius: 0 0 @modal-border-radius @modal-border-radius;
-    }
-  }
-  .Btn--primary {
-    color: @modal-btn-y-primary-color;
-  }
 }
 
 // Confirm