Merge branch 'master' into feature-merge-master

ant-design · Nov 17, 2023 · ff462ad · ff462ad
2 parents a1f77f3 + 6cfbace
commit ff462ad
Show file tree

Hide file tree

Showing 34 changed files with 273 additions and 1,060 deletions.
diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
@@ -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],
           );
         });
@@ -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(
@@ -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,
                 ),
               );
@@ -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],
               ),
             );
@@ -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();
+  });
 });
diff --git a/components/_util/hooks/useZIndex.tsx b/components/_util/hooks/useZIndex.tsx
@@ -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,
@@ -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];
   }

diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -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"
@@ -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
@@ -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)
@@ -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"

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -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"
@@ -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
@@ -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)
@@ -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"

diff --git a/components/button/__tests__/__snapshots__/index.test.tsx.snap b/components/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -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>

diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -265,6 +265,7 @@ const InternalButton: React.ForwardRefRenderFunction<
         style={fullStyle}
         onClick={handleClick}
         ref={buttonRef as React.Ref<HTMLAnchorElement>}
+        tabIndex={mergedDisabled ? -1 : 0}
       >
         {iconNode}
         {kids}