Skip to content

Commit cce1cdf

Browse files
wangdicoderwangdicoder
authored
feat(button): replace btnType with variant and color (#107)
* feat(button): replace btnType with variant and color * test(mcp): update button component extraction expectations * chore: lint * fix(mcp): refresh extracted button component data
1 parent b6e03be commit cce1cdf

127 files changed

Lines changed: 12585 additions & 1024 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/flat-beds-sing.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@tiny-design/react': patch
3+
'@tiny-design/tokens': patch
4+
---
5+
6+
Refactor button styling to use `variant` and `color` instead of `btnType`.
7+
8+
This is a breaking change for `Button`, `Button.Group`, and `SplitButton`.
9+
Button theme tokens were renamed to variant/color-based keys such as
10+
`button.solid.primary.bg` and `button.outline.danger.border`.

‎apps/docs/guides/cli.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,29 @@ tiny-design usage ./src # Scan project for import stats
3232

3333
### Knowledge Query
3434

35-
| Command | Description |
36-
|---------|-------------|
37-
| `tiny-design list [category]` | List all components grouped by category. Filter by: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
38-
| `tiny-design info <component>` | Props table with types, required flags, default values, and descriptions. |
39-
| `tiny-design doc <component>` | Full markdown documentation for a component. |
40-
| `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given. |
41-
| `tiny-design token [category]` | Design token values. Categories: colors, typography, spacing, breakpoints, shadows. |
42-
| `tiny-design icon [search]` | List all 240+ icons or search by name. |
35+
| Command | Description |
36+
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
37+
| `tiny-design list [category]` | List all components grouped by category. Filter by: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
38+
| `tiny-design info <component>` | Props table with types, required flags, default values, and descriptions. |
39+
| `tiny-design doc <component>` | Full markdown documentation for a component. |
40+
| `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given. |
41+
| `tiny-design token [category]` | Design token values. Categories: colors, typography, spacing, breakpoints, shadows. |
42+
| `tiny-design icon [search]` | List all 240+ icons or search by name. |
4343

4444
### Project Analysis
4545

46-
| Command | Description |
47-
|---------|-------------|
48-
| `tiny-design doctor` | Diagnostic checks: package.json, React version, peer deps, TypeScript, duplicate React detection. |
46+
| Command | Description |
47+
| ------------------------- | ---------------------------------------------------------------------------------------------------- |
48+
| `tiny-design doctor` | Diagnostic checks: package.json, React version, peer deps, TypeScript, duplicate React detection. |
4949
| `tiny-design usage [dir]` | Scan source files for `@tiny-design/react` imports. Shows component usage counts and file locations. |
5050

5151
### Global Flags
5252

53-
| Flag | Description | Default |
54-
|------|-------------|---------|
55-
| `--format json\|text\|markdown` | Output format | `text` |
56-
| `--lang en\|zh` | Output language | `en` |
57-
| `--detail` | Include extended information | `false` |
53+
| Flag | Description | Default |
54+
| ------------------------------- | ---------------------------- | ------- |
55+
| `--format json\|text\|markdown` | Output format | `text` |
56+
| `--lang en\|zh` | Output language | `en` |
57+
| `--detail` | Include extended information | `false` |
5858

5959
## Examples
6060

@@ -123,8 +123,8 @@ export default function TypeDemo() {
123123
return (
124124
<Flex gap="sm">
125125
<Button>Default</Button>
126-
<Button btnType="primary">Primary</Button>
127-
<Button btnType="outline">Outline</Button>
126+
<Button variant="solid" color="primary">Primary</Button>
127+
<Button variant="outline" color="primary">Outline</Button>
128128
</Flex>
129129
);
130130
}

‎apps/docs/guides/cli.zh_CN.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,29 @@ tiny-design usage ./src # 扫描项目中的导入统计
3232

3333
### 知识查询
3434

35-
| 命令 | 描述 |
36-
|------|------|
37-
| `tiny-design list [category]` | 按分类列出所有组件。可筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
38-
| `tiny-design info <component>` | 属性表，包含类型、是否必填、默认值和描述。 |
39-
| `tiny-design doc <component>` | 组件的完整 Markdown 文档。 |
40-
| `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。 |
41-
| `tiny-design token [category]` | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。 |
42-
| `tiny-design icon [search]` | 列出所有 240+ 个图标或按名称搜索。 |
35+
| 命令 | 描述 |
36+
| ------------------------------------- | -------------------------------------------------------------------------- |
37+
| `tiny-design list [category]` | 按分类列出所有组件。可筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
38+
| `tiny-design info <component>` | 属性表，包含类型、是否必填、默认值和描述。 |
39+
| `tiny-design doc <component>` | 组件的完整 Markdown 文档。 |
40+
| `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。 |
41+
| `tiny-design token [category]` | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。 |
42+
| `tiny-design icon [search]` | 列出所有 240+ 个图标或按名称搜索。 |
4343

4444
### 项目分析
4545

46-
| 命令 | 描述 |
47-
|------|------|
48-
| `tiny-design doctor` | 诊断检查：package.json、React 版本、对等依赖、TypeScript、重复 React 检测。 |
49-
| `tiny-design usage [dir]` | 扫描源文件中的 `@tiny-design/react` 导入，显示组件使用次数和文件位置。 |
46+
| 命令 | 描述 |
47+
| ------------------------- | --------------------------------------------------------------------------- |
48+
| `tiny-design doctor` | 诊断检查：package.json、React 版本、对等依赖、TypeScript、重复 React 检测。 |
49+
| `tiny-design usage [dir]` | 扫描源文件中的 `@tiny-design/react` 导入，显示组件使用次数和文件位置。 |
5050

5151
### 全局参数
5252

53-
| 参数 | 描述 | 默认值 |
54-
|------|------|--------|
55-
| `--format json\|text\|markdown` | 输出格式 | `text` |
56-
| `--lang en\|zh` | 输出语言 | `en` |
57-
| `--detail` | 显示扩展信息 | `false` |
53+
| 参数 | 描述 | 默认值 |
54+
| ------------------------------- | ------------ | ------- |
55+
| `--format json\|text\|markdown` | 输出格式 | `text` |
56+
| `--lang en\|zh` | 输出语言 | `en` |
57+
| `--detail` | 显示扩展信息 | `false` |
5858

5959
## 示例
6060

@@ -123,8 +123,8 @@ export default function TypeDemo() {
123123
return (
124124
<Flex gap="sm">
125125
<Button>Default</Button>
126-
<Button btnType="primary">Primary</Button>
127-
<Button btnType="outline">Outline</Button>
126+
<Button variant="solid" color="primary">Primary</Button>
127+
<Button variant="outline" color="primary">Outline</Button>
128128
</Flex>
129129
);
130130
}

‎apps/docs/guides/use-react-app.md‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
33
import { HighlightedCode } from '../src/components/highlighted-code';
44

55
export const CodeBlock = ({ children }) => (
6+
67
<div className="markdown__pre-container">
78
<HighlightedCode className="language-bash">{children}</HighlightedCode>
89
</div>
@@ -15,14 +16,14 @@ export const CodeBlock = ({ children }) => (
1516
## Create a project
1617

1718
<Tabs
18-
animated={false}
19-
defaultActiveKey="npm"
20-
items={[
21-
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
22-
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
23-
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
24-
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
25-
]}
19+
animated={false}
20+
defaultActiveKey="npm"
21+
items={[
22+
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
23+
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
24+
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
25+
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
26+
]}
2627
/>
2728

2829
Start the dev server to verify everything works:
@@ -36,14 +37,14 @@ Open http://localhost:5173/ in your browser.
3637
## Install tiny-design
3738

3839
<Tabs
39-
animated={false}
40-
defaultActiveKey="npm"
41-
items={[
42-
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
43-
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
44-
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
45-
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
46-
]}
40+
animated={false}
41+
defaultActiveKey="npm"
42+
items={[
43+
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
44+
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
45+
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
46+
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
47+
]}
4748
/>
4849

4950
Edit `src/App.tsx` to import a Button component from tiny-design:
@@ -54,7 +55,9 @@ import { Button } from 'tiny-design';
5455
const App = () => {
5556
return (
5657
<div style={{ padding: 24 }}>
57-
<Button btnType="primary">Button</Button>
58+
<Button variant="solid" color="primary">
59+
Button
60+
</Button>
5861
</div>
5962
);
6063
};

‎apps/docs/guides/use-react-app.zh_CN.md‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
33
import { HighlightedCode } from '../src/components/highlighted-code';
44

55
export const CodeBlock = ({ children }) => (
6+
67
<div className="markdown__pre-container">
78
<HighlightedCode className="language-bash">{children}</HighlightedCode>
89
</div>
@@ -15,14 +16,14 @@ export const CodeBlock = ({ children }) => (
1516
## 创建项目
1617

1718
<Tabs
18-
animated={false}
19-
defaultActiveKey="npm"
20-
items={[
21-
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
22-
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
23-
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
24-
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
25-
]}
19+
animated={false}
20+
defaultActiveKey="npm"
21+
items={[
22+
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
23+
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
24+
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
25+
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
26+
]}
2627
/>
2728

2829
启动开发服务器，确认一切正常：
@@ -36,14 +37,14 @@ $ npm run dev
3637
## 安装 tiny-design
3738

3839
<Tabs
39-
animated={false}
40-
defaultActiveKey="npm"
41-
items={[
42-
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
43-
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
44-
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
45-
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
46-
]}
40+
animated={false}
41+
defaultActiveKey="npm"
42+
items={[
43+
{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
44+
{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
45+
{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
46+
{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
47+
]}
4748
/>
4849

4950
修改 `src/App.tsx`，从 tiny-design 引入 Button 组件：
@@ -54,7 +55,9 @@ import { Button } from 'tiny-design';
5455
const App = () => {
5556
return (
5657
<div style={{ padding: 24 }}>
57-
<Button btnType="primary">Button</Button>
58+
<Button variant="solid" color="primary">
59+
Button
60+
</Button>
5861
</div>
5962
);
6063
};

‎apps/docs/public/llms-full.txt‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -249,21 +249,15 @@ export interface BreadcrumbItemProps
249249
import React from 'react';
250250
import { BaseProps, SizeType } from '../_utils/props';
251251

252-
export type ButtonType =
253-
| 'default'
254-
| 'primary'
255-
| 'outline'
256-
| 'ghost'
257-
| 'link'
258-
| 'info'
259-
| 'danger'
260-
| 'warning'
261-
| 'success';
252+
export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
253+
254+
export type ButtonColor = 'default' | 'primary' | 'info' | 'danger' | 'warning' | 'success';
262255

263256
export interface ButtonProps
264257
extends BaseProps,
265258
React.PropsWithRef<JSX.IntrinsicElements['button']> {
266-
btnType?: ButtonType;
259+
variant?: ButtonVariant;
260+
color?: ButtonColor;
267261
loading?: boolean;
268262
disabled?: boolean;
269263
block?: boolean;
@@ -275,7 +269,8 @@ export interface ButtonProps
275269
export interface ButtonGroupProps
276270
extends BaseProps,
277271
React.PropsWithRef<JSX.IntrinsicElements['div']> {
278-
btnType?: ButtonType;
272+
variant?: ButtonVariant;
273+
color?: ButtonColor;
279274
size?: SizeType;
280275
round?: boolean;
281276
disabled?: boolean;
@@ -1905,7 +1900,7 @@ export interface SpeedDialActionProps
19051900
### split-button
19061901
```typescript
19071902
import React from 'react';
1908-
import { ButtonGroupProps, ButtonType } from '../button/types';
1903+
import { ButtonColor, ButtonGroupProps, ButtonVariant } from '../button/types';
19091904
import { DropdownPlacement, DropdownTrigger } from '../dropdown/types';
19101905
import { MenuProps } from '../menu/types';
19111906
import { SizeType } from '../_utils/props';
@@ -1915,7 +1910,8 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'onClick'> {
19151910
loading?: boolean;
19161911
disabled?: boolean;
19171912
size?: SizeType;
1918-
btnType?: ButtonType;
1913+
variant?: ButtonVariant;
1914+
color?: ButtonColor;
19191915
overlay?: React.ReactElement<MenuProps>;
19201916
dropdownTrigger?: DropdownTrigger;
19211917
dropdownPlacement?: DropdownPlacement;
@@ -2562,4 +2558,3 @@ export interface WaterfallProps<T = any>
25622558
}
25632559

25642560
```
2565-

‎apps/docs/public/llms.txt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Components that accept sizes use: `'sm' | 'md' | 'lg'`
5959
## Components
6060

6161
### Foundation
62-
- **Button** — Trigger operations. Props: `btnType` (`'default'|'primary'|'outline'|'ghost'|'link'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
62+
- **Button** — Trigger operations. Props: `variant` (`'solid'|'outline'|'ghost'|'link'`), `color` (`'default'|'primary'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
6363
- **Image** — Display images with preview support.
6464
- **Link** — Styled anchor element.
6565
- **Typography** — Headings, body text, lists. Prefer `Heading`, `Text`, `Paragraph`; compatibility entrypoints: `Typography.Heading`, `Typography.Text`, `Typography.Paragraph`.
@@ -192,7 +192,7 @@ import { SearchIcon, CloseIcon } from '@tiny-design/icons';
192192
<Input />
193193
</Form.Item>
194194
<Form.Item>
195-
<Button btnType="primary" htmlType="submit">Submit</Button>
195+
<Button variant="solid" color="primary" htmlType="submit">Submit</Button>
196196
</Form.Item>
197197
</Form>
198198
```

0 commit comments

Comments
 (0)