From 1eee6d90ce9af53480aa692026d0411489cecbe0 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 28 Nov 2023 11:49:10 +0800 Subject: [PATCH] feat: Tab Item support icon prop (#46096) * feat: Tab Item support icon prop * Update package.json Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix style * Update components/tabs/style/index.ts Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/style/index.ts Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 12 ++++++++++-- .../tabs/__tests__/__snapshots__/demo.test.ts.snap | 12 ++++++++++-- components/tabs/demo/icon.tsx | 9 ++------- components/tabs/index.en-US.md | 1 + components/tabs/index.zh-CN.md | 1 + components/tabs/style/index.ts | 5 ++++- package.json | 2 +- 7 files changed, 29 insertions(+), 13 deletions(-) diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index b1f835a2b5c8..22386041682b 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3244,7 +3244,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = ` role="tab" tabindex="0" > - + + + Tab 1 @@ -3280,7 +3284,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = ` role="tab" tabindex="0" > - + + + Tab 2 diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index 35ea6062dc58..318ed33a8aa8 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -2709,7 +2709,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` role="tab" tabindex="0" > - + + + Tab 1 @@ -2745,7 +2749,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` role="tab" tabindex="0" > - + + + Tab 2 diff --git a/components/tabs/demo/icon.tsx b/components/tabs/demo/icon.tsx index 599618da0880..70bd0a199000 100644 --- a/components/tabs/demo/icon.tsx +++ b/components/tabs/demo/icon.tsx @@ -7,16 +7,11 @@ const App: React.FC = () => ( defaultActiveKey="2" items={[AppleOutlined, AndroidOutlined].map((Icon, i) => { const id = String(i + 1); - return { - label: ( - - - Tab {id} - - ), + label: Tab {id}, key: id, children: `Tab ${id}`, + icon: , }; })} /> diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 009848a7bf54..fced5e1c3670 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -82,6 +82,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs) | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | | key | TabPane's key | string | - | | | label | TabPane's head display text | ReactNode | - | | +| icon | TabPane's head display icon | ReactNode | - | 5.12.0 | | children | TabPane's head display content | ReactNode | - | | | closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 273fc46fe9bf..bbbd3b9490e2 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -84,6 +84,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | | key | 对应 activeKey | string | - | | | label | 选项卡头显示文字 | ReactNode | - | | +| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 | | children | 选项卡头显示内容 | ReactNode | - | | | closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true | | diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index a9ba7c13ba9f..9670fd30a4a9 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -691,6 +691,9 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { '&-btn': { outline: 'none', transition: 'all 0.3s', + [`${tabCls}-icon:not(:last-child)`]: { + marginInlineEnd: token.marginSM, + }, }, '&-remove': { flex: 'none', @@ -734,7 +737,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { [`& ${tabCls}-remove ${iconCls}`]: { margin: 0, }, - [iconCls]: { + [`${iconCls}:not(:last-child)`]: { marginRight: { _skip_check_: true, value: token.marginSM, diff --git a/package.json b/package.json index f7e84caf0d4f..c45719d662a9 100644 --- a/package.json +++ b/package.json @@ -151,7 +151,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.36.0", - "rc-tabs": "~12.13.1", + "rc-tabs": "~12.14.1", "rc-textarea": "~1.5.3", "rc-tooltip": "~6.1.2", "rc-tree": "~5.8.2",