Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 88b7167

Browse files
touficbatachelynnmercier
authored andcommitted
fix(dialog): Fix z-index & wrong CSS (#1094)
Resolves #1095 #1096
1 parent bb61827 commit 88b7167

File tree

3 files changed

+37
-6
lines changed

3 files changed

+37
-6
lines changed

demos/dialog.html

+31-1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,29 @@ <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
113113
</div>
114114
<div class="mdc-dialog__backdrop"></div>
115115
</aside>
116+
117+
<aside id="mdc-dialog-colored-footer-buttons"
118+
class="mdc-dialog"
119+
role="alertdialog"
120+
aria-hidden="true"
121+
aria-labelledby="mdc-dialog-colored-footer-button-label"
122+
aria-describedby="mdc-dialog-colored-footer-button-description">
123+
<div class="mdc-dialog__surface">
124+
<header class="mdc-dialog__header">
125+
<h2 id="mdc-dialog-colored-footer-button-label" class="mdc-dialog__header__title">
126+
Use Google's location service?
127+
</h2>
128+
</header>
129+
<section id="mdc-dialog-colored-footer-button-description" class="mdc-dialog__body">
130+
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
131+
</section>
132+
<footer class="mdc-dialog__footer">
133+
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
134+
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept mdc-dialog__action">Accept</button>
135+
</footer>
136+
</div>
137+
<div class="mdc-dialog__backdrop"></div>
138+
</aside>
116139

117140
<aside id="mdc-dialog-with-list"
118141
class="mdc-dialog"
@@ -151,6 +174,7 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
151174
</div>
152175
<section class="example">
153176
<button id="default-dialog-activation" class="mdc-button mdc-button--primary mdc-button--raised">Show Dialog</button>
177+
<button id="colored-footer-button-dialog-activation" class="mdc-button mdc-button--primary mdc-button--raised">Show Colored Footer Button Dialog</button>
154178
<button id="dialog-with-list-activation" class="mdc-button mdc-button--primary mdc-button--raised">Show Scrolling Dialog</button>
155179
<div class="mdc-form-field">
156180
<div class="mdc-checkbox">
@@ -234,7 +258,12 @@ <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
234258
document.querySelector('#dialog-with-list-activation').addEventListener('click', function (evt) {
235259
dialogScrollable.lastFocusedTarget = evt.target;
236260
dialogScrollable.show();
237-
});
261+
});
262+
var dialogColoredButton = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-colored-footer-buttons'));
263+
document.querySelector('#colored-footer-button-dialog-activation').addEventListener('click', function (evt) {
264+
dialogColoredButton.lastFocusedTarget = evt.target;
265+
dialogColoredButton.show();
266+
});
238267
})();
239268
</script>
240269
<script>
@@ -255,6 +284,7 @@ <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
255284
setTimeout(function() {
256285
mdc.ripple.MDCRipple.attachTo(document.querySelector('#default-dialog-activation'));
257286
mdc.ripple.MDCRipple.attachTo(document.querySelector('#dialog-with-list-activation'));
287+
mdc.ripple.MDCRipple.attachTo(document.querySelector('#colored-footer-button-dialog-activation'));
258288
}, 200);
259289
})();
260290
</script>

packages/mdc-dialog/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,14 @@ They only need to match the values set for their corresponding aria attributes.
116116

117117
Dialog actions use system colors by default, but you can use a contrasting color, such as the palette’s secondary color, to distinguish dialog actions from dialog content. To emphasize an action from other contents, add `mdc-dialog__action` to `mdc-button` to apply secondary color.
118118

119-
```
119+
```html
120120
<aside class="mdc-dialog">
121121
<div class="mdc-dialog__surface">
122122
<footer class="mdc-dialog__footer">
123123
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
124124
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept mdc-dialog__action">Accept</button>
125125
</footer>
126+
 </div>
126127
</aside>
127128
```
128129

packages/mdc-dialog/mdc-dialog.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
3939
width: 100%;
4040
height: 100%;
4141
visibility: hidden;
42-
z-index: 2;
42+
z-index: 5;
4343

4444
&__backdrop {
4545
position: fixed;
@@ -141,10 +141,10 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
141141
@include mdc-rtl-reflexive-box(margin, right, 0);
142142
}
143143
}
144+
}
144145

145-
&__action {
146-
@include mdc-theme-prop(color, secondary);
147-
}
146+
&__action {
147+
@include mdc-theme-prop(color, secondary);
148148
}
149149

150150
// TODO: Replace with breakpoint variable

0 commit comments

Comments
 (0)