fix: [Button] remove xl size, add --link-color

alibaba · Mar 2, 2022 · 75f6b01 · 75f6b01
1 parent d5f4bb4
commit 75f6b01
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 22 deletions.
diff --git a/demo/src/demo/Button.tsx b/demo/src/demo/Button.tsx
@@ -36,15 +36,11 @@ export default () => (
         <Button color="primary" size="lg">
           大号按钮
         </Button>
-        <Button color="primary" size="xl">
-          特大号按钮
-        </Button>
       </div>
       <div>
         <Button size="sm">小号按钮</Button>
         <Button>普通按钮</Button>
         <Button size="lg">大号按钮</Button>
-        <Button size="xl">特大号按钮</Button>
       </div>
     </DemoSection>
     <DemoSection title="按钮变体">

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -7,7 +7,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   label?: string;
   color?: 'primary';
   variant?: 'text' | 'outline';
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'sm' | 'md' | 'lg';
   block?: boolean;
   icon?: string;
   loading?: boolean;
@@ -36,7 +36,7 @@ export const Button = (props: ButtonProps) => {
   } = props;
 
   const icon = oIcon || (loading && 'spinner');
-  const size = oSize || (block ? 'xl' : '');
+  const size = oSize || (block ? 'lg' : '');
 
   function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
     if (!disabled && !loading && onClick) {

diff --git a/src/components/Button/style.less b/src/components/Button/style.less
@@ -59,7 +59,7 @@
     padding: 0;
     border: 0;
     background: transparent;
-    color: var(--blue);
+    color: var(--link-color);
     vertical-align: initial;
 
     &:hover,
@@ -77,11 +77,6 @@
     border-radius: @btn-border-radius-lg;
     font-size: @btn-font-size-lg;
   }
-  &--xl {
-    padding: @btn-padding-xl;
-    border-radius: @btn-border-radius-xl;
-    font-size: @btn-font-size-xl;
-  }
   &--block {
     display: block;
     width: 100%;

diff --git a/src/styles/root.less b/src/styles/root.less
@@ -16,6 +16,7 @@
   --light-2: @gray-7;
   --highlight-1: var(--brand-1);
   --highlight-2: var(--brand-2);
+  --link-color: var(--blue);
   --blue: @blue;
   --gray-dark: @gray-dark;
   --green: @green;

diff --git a/src/styles/var.less b/src/styles/var.less
@@ -86,8 +86,8 @@
 @backdrop-bg: rgba(0, 0, 0, 0.7);
 
 // Button
-@btn-padding: 3px 12px;
-@btn-border-radius: 15px;
+@btn-padding: 5px 24px;
+@btn-border-radius: 20px;
 @btn-bg: var(--white);
 @btn-font-family: inherit;
 @btn-font-size: @font-size-sm;
@@ -97,18 +97,14 @@
 @btn-hover-bg: rgba(0, 0, 0, 0.04);
 @btn-active-bg: rgba(0, 0, 0, 0.08);
 
-@btn-padding-sm: 0 6px;
-@btn-border-radius-sm: 12px;
+@btn-padding-sm: 4px 12px;
+@btn-border-radius-sm: 15px;
 @btn-font-size-sm: @font-size-sm;
 
-@btn-padding-lg: 4px 24px;
-@btn-border-radius-lg: 20px;
+@btn-padding-lg: 9px 24px;
+@btn-border-radius-lg: @btn-border-radius;
 @btn-font-size-lg: @font-size-md;
 
-@btn-padding-xl: 9px 24px;
-@btn-border-radius-xl: 20px;
-@btn-font-size-xl: 16px;
-
 @btn-block-spacing-y: 9px;
 
 @btn-border-width: @border-width;