Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: feature merge master #45944

Merged
merged 9 commits into from
Nov 17, 2023
Merged

chore: feature merge master #45944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f0a2695
site(Header): increase z-index (#45890)
zbw-zbw Nov 15, 2023
2dda417
fix: disabled btn with link should not be focused (#45910)
MadCcc Nov 16, 2023
efbaf8d
chore: update Next.js docs (#45907)
li-jia-nan Nov 16, 2023
dd05e18
chore: add image to Next.js doc (#45929)
li-jia-nan Nov 17, 2023
29126fe
chore: script update (#45937)
zombieJ Nov 17, 2023
9078b2b
feat: export sider context from layout (#45916)
PeachScript Nov 17, 2023
dc25579
fix: zIndex miss of message (#45911)
zombieJ Nov 17, 2023
6cfbace
revert: menu token (#45939)
MadCcc Nov 17, 2023
ff462ad
Merge branch 'master' into feature-merge-master
MadCcc Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 32 additions & 5 deletions components/_util/__tests__/useZIndex.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,8 @@ describe('Test useZIndex hooks', () => {
);
render(<App />);
expect(fn).toHaveBeenLastCalledWith(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 3 +
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
consumerBaseZIndexOffset[key as ZIndexConsumer],
);
});
Expand Down Expand Up @@ -272,7 +273,7 @@ describe('Test useZIndex hooks', () => {
comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker
? 1000 + containerBaseZIndexOffset.Popover
? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer];
expect((comp as HTMLDivElement).style.zIndex).toBe(
String(
Expand All @@ -287,11 +288,12 @@ describe('Test useZIndex hooks', () => {
comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker
? 1000 + containerBaseZIndexOffset.Popover
? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer];
expect((comp as HTMLDivElement).style.zIndex).toBe(
String(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerOffset,
),
);
Expand All @@ -317,7 +319,8 @@ describe('Test useZIndex hooks', () => {

expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
String(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerBaseZIndexOffset[key as ZIndexConsumer],
),
);
Expand All @@ -328,4 +331,28 @@ describe('Test useZIndex hooks', () => {
});
});
});

it('Modal static func should always use max zIndex', async () => {
jest.useFakeTimers();

const instance = Modal.confirm({
title: 'bamboo',
content: 'little',
});

await waitFakeTimer();

expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
zIndex: '2000',
});

instance.destroy();

await waitFakeTimer();

// Clean up for static method
document.body.innerHTML = '';

jest.useRealTimers();
});
});
30 changes: 23 additions & 7 deletions components/_util/hooks/useZIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,23 @@ export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'T

export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';

// Z-Index control range
// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
// Popover: offset 50
// Notification: Container Max zIndex + componentOffset

const CONTAINER_OFFSET = 100;
const CONTAINER_OFFSET_MAX_COUNT = 10;

export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;

export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
Modal: 0,
Drawer: 0,
Popover: 70,
Popconfirm: 70,
Tooltip: 70,
Tour: 70,
Modal: CONTAINER_OFFSET,
Drawer: CONTAINER_OFFSET,
Popover: CONTAINER_OFFSET,
Popconfirm: CONTAINER_OFFSET,
Tooltip: CONTAINER_OFFSET,
Tour: CONTAINER_OFFSET,
};
export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
SelectLike: 50,
Expand All @@ -35,7 +45,13 @@ export function useZIndex(
const isContainer = isContainerType(componentType);
let zIndex = parentZIndex ?? 0;
if (isContainer) {
zIndex += token.zIndexPopupBase + containerBaseZIndexOffset[componentType];
zIndex +=
// Use preset token zIndex by default but not stack when has parent container
(parentZIndex ? 0 : token.zIndexPopupBase) +
// Container offset
containerBaseZIndexOffset[componentType];

zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
} else {
zIndex += consumerBaseZIndexOffset[componentType];
}
Expand Down
8 changes: 4 additions & 4 deletions components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,7 @@ Array [
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
>
<div
class="ant-tooltip-arrow"
Expand Down Expand Up @@ -822,7 +822,7 @@ Array [
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
>
<div
class="ant-tooltip-arrow"
Expand Down Expand Up @@ -948,7 +948,7 @@ Array [
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
>
<div
class="ant-tooltip-arrow"
Expand Down Expand Up @@ -1074,7 +1074,7 @@ Array [
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
>
<div
class="ant-tooltip-arrow"
Expand Down
4 changes: 4 additions & 0 deletions components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -898,6 +898,7 @@ Array [
<a
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
href="https://www.google.com"
tabindex="0"
>
<span
class="ant-btn-icon"
Expand Down Expand Up @@ -1072,6 +1073,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
<a
class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn"
tabindex="0"
>
<span>
Href Primary
Expand All @@ -1080,6 +1082,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
<a
class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn"
tabindex="-1"
>
<span>
Href Primary(disabled)
Expand Down Expand Up @@ -1550,6 +1553,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
<a
class="ant-btn ant-btn-default ant-btn-icon-only"
href="https://www.google.com"
tabindex="0"
>
<span
class="ant-btn-icon"
Expand Down
4 changes: 4 additions & 0 deletions components/button/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -805,6 +805,7 @@ Array [
<a
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
href="https://www.google.com"
tabindex="0"
>
<span
class="ant-btn-icon"
Expand Down Expand Up @@ -977,6 +978,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
<a
class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn"
tabindex="0"
>
<span>
Href Primary
Expand All @@ -985,6 +987,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
<a
class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn"
tabindex="-1"
>
<span>
Href Primary(disabled)
Expand Down Expand Up @@ -1375,6 +1378,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
<a
class="ant-btn ant-btn-default ant-btn-icon-only"
href="https://www.google.com"
tabindex="0"
>
<span
class="ant-btn-icon"
Expand Down
1 change: 1 addition & 0 deletions components/button/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,7 @@ exports[`Button should support link button 1`] = `
<a
class="ant-btn ant-btn-default"
href="https://ant.design"
tabindex="0"
target="_blank"
>
<span>
Expand Down
1 change: 1 addition & 0 deletions components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,7 @@ const InternalButton: React.ForwardRefRenderFunction<
style={fullStyle}
onClick={handleClick}
ref={buttonRef as React.Ref<HTMLAnchorElement>}
tabIndex={mergedDisabled ? -1 : 0}
>
{iconNode}
{kids}
Expand Down