feat(button): 新增 rectangle shape api & 调整 square 为正方形 (merge request …

…!817)


Squash merge branch 'feat/button/shape' into 'develop'

* feat: update snapshot
* feat: update snapshot
* Merge branch 'develop' into feat/button/shape
* feat(button): 新增 rectangle shape api & 调整 square 为正方形

examples/button/demos/shape.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="tdesign-demo-shape">
     <div class="tdesign-demo-block">
-      <div class="item"><t-button theme="primary" shape="square" variant="base">填充按钮</t-button></div>
+      <div class="item"><t-button theme="primary" shape="rectangle" variant="base">填充按钮</t-button></div>
+      <div class="item"><t-button theme="primary" shape="square" variant="base"><t-icon-calendar slot="icon"/></t-button></div>
       <div class="item"><t-button theme="primary" shape="round" variant="base">填充按钮</t-button></div>
       <div class="item">
         <t-button theme="primary" shape="circle" variant="base"><t-icon-calendar slot="icon"/></t-button>
       </div>
     </div>
     <div class="tdesign-demo-block">
-      <div class="item"><t-button shape="square" variant="outline">描边按钮</t-button></div>
+      <div class="item"><t-button shape="rectangle" variant="outline">描边按钮</t-button></div>
+      <div class="item"><t-button shape="square" variant="outline"><t-icon-calendar slot="icon"/></t-button></div>
       <div class="item"><t-button shape="round" variant="outline">描边按钮</t-button></div>
       <div class="item"><t-button shape="circle" variant="outline"><t-icon-calendar slot="icon"/></t-button></div>
     </div>
     <div class="tdesign-demo-block">
-      <div class="item"><t-button shape="square" variant="dashed">虚框按钮</t-button></div>
+      <div class="item"><t-button shape="rectangle" variant="dashed">虚框按钮</t-button></div>
+      <div class="item"><t-button shape="square" variant="dashed"><t-icon-calendar slot="icon"/></t-button></div>
       <div class="item"><t-button shape="round" variant="dashed">虚框按钮</t-button></div>
       <div class="item"><t-button shape="circle" variant="dashed"><t-icon-calendar slot="icon"/></t-button></div>
     </div>
     <div class="tdesign-demo-block">
-      <div class="item"><t-button shape="square" variant="text">文字按钮</t-button></div>
+      <div class="item"><t-button shape="rectangle" variant="text">文字按钮</t-button></div>
+      <div class="item"><t-button shape="square" variant="text"><t-icon-calendar slot="icon"/></t-button></div>
       <div class="item"><t-button shape="round" variant="text">文字按钮</t-button></div>
       <div class="item"><t-button shape="circle" variant="text"><t-icon-calendar slot="icon"/></t-button></div>
     </div>

src/button/button.tsx

@@ -15,7 +15,6 @@ export default Vue.extend({
   render(): VNode {
     let buttonContent = renderContent(this, 'default', 'content');
     const icon = this.loading ? <TLoading inheritColor={true} /> : renderTNodeJSX(this, 'icon');
-    const isIconOnly = icon && !buttonContent;
     const disabled = this.disabled || this.loading;
     let { theme } = this;
 
@@ -35,19 +34,15 @@ export default Vue.extend({
       {
         [CLASSNAMES.STATUS.disabled]: disabled,
         [CLASSNAMES.STATUS.loading]: this.loading,
-        [`${name}--icon-only`]: isIconOnly,
-        [`${name}--shape-${this.shape}`]: this.shape !== 'square',
+        [`${name}--shape-${this.shape}`]: this.shape !== 'rectangle',
         [`${name}--ghost`]: this.ghost,
         [CLASSNAMES.SIZE.block]: this.block,
       },
     ];
 
-    buttonContent = <span class={`${name}__text`}>{buttonContent}</span>;
+    buttonContent = buttonContent ? <span class={`${name}__text`}>{buttonContent}</span> : '';
     if (icon) {
-      buttonContent = [
-        icon,
-        !isIconOnly ? buttonContent : '',
-      ];
+      buttonContent = [icon, buttonContent];
     }
 
     return (

src/button/props.ts

@@ -1,10 +1,12 @@
+/* eslint-disable */
+
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-07-17 18:09:07
+ * updated at 2021-10-20 17:25:18
  * */
 
-import { PropType } from 'vue';
 import { TdButtonProps } from './type';
+import { PropType } from 'vue';
 
 export default {
   /** 是否为块级元素 */
@@ -27,15 +29,15 @@ export default {
   },
   /** 是否显示为加载状态 */
   loading: Boolean,
-  /** 按钮形状，有三种：方形、圆角方形、圆形 */
+  /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
   shape: {
     type: String as PropType<TdButtonProps['shape']>,
-    default: 'square' as TdButtonProps['shape'],
+    default: 'rectangle' as TdButtonProps['shape'],
     validator(val: TdButtonProps['shape']): boolean {
-      return ['square', 'round', 'circle'].includes(val);
+      return ['rectangle', 'square', 'round', 'circle'].includes(val);
     },
   },
-  /** 组件子元素（默认插槽） */
+  /** 组件尺寸 */
   size: {
     type: String as PropType<TdButtonProps['size']>,
     default: 'medium' as TdButtonProps['size'],

src/button/type.ts

@@ -1,6 +1,8 @@
+/* eslint-disable */
+
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-07-17 18:09:07
+ * updated at 2021-10-20 17:25:18
  * */
 
 import { TNode, SizeEnum } from '../common';
@@ -39,12 +41,12 @@ export interface TdButtonProps {
    */
   loading?: boolean;
   /**
-   * 按钮形状，有三种：方形、圆角方形、圆形
-   * @default square
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
    */
-  shape?: 'square' | 'round' | 'circle';
+  shape?: 'rectangle' | 'square' | 'round' | 'circle';
   /**
-   * 组件子元素（默认插槽）
+   * 组件尺寸
    * @default medium
    */
   size?: SizeEnum;
@@ -62,4 +64,4 @@ export interface TdButtonProps {
    * @default base
    */
   variant?: 'base' | 'outline' | 'dashed' | 'text';
-}
+};

test/unit/button/__snapshots__/demo.test.js.snap

@@ -541,7 +541,7 @@ exports[`Button icon demo works fine 1`] = `
       class="demo-button-col"
     >
       <button
-        class="t-button t-size-m t-button--variant-base t-button--theme-primary t-button--icon-only t-button--shape-circle"
+        class="t-button t-size-m t-button--variant-base t-button--theme-primary t-button--shape-circle"
         type="button"
       >
         <svg
@@ -559,7 +559,7 @@ exports[`Button icon demo works fine 1`] = `
       </button>
        
       <button
-        class="t-button t-size-m t-button--variant-base t-button--theme-primary t-button--icon-only t-button--shape-circle"
+        class="t-button t-size-m t-button--variant-base t-button--theme-primary t-button--shape-circle"
         type="button"
       >
         <svg