feat(Button): Button组件对齐 mobile-vue

site/mobile/mobile.config.js

@@ -3,7 +3,7 @@ export default {
     {
       title: 'Button 按钮',
       name: 'button',
-      component: () => import('tdesign-mobile-react/button/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/button/_example/index.tsx'),
     },
     {
       title: 'Divider 分割符',

site/style/mobile/demo.less

@@ -1,5 +1,5 @@
 .tdesign-mobile-demo {
-  background-color: #f6f6f6;
+  background-color: #ffffff;
   font-family: 'PingFang SC';
   padding-bottom: 28px;
   box-sizing: border-box;

src/button/Button.tsx

@@ -8,7 +8,7 @@ import { buttonDefaultProps } from './defaultProps';
 
 export interface ButtonProps extends TdButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'content'> {}
 
-const Button = forwardRef((props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     className = '',
     style,
@@ -18,13 +18,15 @@ const Button = forwardRef((props: ButtonProps, ref: React.Ref<HTMLButtonElement>
     disabled,
     ghost,
     icon = null,
+    suffix = null,
     loading,
     shape,
     size,
     theme,
     type,
     variant,
     onClick = noop,
+    loadingProps = {},
   } = props;
   const { classPrefix } = useConfig();
 
@@ -33,24 +35,28 @@ const Button = forwardRef((props: ButtonProps, ref: React.Ref<HTMLButtonElement>
       ref={ref}
       type={type}
       className={classnames(
-        [`${classPrefix}-button`, `${classPrefix}-button--${variant}`, `${classPrefix}-button--${theme}`, className],
+        [
+          `${classPrefix}-button`,
+          `${classPrefix}-button--size-${size}`,
+          `${classPrefix}-button--${variant}`,
+          `${classPrefix}-button--${theme}`,
+          `${classPrefix}-button--${shape}`,
+          className,
+        ],
         {
           [`${classPrefix}-button--ghost`]: ghost,
-          [`${classPrefix}-size-s`]: size === 'small',
-          [`${classPrefix}-size-default`]: size === 'medium',
-          [`${classPrefix}-size-l`]: size === 'large',
-          [`${classPrefix}-is-loading`]: loading,
-          [`${classPrefix}-is-disabled`]: disabled,
-          [`${classPrefix}-is-block`]: block,
+          [`${classPrefix}-button--loading`]: loading,
+          [`${classPrefix}-button--disabled`]: disabled,
+          [`${classPrefix}-button--block`]: block,
         },
-        [`${classPrefix}-button--shape-${shape}`],
       )}
       style={style}
       onClick={!loading && !disabled ? onClick : undefined}
       disabled={disabled || loading}
     >
-      {loading ? <LoadingIcon /> : icon}
-      {content || children ? <span className={`${classPrefix}-button__text`}> {content || children}</span> : ''}
+      {loading ? <LoadingIcon {...loadingProps} /> : icon}
+      {content || children ? <span className={`${classPrefix}-button__content`}> {content || children}</span> : ''}
+      {suffix}
     </button>
   );
 });

src/button/__tests__/__snapshots__/button.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Button 组件测试 > content 1`] = `
 <span
-  class="t-button__text"
+  class="t-button__content"
 >
    
   按钮组件

src/button/_example/base.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <>
+      <div className="row">
+        <Button size="large" theme="primary">
+          填充按钮
+        </Button>
+        <Button size="large" theme="light">
+          填充按钮
+        </Button>
+        <Button size="large">填充按钮</Button>
+      </div>
+      <div className="row">
+        <Button size="large" theme="primary" variant="outline">
+          描边按钮
+        </Button>
+        <Button size="large" theme="primary" variant="dashed">
+          虚框按钮
+        </Button>
+        <Button size="large" theme="primary" variant="text">
+          文字按钮
+        </Button>
+      </div>
+    </>
+  );
+}

src/button/_example/block.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <div className="row">
+      <Button size="large" theme="primary" block>
+        填充按钮
+      </Button>
+    </div>
+  );
+}

src/button/_example/ghost.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <div className="row section-ghost">
+      <Button size="large" ghost theme="primary">
+        幽灵按钮
+      </Button>
+      <Button size="large" ghost theme="danger">
+        幽灵按钮
+      </Button>
+      <Button size="large" ghost>
+        幽灵按钮
+      </Button>
+    </div>
+  );
+}

src/button/_example/group.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <div className="row section-group">
+      <Button size="large" theme="light">
+        组合按钮
+      </Button>
+      <Button size="large" theme="primary">
+        组合按钮
+      </Button>
+    </div>
+  );
+}

src/button/_example/icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+
+export default function () {
+  return (
+    <div className="row">
+      <Button theme="primary" size="large" icon={<Icon name="app" />}>
+        填充按钮
+      </Button>
+      <Button theme="primary" size="large" loading>
+        加载中
+      </Button>
+      <Button theme="primary" size="large" shape="square" icon={<Icon name="search" />} />
+    </div>
+  );
+}

src/button/_example/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import './style/index.less';
+import BaseDemo from './base';
+import IconDemo from './icon';
+import GhostDemo from './ghost';
+import GroupDemo from './group';
+import BlockDemo from './block';
+import SizeDemo from './size';
+import StatusDemo from './status';
+import ShapeDemo from './shape';
+import ThemeDemo from './theme';
+
+export default function Base() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Button 按钮" summary="按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。" />
+      <TDemoBlock title="01 组件类型" summary="基础按钮">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="图标按钮">
+        <IconDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="幽灵按钮">
+        <GhostDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="组合按钮">
+        <GroupDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="通栏按钮">
+        <BlockDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="02 组件状态" summary="按钮禁用态">
+        <StatusDemo />
+      </TDemoBlock>
+
+      <TDemoBlock title="03 组件样式" summary="按钮尺寸">
+        <SizeDemo />
+      </TDemoBlock>
+
+      <TDemoBlock summary="按钮形状">
+        <ShapeDemo />
+      </TDemoBlock>
+
+      <TDemoBlock summary="按钮主题">
+        <ThemeDemo />
+      </TDemoBlock>
+    </div>
+  );
+}

src/button/_example/shape.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+
+export default function () {
+  return (
+    <>
+      <div className="row section-shape">
+        <Button theme="primary" size="large">
+          填充按钮
+        </Button>
+        <Button theme="primary" size="large" shape="square" aria-label="搜索" icon={<Icon name="search" />}></Button>
+        <Button theme="primary" size="large" shape="round">
+          填充按钮
+        </Button>
+        <Button theme="primary" size="large" shape="circle" aria-label="搜索" icon={<Icon name="search" />}></Button>
+      </div>
+      <Button theme="primary" size="large" block className="rectangle-button">
+        填充按钮
+      </Button>
+    </>
+  );
+}