mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 19:39:51 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

fix(tabs): adjust nav add button style for correct size (#51935)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
Details
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
Details
✅ test / lint (push) Waiting to run
Details
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
Details
✅ test / test-node (push) Waiting to run
Details
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
Details
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
Details
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
Details
✅ test / test-coverage (push) Blocked by required conditions
Details
✅ test / build (push) Waiting to run
Details
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
Details
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Details

Browse Source 
* 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
This commit is contained in:
Jony J 2024-12-08 23:36:01 +08:00 committed by GitHub
parent 0f20012383
commit 40207c80a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 589 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5074,6 +5074,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
</div>
<div
class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card"
style="margin-bottom: 32px;"
>
<div
class="ant-tabs-nav"
@ -5208,6 +5209,279 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
>
<div
class="ant-tabs-nav"
role="tablist"
>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-list"
style="transform: translate(0px, 0px);"
>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"
data-node-key="1"
>
<div
aria-controls="rc-tabs-test-panel-1"
aria-selected="true"
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-1"
role="tab"
tabindex="0"
>
Tab 1
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove"
data-node-key="2"
>
<div
aria-controls="rc-tabs-test-panel-2"
aria-selected="false"
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-2"
role="tab"
tabindex="0"
>
Tab 2
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove"
data-node-key="3"
>
<div
aria-controls="rc-tabs-test-panel-3"
aria-selected="false"
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-3"
role="tab"
tabindex="0"
>
Tab 3
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<button
aria-label="Add tab"
class="ant-tabs-nav-add"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
>
<button
aria-controls="rc-tabs-test-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="rc-tabs-test-more"
style="visibility: hidden; order: 1;"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<div
class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tabs-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-menu-list="true"
id="rc-tabs-test-more-popup"
role="listbox"
tabindex="-1"
/>
<div
aria-hidden="true"
style="display: none;"
/>
</div>
<button
aria-label="Add tab"
class="ant-tabs-nav-add"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="false"
aria-labelledby="rc-tabs-test-tab-1"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
id="rc-tabs-test-panel-1"
role="tabpanel"
tabindex="0"
>
Content of editable tab 1
</div>
</div>
</div>
</div>
</div>
`;

249
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -3966,6 +3966,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
</div>
<div
class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card"
style="margin-bottom:32px"
>
<div
class="ant-tabs-nav"
@ -4075,6 +4076,254 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
>
<div
class="ant-tabs-nav"
role="tablist"
>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"
data-node-key="1"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 1
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove"
data-node-key="2"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<div
class="ant-tabs-tab ant-tabs-tab-with-remove"
data-node-key="3"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
type="button"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</button>
</div>
<button
aria-label="Add tab"
class="ant-tabs-nav-add"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<button
aria-label="Add tab"
class="ant-tabs-nav-add"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
tabindex="0"
>
Content of editable tab 1
</div>
</div>
</div>
</div>
</div>
`;

68
components/tabs/demo/size.tsx
View File

@ -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<SizeType>('small');
const [size, setSize] = useState<'small' | 'middle' | 'large'>('small');
const [activeKey, setActiveKey] = useState('1');
const [items, setItems] = useState<TabsProps['items']>([
{
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 = () => {
};
})}
/>
<Tabs
type="editable-card"
size={size}
activeKey={activeKey}
onChange={setActiveKey}
onEdit={onEdit}
items={items}
/>
</div>
);
};

3
components/tabs/style/index.ts
View File

@ -940,12 +940,11 @@ const genTabsStyle: GenerateStyle<TabsToken> = (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`,