feat(button): refactor antd button, rewrite icon

#584

Author: LuckyFBB

src/button/__tests__/index.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { UploadOutlined } from '@dtinsight/react-icons';
+import { render, screen } from '@testing-library/react';
+
+import Button from '../index';
+
+describe('Button', () => {
+    it('renders button with text correctly', () => {
+        render(<Button>Test Button</Button>);
+        expect(screen.getByText('Test Button')).toBeInTheDocument();
+    });
+
+    it('renders button with icon correctly', () => {
+        const { container } = render(<Button icon={<UploadOutlined />}>With Icon</Button>);
+        expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
+        expect(screen.getByText('With Icon')).toBeInTheDocument();
+    });
+
+    it('renders icon-only button correctly', () => {
+        const { container } = render(<Button icon={<UploadOutlined />} />);
+        expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
+        expect(container.querySelector('.dtc-button__text')).toBeNull();
+    });
+
+    it('applies custom className correctly', () => {
+        const { container } = render(<Button className="custom-class">Custom Class</Button>);
+        expect(container.querySelector('.dtc-button.custom-class')).toBeInTheDocument();
+    });
+
+    it('passes other props to antd Button', () => {
+        render(
+            <Button type="primary" data-testid="primary-button">
+                Primary
+            </Button>
+        );
+        const button = screen.getByTestId('primary-button');
+        expect(button).toHaveClass('ant-btn-primary');
+    });
+
+    it('applies correct size to icon and text', () => {
+        const { container } = render(
+            <Button size="small" icon={<UploadOutlined />}>
+                Small Button
+            </Button>
+        );
+        expect(container.querySelector('.dtc-button__icon--small')).toBeInTheDocument();
+        expect(container.querySelector('.dtc-button__text--small')).toBeInTheDocument();
+    });
+});

src/button/demos/basic.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { UploadOutlined } from '@dtinsight/react-icons';
+import { Radio, Space } from 'antd';
+import { Button } from 'dt-react-component';
+
+import { ButtonProps } from '..';
+
+export default function Basic() {
+    const [size, setSize] = useState<ButtonProps['size']>('large');
+
+    return (
+        <Space direction="vertical" size="large">
+            <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
+                <Radio.Button value="large">Large</Radio.Button>
+                <Radio.Button value="middle">Default</Radio.Button>
+                <Radio.Button value="small">Small</Radio.Button>
+            </Radio.Group>
+
+            <div>
+                <h3>按钮类型</h3>
+                <Space>
+                    <Button type="primary" size={size}>
+                        Primary Button
+                    </Button>
+                    <Button size={size}>Default Button</Button>
+                    <Button type="dashed" size={size}>
+                        Dashed Button
+                    </Button>
+                    <Button type="link" size={size}>
+                        Link Button
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <h3>带图标的按钮</h3>
+                <Space>
+                    <Button type="primary" size={size} icon={<UploadOutlined />}>
+                        Search
+                    </Button>
+                    <Button icon={<UploadOutlined />} size={size}>
+                        Search
+                    </Button>
+                    <Button type="dashed" size={size} icon={<UploadOutlined />}>
+                        Search
+                    </Button>
+                    <Button type="link" size={size} icon={<UploadOutlined />}>
+                        Search
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <h3>纯图标按钮</h3>
+                <Space>
+                    <Button type="primary" size={size} icon={<UploadOutlined />} />
+                    <Button size={size} icon={<UploadOutlined />} />
+                    <Button size={size} type="dashed" icon={<UploadOutlined />} />
+                    <Button size={size} type="link" icon={<UploadOutlined />} />
+                </Space>
+            </div>
+
+            <div>
+                <h3>禁用状态</h3>
+                <Space>
+                    <Button size={size} type="primary" disabled>
+                        Primary(Disabled)
+                    </Button>
+                    <Button size={size} disabled>
+                        Default(Disabled)
+                    </Button>
+                    <Button size={size} type="dashed" disabled>
+                        Dashed(Disabled)
+                    </Button>
+                    <Button size={size} type="link" disabled>
+                        Link(Disabled)
+                    </Button>
+                </Space>
+            </div>
+        </Space>
+    );
+}

src/button/demos/block.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { UploadOutlined } from '@dtinsight/react-icons';
+import { Space } from 'antd';
+import { Button } from 'dt-react-component';
+
+export default function BlockDemo() {
+    return (
+        <Space direction="vertical" size="large" style={{ width: '100%' }}>
+            <div>
+                <h3>块级按钮</h3>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                    <Button type="primary" block>
+                        Primary Block Button
+                    </Button>
+                    <Button block>Default Block Button</Button>
+                    <Button type="dashed" block>
+                        Dashed Block Button
+                    </Button>
+                    <Button type="link" block>
+                        Link Block Button
+                    </Button>
+                </Space>
+            </div>
+
+            <div style={{ background: 'rgb(190, 200, 200)', padding: '16px' }}>
+                <h3>幽灵按钮</h3>
+                <Space>
+                    <Button type="primary" ghost>
+                        Primary Ghost
+                    </Button>
+                    <Button ghost>Default Ghost</Button>
+                    <Button type="dashed" ghost>
+                        Dashed Ghost
+                    </Button>
+                    <Button type="primary" ghost icon={<UploadOutlined />}>
+                        Ghost with Icon
+                    </Button>
+                </Space>
+            </div>
+        </Space>
+    );
+}

src/button/demos/loading.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { UploadOutlined } from '@dtinsight/react-icons';
+import { Space } from 'antd';
+import { Button } from 'dt-react-component';
+
+export default function LoadingDemo() {
+    const [loading, setLoading] = useState(false);
+
+    const handleClick = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <Space direction="vertical" size="large">
+            <div>
+                <h3>加载状态</h3>
+                <Space>
+                    <Button type="primary" loading>
+                        Loading
+                    </Button>
+                    <Button loading>Loading</Button>
+                    <Button type="dashed" loading>
+                        Loading
+                    </Button>
+                    <Button type="link" loading>
+                        Loading
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <h3>点击后加载</h3>
+                <Space>
+                    <Button type="primary" loading={loading} onClick={handleClick}>
+                        Click me!
+                    </Button>
+                    <Button loading={loading} onClick={handleClick}>
+                        Click me!
+                    </Button>
+                    <Button
+                        type="primary"
+                        icon={<UploadOutlined />}
+                        loading={loading}
+                        onClick={handleClick}
+                    >
+                        Click me!
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <h3>危险按钮</h3>
+                <Space>
+                    <Button type="primary" danger>
+                        Primary Danger
+                    </Button>
+                    <Button danger>Default Danger</Button>
+                    <Button type="dashed" danger>
+                        Dashed Danger
+                    </Button>
+                    <Button type="link" danger>
+                        Link Danger
+                    </Button>
+                </Space>
+            </div>
+        </Space>
+    );
+}

src/button/index.md

@@ -0,0 +1,34 @@
+---
+title: Button 按钮
+group: 组件
+toc: content
+demo:
+    cols: 2
+---
+
+# Button 按钮
+
+## 何时使用
+
+按钮用于开始一个即时操作。
+
+## 代码演示
+
+<code src="./demos/basic.tsx" title="基本使用" description="按钮的基本使用，包括不同类型的按钮、带图标的按钮、纯图标按钮、不同尺寸的按钮以及禁用状态的按钮。"></code>
+
+<code src="./demos/loading.tsx" title="加载状态" description="展示按钮的加载状态和危险按钮。"></code>
+
+<code src="./demos/block.tsx" title="块级按钮" description="展示块级按钮和幽灵按钮。"></code>
+
+## API
+
+### Button
+
+Button 组件支持 antd Button 组件的所有属性，详见 [Ant Design Button API](https://ant.design/components/button-cn/#API)。
+
+## 注意事项
+
+-   使用自定义图标时，请确保图标组件符合规范，建议使用项目内的图标组件。
+-   图标大小会根据按钮的 `size` 属性自动调整，也可以通过设置图标组件的 `style` 属性来手动调整大小。
+-   当只设置 `icon` 而不设置 `children` 时，按钮将只显示图标。
+-   本组件是对 antd Button 的封装，支持 antd Button 的所有属性和事件。

src/button/index.scss

@@ -0,0 +1,48 @@
+.dtc-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    &__icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        line-height: 0;
+        // 因为 dtstack-icon 组件的 font-size 是 16px，现在需要继承 Button 组件的 font-size
+        .dtstack-icon {
+            font-size: inherit;
+        }
+        &--small {
+            font-size: 12px;
+        }
+        &--middle {
+            font-size: 16px;
+        }
+        &--large {
+            font-size: 18px;
+        }
+        & + .dtc-button__text {
+            &--small {
+                margin-left: 2px;
+            }
+            &--middle {
+                margin-left: 4px;
+            }
+            &--large {
+                margin-left: 8px;
+            }
+        }
+    }
+    &__text {
+        display: inline-block;
+        &--small {
+            font-size: 12px;
+        }
+        &--middle {
+            font-size: 12px;
+        }
+        &--large {
+            font-size: 16px;
+        }
+    }
+}

src/button/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button as AntdButton, ButtonProps as AntdButtonProps } from 'antd';
+import classNames from 'classnames';
+
+import './index.scss';
+
+export interface ButtonProps extends AntdButtonProps {}
+
+export default function Button({
+    className,
+    icon,
+    children,
+    size = 'middle',
+    ...rest
+}: ButtonProps) {
+    return (
+        <AntdButton className={classNames('dtc-button', className)} {...rest}>
+            {icon && <span className={`dtc-button__icon dtc-button__icon--${size}`}>{icon}</span>}
+            {children && (
+                <span className={`dtc-button__text dtc-button__text--${size}`}>{children}</span>
+            )}
+        </AntdButton>
+    );
+}

src/index.ts

@@ -1,6 +1,7 @@
 import '@dtinsight/react-icons/dist/index.css';
 
 export { default as BlockHeader } from './blockHeader';
+export { default as Button } from './button';
 export { default as Catalogue } from './catalogue';
 export { default as Chat } from './chat';
 export { default as CollapsibleActionItems } from './collapsibleActionItems';