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.

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

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

Merged
merged 5 commits into from
Aug 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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 "
Expand Down Expand Up @@ -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 "
Expand Down Expand Up @@ -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 "
Expand Down
1 change: 0 additions & 1 deletion src/packages/dialog/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
1 change: 0 additions & 1 deletion src/packages/dialog/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
1 change: 0 additions & 1 deletion src/packages/dialog/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
1 change: 0 additions & 1 deletion src/packages/dialog/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/fixednav/fixednav.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const FixedNav: FunctionComponent<
{overlay && (
<Overlay
visible={visible}
zIndex={200}
style={{ '--nutui-overlay-zIndex': 200 }}
onClick={() => onUpdateValue(false)}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/fixednav/fixednav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const FixedNav: FunctionComponent<
{overlay && (
<Overlay
visible={visible}
zIndex={200}
style={{ '--nutui-overlay-zIndex': 200 }}
onClick={() => onUpdateValue(false)}
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 "
Expand Down Expand Up @@ -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 "
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`content test 1`] = `
<div>
<div
class="nut-overlay"
style="z-index: 1000;"
>
<div
class="wrapper"
Expand Down
15 changes: 13 additions & 2 deletions src/packages/overlay/__tests__/overlay.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/packages/overlay/demo.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const OverlayDemo = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{ '--nutui-overlay-zIndex': 2020 }}
afterShow={() => {
console.log('afterShow')
}}
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/overlay/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const OverlayDemo = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{ '--nutui-overlay-zIndex': 2020 }}
afterShow={() => {
console.log('afterShow')
}}
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/packages/overlay/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{'--nutui-overlay-zIndex': 2000,}}
afterShow={() => {
console.log('afterShow')
}}
Expand Down Expand Up @@ -73,9 +73,9 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2000}
style={{
backgroundColor: 'rgba(0, 0, 0, .2)',
'--nutui-overlay-zIndex': 2000,
}}
/>
</>
Expand Down Expand Up @@ -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` |
Expand All @@ -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` |
6 changes: 3 additions & 3 deletions src/packages/overlay/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{'--nutui-overlay-zIndex': 2020,}}
afterShow={() => {
console.log('afterShow')
}}
Expand Down Expand Up @@ -73,9 +73,9 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2000}
style={{
backgroundColor: 'rgba(0, 0, 0, .2)',
'--nutui-overlay-zIndex': 2000,
}}
/>
</>
Expand Down Expand Up @@ -248,7 +248,6 @@ export default App;
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visible | 当前组件是否显示 | `boolean` | `false` |
| zIndex | 遮罩层级 | `number` | `2000` |
| duration | 动画时长,单位毫秒 | `number` | `300` |
| lockScroll | 背景是否锁定 | `boolean` | `true` |
| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
Expand All @@ -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` |
6 changes: 3 additions & 3 deletions src/packages/overlay/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{'--nutui-overlay-zIndex': 2020,}}
lockScroll
afterShow={() => {
console.log('afterShow')
Expand Down Expand Up @@ -74,9 +74,9 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2000}
style={{
backgroundColor: 'rgba(0, 0, 0, .2)',
'--nutui-overlay-zIndex': 2000,
}}
/>
</>
Expand Down Expand Up @@ -249,7 +249,6 @@ export default App;
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visible | 当前组件是否显示 | `boolean` | `false` |
| zIndex | 遮罩层级 | `number` | `2000` |
| duration | 动画时长,单位毫秒 | `number` | `300` |
| lockScroll | 背景是否锁定 | `boolean` | `true` |
| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
Expand All @@ -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` |
6 changes: 3 additions & 3 deletions src/packages/overlay/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2020}
style={{'--nutui-overlay-zIndex': 2000,}}
afterShow={() => {
console.log('afterShow')
}}
Expand Down Expand Up @@ -73,9 +73,9 @@ const App = () => {
<Overlay
visible={visible}
onClick={onClose}
zIndex={2000}
style={{
backgroundColor: 'rgba(0, 0, 0, .2)',
'--nutui-overlay-zIndex': 2000,
}}
/>
</>
Expand Down Expand Up @@ -247,7 +247,6 @@ export default App;
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| visible | 當前組件是否顯示 | `boolean` | `false` |
| zIndex | 遮罩層級 | `number` | `2000` |
| duration | 動畫時長,單位秒 | `number` | `0.3` |
| lockScroll | 背景是否鎖定 | `boolean` | `true` |
| closeOnOverlayClick | 是否點擊遮罩關閉 | `boolean` | `true` |
Expand All @@ -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` |
1 change: 1 addition & 0 deletions src/packages/overlay/overlay.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
width: 100%;
height: 100%;
background: $overlay-bg-color;
z-index: $overlay-zIndex;
.wrapper {
.content {
background-color: $overlay-content-bg-color;
Expand Down
1 change: 0 additions & 1 deletion src/packages/overlay/overlay.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ export const Overlay: FunctionComponent<
const classes = classNames(className, classPrefix)

const styles = {
zIndex,
...style,
}

Expand Down
1 change: 0 additions & 1 deletion src/packages/overlay/overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export const Overlay: FunctionComponent<
const classes = classNames(className, classPrefix)

const styles = {
zIndex,
...style,
}

Expand Down
3 changes: 1 addition & 2 deletions src/packages/popup/popup.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const Popup: FunctionComponent<

const overlayStyles = {
...overlayStyle,
...baseStyle,
'--nutui-overlay-zIndex': index,
}

const popStyles = {
Expand Down Expand Up @@ -257,7 +257,6 @@ export const Popup: FunctionComponent<
className={overlayClassName}
visible={innerVisible}
closeOnOverlayClick={closeOnOverlayClick}
zIndex={zIndex}
lockScroll={lockScroll}
duration={duration}
onClick={onHandleClickOverlay}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/popup/popup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const Popup: FunctionComponent<

const overlayStyles = {
...overlayStyle,
...baseStyle,
'--nutui-overlay-zIndex': index,
}

const popStyles = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>"`;
5 changes: 1 addition & 4 deletions src/styles/variables-jmapp.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
Loading