test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: PageHeader extra gutter (#34428)

Browse Source
This commit is contained in:
afc163 2022-03-11 13:34:38 +08:00 committed by GitHub
parent 86415ef8a2
commit f987bd0479
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 658 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

736
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -58,30 +58,48 @@ Array [
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -272,30 +290,48 @@ Array [
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -620,252 +656,274 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span>
Operation
</span>
</button>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Operation
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
style="border:none;padding:0"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
style="font-size:20px;vertical-align:top"
>
<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>
<div <div
class="ant-dropdown" class="ant-space-item"
style="opacity:0;pointer-events:none" style="margin-right:8px"
> >
<ul <button
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light" class="ant-btn ant-btn-default"
data-menu-list="true" type="button"
role="menu"
tabindex="0"
> >
<li <span>
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" Operation
role="menuitem" </span>
tabindex="-1" </button>
> </div>
<span <div
class="ant-dropdown-menu-title-content" class="ant-space-item"
> style="margin-right:8px"
<a >
href="http://www.alipay.com/" <button
rel="noopener noreferrer" class="ant-btn ant-btn-default"
target="_blank" type="button"
>
1st menu item
</a>
</span>
</li>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<a
href="http://www.taobao.com/"
rel="noopener noreferrer"
target="_blank"
>
2nd menu item
</a>
</span>
</li>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<a
href="http://www.tmall.com/"
rel="noopener noreferrer"
target="_blank"
>
3rd menu item
</a>
</span>
</li>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</ul>
<div
aria-hidden="true"
style="display:none"
> >
<div> <span>
<div Operation
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" </span>
style="opacity:0;pointer-events:none" </button>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-icon-only ant-dropdown-trigger"
type="button"
>
<span
aria-label="more"
class="anticon anticon-more"
role="img"
style="font-size:20px"
>
<svg
aria-hidden="true"
data-icon="more"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
> >
<div <path
class="ant-tooltip-content" d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<div>
<div
class="ant-dropdown"
style="opacity:0;pointer-events:none"
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
role="menuitem"
tabindex="-1"
> >
<div <span
class="ant-tooltip-arrow" class="ant-dropdown-menu-title-content"
> >
<span <a
class="ant-tooltip-arrow-content" href="http://www.alipay.com/"
/> rel="noopener noreferrer"
</div> target="_blank"
>
1st menu item
</a>
</span>
</li>
<div>
<div <div
class="ant-tooltip-inner" class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
role="tooltip" style="opacity:0;pointer-events:none"
/> >
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div> </div>
</div> <li
</div> class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
<div> role="menuitem"
<div tabindex="-1"
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
> >
<div <span
class="ant-tooltip-arrow" class="ant-dropdown-menu-title-content"
> >
<span <a
class="ant-tooltip-arrow-content" href="http://www.taobao.com/"
/> rel="noopener noreferrer"
</div> target="_blank"
>
2nd menu item
</a>
</span>
</li>
<div>
<div <div
class="ant-tooltip-inner" class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
role="tooltip" style="opacity:0;pointer-events:none"
/> >
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div> </div>
</div> <li
</div> class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
<div> role="menuitem"
<div tabindex="-1"
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
> >
<div <span
class="ant-tooltip-arrow" class="ant-dropdown-menu-title-content"
> >
<span <a
class="ant-tooltip-arrow-content" href="http://www.tmall.com/"
/> rel="noopener noreferrer"
</div> target="_blank"
>
3rd menu item
</a>
</span>
</li>
<div>
<div <div
class="ant-tooltip-inner" class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
role="tooltip" style="opacity:0;pointer-events:none"
/> >
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</ul>
<div
aria-hidden="true"
style="display:none"
>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
style="opacity:0;pointer-events:none"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1000,30 +1058,48 @@ exports[`renders ./components/page-header/demo/ghost.md extend context correctly
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -1208,30 +1284,48 @@ exports[`renders ./components/page-header/demo/responsive.md extend context corr
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div

372
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -58,30 +58,48 @@ Array [
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -272,30 +290,48 @@ Array [
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -620,56 +656,78 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Operation
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
style="border:none;padding:0"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
style="font-size:20px;vertical-align:top"
> >
<svg <button
aria-hidden="true" class="ant-btn ant-btn-default"
data-icon="ellipsis" type="button"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
> >
<path <span>
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" Operation
/> </span>
</svg> </button>
</span> </div>
</button> <div
class="ant-space-item"
style="margin-right:8px"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-icon-only ant-dropdown-trigger"
type="button"
>
<span
aria-label="more"
class="anticon anticon-more"
role="img"
style="font-size:20px"
>
<svg
aria-hidden="true"
data-icon="more"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -798,30 +856,48 @@ exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div
@ -1006,30 +1082,48 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
<span <span
class="ant-page-header-heading-extra" class="ant-page-header-heading-extra"
> >
<button <div
class="ant-btn ant-btn-default" class="ant-space ant-space-horizontal ant-space-align-center"
type="button"
> >
<span> <div
Operation class="ant-space-item"
</span> style="margin-right:8px"
</button> >
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
> >
<span> <span>
Operation Operation
</span> </span>
</button> </button>
<button </div>
class="ant-btn ant-btn-primary" <div
type="button" class="ant-space-item"
> style="margin-right:8px"
<span> >
Primary <button
</span> class="ant-btn ant-btn-default"
</button> type="button"
>
<span>
Operation
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
</span> </span>
</div> </div>
<div <div

18
components/page-header/demo/content.md
View File

@ -15,7 +15,7 @@ Show all props provided by PageHeader.
```jsx ```jsx
import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd'; import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons'; import { MoreOutlined } from '@ant-design/icons';
const { Paragraph } = Typography; const { Paragraph } = Typography;
@ -40,20 +40,8 @@ const menu = (
); );
const DropdownMenu = () => ( const DropdownMenu = () => (
<Dropdown key="more" overlay={menu}> <Dropdown key="more" overlay={menu} placement="bottomRight">
<Button <Button type="text" icon={<MoreOutlined style={{ fontSize: 20 }} />} />
style={{
border: 'none',
padding: 0,
}}
>
<EllipsisOutlined
style={{
fontSize: 20,
verticalAlign: 'top',
}}
/>
</Button>
</Dropdown> </Dropdown>
); );

7
components/page-header/index.tsx
View File

@ -8,6 +8,7 @@ import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-pr
import { TagType } from '../tag'; import { TagType } from '../tag';
import Breadcrumb, { BreadcrumbProps } from '../breadcrumb'; import Breadcrumb, { BreadcrumbProps } from '../breadcrumb';
import Avatar, { AvatarProps } from '../avatar'; import Avatar, { AvatarProps } from '../avatar';
import Space from '../space';
import TransButton from '../_util/transButton'; import TransButton from '../_util/transButton';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
@ -104,7 +105,11 @@ const renderTitle = (
{tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>} {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
</div> </div>
)} )}
{extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>} {extra && (
<span className={`${headingPrefixCls}-extra`}>
<Space>{extra}</Space>
</span>
)}
</div> </div>
); );
}; };

5
components/page-header/style/index.less
View File

@ -87,13 +87,8 @@
white-space: nowrap; white-space: nowrap;
> * { > * {
margin-left: @margin-sm;
white-space: unset; white-space: unset;
} }
> *:first-child {
margin-left: 0;
}
} }
} }

1
components/page-header/style/index.tsx
View File

@ -3,3 +3,4 @@ import './index.less';
// style dependencies // style dependencies
import '../../breadcrumb/style'; import '../../breadcrumb/style';
import '../../avatar/style'; import '../../avatar/style';
import '../../space/style';