fix: overlay 的 zIndex 属性改为 css 变量 (#1294)

jdf2e · Aug 10, 2023 · 69ee6b4 · 69ee6b4
1 parent 2f1c382
commit 69ee6b4
Show file tree

Hide file tree

Showing 25 changed files with 45 additions and 47 deletions.
diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap
diff --git a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Cascader change tab 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000;"
+    style="--nutui-overlay-zIndex: 1000;"
   />
   <div
     class="round nut-popup nut-popup-bottom "
@@ -87,7 +87,7 @@ exports[`Cascader change tab 2`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000;"
+    style="--nutui-overlay-zIndex: 1000;"
   />
   <div
     class="round nut-popup nut-popup-bottom "
@@ -178,7 +178,7 @@ exports[`Cascader visible true 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000;"
+    style="--nutui-overlay-zIndex: 1000;"
   />
   <div
     class="round nut-popup nut-popup-bottom "

diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md
@@ -187,7 +187,6 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-dialog-content-margin | dialog content margin | `20px 0` |
 | \--nutui-dialog-content-max-height | dialog content max height | `268px` |
 | \--nutui-dialog-content-line-height | dialog content line height | `16px` |
-| \--nutui-dialog-overlay-z-index | dialog overlay z-index | `$mask-z-index` |
 | \--nutui-dialog-overlay-background-color | dialog overlay background color | `$mask-color` |
 | \--nutui-dialog-outer-z-index | dialog outer z index | `$mask-content-z-index` |
 | \--nutui-dialog-outer-border-radius | dialog outer border radius | `20px` |

diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md
@@ -213,7 +213,6 @@ export default App;
 | \--nutui-dialog-content-margin | 对话框内容 margin | `20px 0` |
 | \--nutui-dialog-content-max-height | 对话框内容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 对话框内容行高 | `16px` |
-| \--nutui-dialog-overlay-z-index | 对话框蒙层的z-index值 | `$mask-z-index` |
 | \--nutui-dialog-overlay-background-color | 对话框蒙层背景色 | `$mask-color` |
 | \--nutui-dialog-outer-z-index | 对话框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-outer-border-radius | 对话框圆角 | `20px` |

diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md
@@ -166,7 +166,6 @@ export default App;
 | \--nutui-dialog-content-margin | 对话框内容 margin | `20px 0` |
 | \--nutui-dialog-content-max-height | 对话框内容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 对话框内容行高 | `16px` |
-| \--nutui-dialog-overlay-z-index | 对话框蒙层的z-index值 | `$mask-z-index` |
 | \--nutui-dialog-overlay-background-color | 对话框蒙层背景色 | `$mask-color` |
 | \--nutui-dialog-outer-z-index | 对话框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-outer-border-radius | 对话框圆角 | `20px` |

diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md
@@ -193,7 +193,6 @@ export default App;
 | \--nutui-dialog-content-margin | 對話框內容 margin | `20px 0` |
 | \--nutui-dialog-content-max-height | 對話框內容最大高度 | `268px` |
 | \--nutui-dialog-content-line-height | 對話框內容行高 | `16px` |
-| \--nutui-dialog-overlay-z-index | 對話框蒙層的z-index值 | `$mask-z-index` |
 | \--nutui-dialog-overlay-background-color | 對話框蒙層背景色 | `$mask-color` |
 | \--nutui-dialog-outer-z-index | 對話框的z-index | `$mask-content-z-index` |
 | \--nutui-dialog-outer-border-radius | 對話框圓角 | `20px` |

diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
@@ -94,7 +94,7 @@ export const FixedNav: FunctionComponent<
       {overlay && (
         <Overlay
           visible={visible}
-          zIndex={200}
+          style={{ '--nutui-overlay-zIndex': 200 }}
           onClick={() => onUpdateValue(false)}
         />
       )}

diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx
@@ -94,7 +94,7 @@ export const FixedNav: FunctionComponent<
       {overlay && (
         <Overlay
           visible={visible}
-          zIndex={200}
+          style={{ '--nutui-overlay-zIndex': 200 }}
           onClick={() => onUpdateValue(false)}
         />
       )}

diff --git a/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap b/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`should match custom snapshot 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000; background-color: rgba(0, 0, 0, 0);"
+    style="background-color: rgba(0, 0, 0, 0); --nutui-overlay-zIndex: 1000;"
   />
   <div
     class="nut-popup nut-popup-bottom "
@@ -197,7 +197,7 @@ exports[`should match snapshot 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000; background-color: rgba(0, 0, 0, 0);"
+    style="background-color: rgba(0, 0, 0, 0); --nutui-overlay-zIndex: 1000;"
   />
   <div
     class="nut-popup nut-popup-bottom "

diff --git a/src/packages/overlay/__tests__/__snapshots__/overlay.spec.tsx.snap b/src/packages/overlay/__tests__/__snapshots__/overlay.spec.tsx.snap
@@ -4,7 +4,6 @@ exports[`content test 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="z-index: 1000;"
   >
     <div
       class="wrapper"

diff --git a/src/packages/overlay/__tests__/overlay.spec.tsx b/src/packages/overlay/__tests__/overlay.spec.tsx
@@ -6,9 +6,20 @@ import { Overlay } from '../overlay'
 
 test('should change z-index when using z-index prop', () => {
   const { getByTestId } = render(
-    <Overlay data-testid="overlay-zindex" visible zIndex={99} />
+    <Overlay
+      data-testid="overlay-zindex"
+      visible
+      style={{ '--nutui-overlay-zIndex': 99 }}
+    />
   )
-  expect(getByTestId('overlay-zindex').style.zIndex).toBe('99')
+  // @ts-ignore
+  expect(getByTestId('overlay-zindex')).toMatchInlineSnapshot(`
+    <div
+      class="nut-overlay"
+      data-testid="overlay-zindex"
+      style="--nutui-overlay-zIndex: 99;"
+    />
+  `)
 })
 
 test('prop close-on-click-overlay test', () => {

diff --git a/src/packages/overlay/demo.taro.tsx b/src/packages/overlay/demo.taro.tsx
@@ -108,7 +108,7 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible}
             onClick={onClose}
-            zIndex={2020}
+            style={{ '--nutui-overlay-zIndex': 2020 }}
             afterShow={() => {
               console.log('afterShow')
             }}
@@ -123,9 +123,9 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible2}
             onClick={onClose2}
-            zIndex={2000}
             style={{
               backgroundColor: 'rgba(0, 0, 0, .2)',
+              '--nutui-overlay-zIndex': 2000,
             }}
           />
         </Cell>

diff --git a/src/packages/overlay/demo.tsx b/src/packages/overlay/demo.tsx
@@ -104,7 +104,7 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible}
             onClick={onClose}
-            zIndex={2020}
+            style={{ '--nutui-overlay-zIndex': 2020 }}
             afterShow={() => {
               console.log('afterShow')
             }}
@@ -122,9 +122,9 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible2}
             onClick={onClose2}
-            zIndex={2000}
             style={{
               backgroundColor: 'rgba(0, 0, 0, .2)',
+              '--nutui-overlay-zIndex': 2000,
             }}
           />
         </Cell>

diff --git a/src/packages/overlay/doc.en-US.md b/src/packages/overlay/doc.en-US.md
@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2000,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -248,7 +248,6 @@ export default App;
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | visible | Whether the current component is displayed | `boolean` | `false` |
-| zIndex | Mask hierarchy | `number` | `2000` |
 | duration | Animation duration, in ms | `number` | `300` |
 | lockScroll | Whether the background is locked | `boolean` | `true` |
 | closeOnOverlayClick | Tap Mask off | `boolean` | `true` |
@@ -265,6 +264,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Description | Default Value |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | Overlay background color | `$gray7` |
+| \--nutui-overlay-zIndex | z-index | `1000` |
 | \--nutui-overlay-content-bg-color | Mask layer nested content background color | `$gray6` |
 | \--nutui-overlay-content-color | Mask layer nested content font color | `$gray1` |
 | \--nutui-overlay-animation-duration| Mask layer nested content animation duration | `0.3s` |
diff --git a/src/packages/overlay/doc.md b/src/packages/overlay/doc.md
@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2020,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -248,7 +248,6 @@ export default App;
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 当前组件是否显示 | `boolean` | `false` |
-| zIndex | 遮罩层级 | `number` | `2000` |
 | duration | 动画时长，单位毫秒 | `number` | `300` |
 | lockScroll | 背景是否锁定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
@@ -265,6 +264,7 @@ export default App;
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩层背景颜色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩层嵌套内容背景颜色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩层嵌套内容字体颜色 | `$gray1` |
 | \--nutui-overlay-animation-duration| 遮罩层动画延时的时长 | `0.3s` |
diff --git a/src/packages/overlay/doc.taro.md b/src/packages/overlay/doc.taro.md
@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2020,}}
         lockScroll
         afterShow={() => {
           console.log('afterShow')
@@ -74,9 +74,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -249,7 +249,6 @@ export default App;
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 当前组件是否显示 | `boolean` | `false` |
-| zIndex | 遮罩层级 | `number` | `2000` |
 | duration | 动画时长，单位毫秒 | `number` | `300` |
 | lockScroll | 背景是否锁定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
@@ -266,6 +265,7 @@ export default App;
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩层背景颜色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩层嵌套内容背景颜色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩层嵌套内容字体颜色 | `$gray1` |
 | \--nutui-overlay-animation-duration| 遮罩层动画延时的时长 | `0.3s` |
diff --git a/src/packages/overlay/doc.zh-TW.md b/src/packages/overlay/doc.zh-TW.md
@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2000,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -247,7 +247,6 @@ export default App;
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | visible | 當前組件是否顯示 | `boolean` | `false` |
-| zIndex | 遮罩層級 | `number` | `2000` |
 | duration | 動畫時長，單位秒 | `number` | `0.3` |
 | lockScroll | 背景是否鎖定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否點擊遮罩關閉 | `boolean` | `true` |
@@ -264,5 +263,6 @@ export default App;
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩層背景顏色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩層嵌套內容背景顏色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩層嵌套內容字體顏色 | `$gray1` |
diff --git a/src/packages/overlay/overlay.scss b/src/packages/overlay/overlay.scss
@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   background: $overlay-bg-color;
+  z-index: $overlay-zIndex;
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;

diff --git a/src/packages/overlay/overlay.taro.tsx b/src/packages/overlay/overlay.taro.tsx
@@ -67,7 +67,6 @@ export const Overlay: FunctionComponent<
   const classes = classNames(className, classPrefix)
 
   const styles = {
-    zIndex,
     ...style,
   }
 

diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx
@@ -72,7 +72,6 @@ export const Overlay: FunctionComponent<
   const classes = classNames(className, classPrefix)
 
   const styles = {
-    zIndex,
     ...style,
   }
 

diff --git a/src/packages/popup/popup.taro.tsx b/src/packages/popup/popup.taro.tsx
@@ -111,7 +111,7 @@ export const Popup: FunctionComponent<
 
   const overlayStyles = {
     ...overlayStyle,
-    ...baseStyle,
+    '--nutui-overlay-zIndex': index,
   }
 
   const popStyles = {
@@ -257,7 +257,6 @@ export const Popup: FunctionComponent<
               className={overlayClassName}
               visible={innerVisible}
               closeOnOverlayClick={closeOnOverlayClick}
-              zIndex={zIndex}
               lockScroll={lockScroll}
               duration={duration}
               onClick={onHandleClickOverlay}

diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx
@@ -108,7 +108,7 @@ export const Popup: FunctionComponent<
 
   const overlayStyles = {
     ...overlayStyle,
-    ...baseStyle,
+    '--nutui-overlay-zIndex': index,
   }
 
   const popStyles = {

diff --git a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`timeselect props test 1`] = `"<div><div class=\\"nut-overlay\\" style=\\"z-index: 1000;\\"></div><div style=\\"width: 100%; height: 20%; z-index: 1000;\\" class=\\"round nut-popup nut-popup-bottom \\"><div class=\\"nut-popup__close-icon nut-popup__close-icon--top-right\\"><svg class=\\"nut-icon nut-icon-Close\\" style=\\"width: 12px; height: 12px;\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1026 1024\\" aria-labelledby=\\"Close\\" role=\\"presentation\\"><path d=\\"M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z\\" fill=\\"currentColor\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"nut-timeselect\\"><div class=\\"nut-timeselect__title\\">取件时间</div><div class=\\"nut-timeselect__content\\"><div class=\\"nut-timeselect__content-left\\"><div class=\\"nut-timepannel active\\">520</div><div class=\\"nut-timepannel\\">521</div></div><div class=\\"nut-timedetail\\"><span class=\\"nut-timedetail__item\\">09:00-10:00</span><span class=\\"nut-timedetail__item\\">10:00-11:00</span><span class=\\"nut-timedetail__item\\">11:00-12:00</span></div></div></div></div></div>"`;
+exports[`timeselect props test 1`] = `"<div><div class=\\"nut-overlay\\" style=\\"--nutui-overlay-zIndex: 1000;\\"></div><div style=\\"width: 100%; height: 20%; z-index: 1000;\\" class=\\"round nut-popup nut-popup-bottom \\"><div class=\\"nut-popup__close-icon nut-popup__close-icon--top-right\\"><svg class=\\"nut-icon nut-icon-Close\\" style=\\"width: 12px; height: 12px;\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1026 1024\\" aria-labelledby=\\"Close\\" role=\\"presentation\\"><path d=\\"M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z\\" fill=\\"currentColor\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"nut-timeselect\\"><div class=\\"nut-timeselect__title\\">取件时间</div><div class=\\"nut-timeselect__content\\"><div class=\\"nut-timeselect__content-left\\"><div class=\\"nut-timepannel active\\">520</div><div class=\\"nut-timepannel\\">521</div></div><div class=\\"nut-timedetail\\"><span class=\\"nut-timedetail__item\\">09:00-10:00</span><span class=\\"nut-timedetail__item\\">10:00-11:00</span><span class=\\"nut-timedetail__item\\">11:00-12:00</span></div></div></div></div></div>"`;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
@@ -811,6 +811,7 @@ $calendar-day-active-border-radius: var(
 
 //overlay（✅）
 $overlay-bg-color: var(--nutui-overlay-bg-color, $gray7) !default;
+$overlay-zIndex: var(--nutui-overlay-zIndex, 1000) !default;
 $overlay-content-bg-color: var(
   --nutui-overlay-content-bg-color,
   $gray6
@@ -1060,10 +1061,6 @@ $dialog-content-text-align: var(
   --nutui-dialog-content-text-align,
   center
 ) !default;
-$dialog-overlay-z-index: var(
-  --nutui-dialog-mask-z-index,
-  $mask-z-index
-) !default;
 $dialog-overlay-background-color: var(
   --nutui-dialog-mask-background-color,
   $mask-color