From 40207c80a41fd59327ee40a7ab34cb276ee1ad0d Mon Sep 17 00:00:00 2001 From: Jony J <1844749591@qq.com> Date: Sun, 8 Dec 2024 23:36:01 +0800 Subject: [PATCH] fix(tabs): adjust nav add button style for correct size (#51935) * fix(tabs): adjust padding for nav add button * fix: lint fix * fix: lint fix * fix: lint fix * fix: lint fix * fix: lint fix * chore: adjust the used design token * docs(tabs): size demo improvement * test: update snapshot * test: update snapshot * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 274 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 249 ++++++++++++++++ components/tabs/demo/size.tsx | 68 ++++- components/tabs/style/index.ts | 3 +- 4 files changed, 589 insertions(+), 5 deletions(-) diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 96f441f665..df1ee0acd4 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5074,6 +5074,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
    + + +
+
+
+
+
+ Content of editable tab 1 +
+
+
+
`; diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index aae5df9174..0ee7f4734b 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -3966,6 +3966,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + +
+
+
+
+
+ Content of editable tab 1 +
+
+
+
`; diff --git a/components/tabs/demo/size.tsx b/components/tabs/demo/size.tsx index 86a0b8c469..754d643f2d 100644 --- a/components/tabs/demo/size.tsx +++ b/components/tabs/demo/size.tsx @@ -1,11 +1,64 @@ import React, { useState } from 'react'; -import type { ConfigProviderProps, RadioChangeEvent } from 'antd'; +import type { RadioChangeEvent, TabsProps } from 'antd'; import { Radio, Tabs } from 'antd'; -type SizeType = ConfigProviderProps['componentSize']; +type TargetKey = React.MouseEvent | React.KeyboardEvent | string; const App: React.FC = () => { - const [size, setSize] = useState('small'); + const [size, setSize] = useState<'small' | 'middle' | 'large'>('small'); + const [activeKey, setActiveKey] = useState('1'); + const [items, setItems] = useState([ + { + label: 'Tab 1', + key: '1', + children: 'Content of editable tab 1', + }, + { + label: 'Tab 2', + key: '2', + children: 'Content of editable tab 2', + }, + { + label: 'Tab 3', + key: '3', + children: 'Content of editable tab 3', + }, + ]); + + const add = () => { + const newKey = String((items || []).length + 1); + setItems([ + ...(items || []), + { + label: `Tab ${newKey}`, + key: newKey, + children: `Content of editable tab ${newKey}`, + }, + ]); + setActiveKey(newKey); + }; + + const remove = (targetKey: TargetKey) => { + if (!items) return; + const targetIndex = items.findIndex((item) => item.key === targetKey); + const newItems = items.filter((item) => item.key !== targetKey); + + if (newItems.length && targetKey === activeKey) { + const newActiveKey = + newItems[targetIndex === newItems.length ? targetIndex - 1 : targetIndex].key; + setActiveKey(newActiveKey); + } + + setItems(newItems); + }; + + const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => { + if (action === 'add') { + add(); + } else { + remove(targetKey); + } + }; const onChange = (e: RadioChangeEvent) => { setSize(e.target.value); @@ -35,6 +88,7 @@ const App: React.FC = () => { defaultActiveKey="1" type="card" size={size} + style={{ marginBottom: 32 }} items={new Array(3).fill(null).map((_, i) => { const id = String(i + 1); return { @@ -44,6 +98,14 @@ const App: React.FC = () => { }; })} /> + ); }; diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index 7d263bfe46..26b8344368 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -940,12 +940,11 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => [`${componentCls}-nav-add`]: { minWidth: cardHeight, - minHeight: cardHeight, marginLeft: { _skip_check_: true, value: cardGutter, }, - padding: `0 ${unit(token.paddingXS)}`, + padding: `${unit(token.paddingXS)}`, background: 'transparent', border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`, borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,