fix(website，tokens，icons，components): 修改button的一些问题

affects: @gio-design/components, @gio-design/icons, @gio-design/tokens, website
growingio · Aug 31, 2020 · 7932a65 · 7932a65
1 parent fac5b73
commit 7932a65
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 111 deletions.
diff --git a/packages/components/src/components/button/LoadingIcon.tsx b/packages/components/src/components/button/LoadingIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonType } from './interface';
-import { LoadingBlackOutlined, LoadingWhiteOutlined } from '@gio-design/icons';
+import { LoadingOutlined } from '@gio-design/icons';
 
 export interface LoadingIconProps {
   prefixCls: string;
@@ -9,16 +9,13 @@ export interface LoadingIconProps {
   type?: ButtonType;
 }
 
-export default function LoadingIcon({ prefixCls, loading, existIcon, type }: LoadingIconProps) {
-  let loadingIcon;
-  if (type === 'primary') {
-    loadingIcon = <LoadingWhiteOutlined />;
-  } else {
-    loadingIcon = <LoadingBlackOutlined />;
-  }
-
+export default function LoadingIcon({ prefixCls, loading, existIcon }: LoadingIconProps) {
   if (existIcon || loading) {
-    return <span className={`${prefixCls}-loading-icon`}>{loadingIcon}</span>;
+    return (
+      <span className={`${prefixCls}-loading-icon`}>
+        <LoadingOutlined rotating />
+      </span>
+    );
   }
   return null;
 }
diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -133,13 +133,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     [`${prefixCls}-block`]: block,
   });
 
-  /* eslint-disable prettier/prettier */
   const iconNode =
-    icon && !innerLoading ? (
-      icon
-    ) : (
-        <LoadingIcon existIcon={!!icon} type={type} prefixCls={prefixCls} loading={innerLoading} />
-      );
+    icon && !innerLoading ? icon : <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={innerLoading} />;
 
   const kids = children || children === 0 ? spaceChildren(children, isNeedInserted() && autoInsertSpace) : null;
 

diff --git a/packages/components/src/components/button/style/index.less b/packages/components/src/components/button/style/index.less
@@ -3,7 +3,7 @@
 @import './mixin';
 
 @btn-prefix-cls: ~'@{component-prefix}-btn';
-@iconfont-css-prefix: gioicon;
+@iconfont-css-prefix: gio-icon;
 // for compatible
 // @btn-assist-color: @text-color-base;
 // @btn-assist-bg: none;
@@ -72,10 +72,6 @@
   & > &-loading-icon {
     height: 16px;
     margin-right: @margin-xs;
-    svg {
-      -webkit-animation: loadingcircle 1s infinite linear;
-      animation: loadingCircle 1s infinite linear;
-    }
     &:only-child {
       margin-right: 0;
     }
@@ -84,8 +80,15 @@
   &-icon-only {
     .btn-square(@btn-prefix-cls);
     padding: 7px !important;
-    svg {
-      vertical-align: baseline !important;
+    .@{iconfont-css-prefix} {
+      line-height: 0;
+      vertical-align: unset;
+      svg {
+        vertical-align: bottom !important;
+      }
+    }
+    &.gio-btn-assist {
+      padding: 8px !important;
     }
   }
 
@@ -94,11 +97,6 @@
     position: relative;
   }
 
-  > svg + span,
-  > span + svg {
-    margin-left: @margin-xs;
-  }
-
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
     margin-left: @margin-xs;

diff --git a/packages/components/src/components/button/style/mixin.less b/packages/components/src/components/button/style/mixin.less
@@ -105,7 +105,7 @@
 .btn() {
   position: relative;
   display: inline-block;
-  font-weight: @weight-font-button;
+  font-weight: @weight-font-regular;
   white-space: nowrap;
   text-align: center;
   text-shadow: none;
@@ -115,13 +115,15 @@
   cursor: pointer;
   user-select: none;
   touch-action: manipulation;
-  svg {
-    width: 16px;
-    height: 16px;
-    margin-right: 0 !important;
-    vertical-align: -3px;
+  .gio-icon {
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 0 !important;
+      vertical-align: -1px;
+    }
   }
-  .button-size(@btn-height-base; @size-spacing-l; @size-font-button-default; @radius-border-button);
+  .button-size(@btn-height-base; @size-spacing-l; @size-font-14; @radius-border-small);
   > .@{iconfont-css-prefix} {
     line-height: 1;
   }
@@ -144,10 +146,10 @@
     }
   }
   &-large {
-    .button-size(@btn-height-lg; @size-spacing-l; @size-font-button-large; @radius-border-button);
+    .button-size(@btn-height-lg; @size-spacing-l; @size-font-14; @radius-border-small);
   }
   &-small {
-    .button-size(@btn-height-sm; @size-spacing-m; @size-font-button-small; @radius-border-button);
+    .button-size(@btn-height-sm; @size-spacing-m; @size-font-14; @radius-border-small);
   }
 }
 // primary button style
@@ -183,6 +185,7 @@
 
 // text button style
 .btn-text() {
+  padding: 0 !important;
   .button-color(@color-text-button-normal; transparent; transparent);
   svg {
     color: @color-text-button-normal;
@@ -221,25 +224,25 @@
 // square button: the content only contains icon
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
-  .button-size(@btn-square-size; 0; @size-font-button-only-icon-default; @radius-border-button);
+  .button-size(@btn-square-size; 0; @size-font-16; @radius-border-small);
   & > * {
-    font-size: @size-font-button-only-icon-default;
+    font-size: @size-font-16;
   }
   &.@{btnClassName}-large {
     .square(@btn-square-size-lg);
-    .button-size(@btn-square-size-lg; 0; @size-font-button-only-icon-large; @radius-border-button);
+    .button-size(@btn-square-size-lg; 0; @size-font-18; @radius-border-small);
     & > * {
-      font-size: @size-font-button-only-icon-large;
+      font-size: @size-font-18;
     }
     svg {
       .square(@btn-square-size-lg - 16px);
     }
   }
   &.@{btnClassName}-small {
     .square(@btn-square-size-sm);
-    .button-size(@btn-square-size-sm; 0; @size-font-button-only-icon-small; @radius-border-button);
+    .button-size(@btn-square-size-sm; 0; @size-font-14; @radius-border-small);
     & > * {
-      font-size: @size-font-button-only-icon-small;
+      font-size: @size-font-14;
     }
     svg {
       .square(@btn-square-size-sm - 16px) !important;

diff --git a/packages/components/src/components/tree/style/index.less b/packages/components/src/components/tree/style/index.less
@@ -11,7 +11,7 @@
   .@{custom-tree-prefix-cls} {
     .reset-component;
     background: @color-background-tree-normal;
-    border-radius: @radius-border-tree;
+    border-radius: @radius-border-small;
     transition: background-color 0.3s;
 
     // =================== Virtual List ===================
@@ -31,7 +31,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 40px;
-      border-radius: @radius-border-tree;
+      border-radius: @radius-border-small;
       outline: none;
       &:hover {
         background-color: @color-background-tree-hover;

diff --git a/packages/components/src/components/upload/style/index.less b/packages/components/src/components/upload/style/index.less
@@ -183,7 +183,7 @@
   object-fit: contain;
   overflow: hidden;
   vertical-align: middle;
-  border-radius: @radius-border-button;
+  border-radius: @radius-border-small;
 
   &-file {
     color: @palette-black-6;

diff --git a/packages/components/src/components/upload/triggers/InputTrigger.tsx b/packages/components/src/components/upload/triggers/InputTrigger.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import classnames from 'classnames';
 import Loading from '../../loading';
-import { LoadingBlackOutlined } from '@gio-design/icons';
+import { LoadingOutlined } from '@gio-design/icons';
 import Input from '../../input';
 import { ITriggerProps, STATUS_SUCCESS, STATUS_UPLOADING } from '../interface';
 import Preview from '../Preview';
@@ -25,26 +25,26 @@ const InputTrigger: React.FC<ITriggerProps> = ({ triggerProps, file, inputUpload
   if (file?.error) {
     errorMsg = typeof file.error === 'string' ? file.error : '未知错误类型，请查看控制台';
   }
-
+  /* eslint-disable */
   return (
     <span className={inputWrapperCls}>
       {hideInput ? (
-        <Loading loading={file?.status === STATUS_UPLOADING} indicator={<LoadingBlackOutlined />} title={false}>
+        <Loading loading={file?.status === STATUS_UPLOADING} indicator={<LoadingOutlined rotating />} title={false}>
           <span className={inputPreviewCls} onClick={handlePreviewClick}>
             {file?.status === STATUS_SUCCESS && <Preview file={file} />}
             <span>{file?.name ?? 'Web Image'}</span>
           </span>
         </Loading>
       ) : (
-        <Input
-          placeholder="请输入图片的 URL"
-          {...triggerProps}
-          onChange={handleChange}
-          errorMsg={errorMsg}
-          onPressEnter={handlePressEnter}
-          value={url}
-        />
-      )}
+          <Input
+            placeholder="请输入图片的 URL"
+            {...triggerProps}
+            onChange={handleChange}
+            errorMsg={errorMsg}
+            onPressEnter={handlePressEnter}
+            value={url}
+          />
+        )}
     </span>
   );
 };

diff --git a/packages/icons/src/LoadingOutlined.tsx b/packages/icons/src/LoadingOutlined.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Wrapper from './Wrapper';
+import { IconProps } from './interface';
+
+function SvgLoadingOutlined(wrapperProps: IconProps) {
+  const { rotating, color, size, ...restProps } = wrapperProps;
+  const props = {
+    color,
+    className: rotating ? 'gio-icon-svg gio-icon-rotating' : 'gio-icon-svg',
+    width: !size ? '1rem' : size,
+    height: !size ? '1rem' : size,
+  };
+  const file = (
+    <svg viewBox="0 0 14 14" fill="currentColor" {...props}>
+      <g data-name="Layer 2">
+        <g fill="#2f3c70" data-name="Layer 1">
+          <path d="M7 0a7 7 0 107 7 7 7 0 00-7-7zm0 13a6 6 0 116-6 6 6 0 01-6 6z" opacity={0.4} fill="currentColor" />
+          <path
+            d="M.5 7.5A.5.5 0 010 7a7 7 0 017-7 .5.5 0 01.5.5.5.5 0 01-.5.5 6 6 0 00-6 6 .5.5 0 01-.5.5z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+  return <Wrapper {...restProps} icon={file} />;
+}
+
+export default SvgLoadingOutlined;
diff --git a/packages/icons/src/index.tsx b/packages/icons/src/index.tsx
@@ -27,8 +27,7 @@ export { default as InformationFilled } from './InformationFilled';
 export { default as LeftDoubleOutlined } from './LeftDoubleOutlined';
 export { default as LeftOutlined } from './LeftOutlined';
 export { default as LineChartOutlined } from './LineChartOutlined';
-export { default as LoadingBlackOutlined } from './LoadingBlackOutlined';
-export { default as LoadingWhiteOutlined } from './LoadingWhiteOutlined';
+export { default as LoadingOutlined } from './LoadingOutlined';
 export { default as More } from './More';
 export { default as NumberChartOutlined } from './NumberChartOutlined';
 export { default as Picture } from './Picture';

diff --git a/...ges/icons/svgs/loading-black-outlined.svg → packages/icons/svgs/loading-outlined.svg b/...ges/icons/svgs/loading-black-outlined.svg → packages/icons/svgs/loading-outlined.svg
diff --git a/packages/icons/svgs/loading-white-outlined.svg b/packages/icons/svgs/loading-white-outlined.svg
diff --git a/packages/tokens/properties/radius.json b/packages/tokens/properties/radius.json
@@ -15,12 +15,6 @@
       },
       "pill": {
         "value": "50%"
-      },
-      "button": {
-        "value": "{radius.border.small.value}"
-      },
-      "tree": {
-        "value": "{radius.border.small.value}"
       }
     }
   }

diff --git a/packages/tokens/properties/size/font/button.json b/packages/tokens/properties/size/font/button.json
diff --git a/packages/tokens/properties/weight.json b/packages/tokens/properties/weight.json
@@ -10,9 +10,6 @@
       "medium": {
         "value": 500
       },
-      "button": {
-        "value": "{weight.font.regular.value}"
-      },
       "semi-bold": {
         "value": 600
       },

diff --git a/packages/website/src/components/basic/loading/demos/index.less b/packages/website/src/components/basic/loading/demos/index.less
@@ -2,14 +2,6 @@
   .gio-loading {
     margin: 0 20px;
   }
-  .gio-loading-indicator > svg {
-    animation: loadingCircle 1s infinite linear;
-    @keyframes loadingCircle {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
   .gio-btn {
     margin: 10px;
     .gio-loading {

diff --git a/packages/website/src/components/basic/loading/demos/indicator.tsx b/packages/website/src/components/basic/loading/demos/indicator.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import { Loading, Button } from '@gio-design/components';
-import { LoadingWhiteOutlined, LoadingBlackOutlined } from '@gio-design/icons';
+import { LoadingOutlined } from '@gio-design/icons';
 import '@gio-design/components/es/components/loading/style/index.css';
 import '@gio-design/components/es/components/button/style/index.css';
 import './index.less';
 
 export default () => (
   <div className="displayBaseLoading">
     <Button
-      icon={<Loading titlePosition="right" indicator={<LoadingWhiteOutlined />} title={false} />}
+      icon={<Loading titlePosition="right" indicator={<LoadingOutlined rotating />} title={false} />}
       style={{ lineHeight: 0 }}
     />
 
     <Button
       disabled
-      icon={<Loading titlePosition="right" indicator={<LoadingBlackOutlined />} title={false} />}
+      icon={<Loading titlePosition="right" indicator={<LoadingOutlined rotating />} title={false} />}
       style={{ lineHeight: 0 }}
     />
   </div>