('large');
+
+ return (
+
+ setSize(e.target.value)}>
+ Large
+ Default
+ Small
+
+
+
+
按钮类型
+
+
+
+
+
+
+
+
+
+
带图标的按钮
+
+ }>
+ Search
+
+ } size={size}>
+ Search
+
+ }>
+ Search
+
+ }>
+ Search
+
+
+
+
+
+
纯图标按钮
+
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+
禁用状态
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/button/demos/block.tsx b/src/button/demos/block.tsx
new file mode 100644
index 000000000..c6a189958
--- /dev/null
+++ b/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 (
+
+
+
块级按钮
+
+
+
+
+
+
+
+
+
+
幽灵按钮
+
+
+
+
+ }>
+ Ghost with Icon
+
+
+
+
+ );
+}
diff --git a/src/button/demos/loading.tsx b/src/button/demos/loading.tsx
new file mode 100644
index 000000000..b3f7b61a2
--- /dev/null
+++ b/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 (
+
+
+
加载状态
+
+
+
+
+
+
+
+
+
+
点击后加载
+
+
+
+ }
+ loading={loading}
+ onClick={handleClick}
+ >
+ Click me!
+
+
+
+
+
+
危险按钮
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/button/index.md b/src/button/index.md
new file mode 100644
index 000000000..8fd25e568
--- /dev/null
+++ b/src/button/index.md
@@ -0,0 +1,34 @@
+---
+title: Button 按钮
+group: 组件
+toc: content
+demo:
+ cols: 2
+---
+
+# Button 按钮
+
+## 何时使用
+
+按钮用于开始一个即时操作。
+
+## 代码演示
+
+
+
+
+ ,
+ "container":
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/button/__tests__/index.test.tsx b/src/button/__tests__/index.test.tsx
index 56a982832..6fb4df277 100644
--- a/src/button/__tests__/index.test.tsx
+++ b/src/button/__tests__/index.test.tsx
@@ -1,46 +1,47 @@
import React from 'react';
import { UploadOutlined } from '@dtinsight/react-icons';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
-import Button from '../index';
+import Button from '..';
describe('Button', () => {
- it('renders button with text correctly', () => {
- render();
- expect(screen.getByText('Test Button')).toBeInTheDocument();
+ test('should support contentLayout success render', () => {
+ const wrapper = render(}>Primary);
+ expect(wrapper).toMatchSnapshot();
});
- it('renders button with icon correctly', () => {
- const { container } = render(}>With Icon);
- expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
- expect(screen.getByText('With Icon')).toBeInTheDocument();
+ it('renders text correctly', () => {
+ const { getByText } = render();
+ expect(getByText('Hello')).toBeInTheDocument();
});
- it('renders icon-only button correctly', () => {
+ it('renders icon correctly', () => {
const { container } = render(} />);
expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
- expect(container.querySelector('.dtc-button__text')).toBeNull();
+ expect(container.querySelector('.dtc-button__text')).not.toBeInTheDocument();
});
- it('applies custom className correctly', () => {
- const { container } = render();
- expect(container.querySelector('.dtc-button.custom-class')).toBeInTheDocument();
+ it('renders icon and text correctly', () => {
+ const { getByText, container } = render(}>Search);
+ expect(getByText('Search')).toBeInTheDocument();
+ expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
});
- it('passes other props to antd Button', () => {
- render(
-
- );
- const button = screen.getByTestId('primary-button');
- expect(button).toHaveClass('ant-btn-primary');
+ it('applies custom className', () => {
+ const { container } = render();
+ expect(container.firstChild).toHaveClass('custom-class');
+ });
+
+ it('passes other props to AntdButton', () => {
+ const { getByText } = render();
+ expect(getByText('Primary').parentNode).toHaveClass('ant-btn-primary');
});
- it('applies correct size to icon and text', () => {
+ it('applies size class to icon and text', () => {
const { container } = render(
- }>
- Small Button
+ } size="small">
+ Test
);
expect(container.querySelector('.dtc-button__icon--small')).toBeInTheDocument();