Skip to content

Commit 5d13393

Browse files
chrisdo1chrisdo1
committed
US206196 renamed modal elements.
1 parent 44e10a3 commit 5d13393

File tree

3 files changed

+30
-26
lines changed

3 files changed

+30
-26
lines changed

‎elements/pfe-modal/src/pfe-modal.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<slot name="pfe-modal--trigger"></slot>
22
<section class="pfe-modal__outer" hidden>
33
<div class="pfe-modal__overlay"></div>
4-
<div class="pfe-modal__wrapper" tabindex="0" role="dialog" hidden>
4+
<div class="pfe-modal__window" tabindex="0" role="dialog" hidden>
55
<div class="pfe-modal__container">
6-
<slot name="pfe-modal--header"></slot>
7-
<slot></slot>
6+
<div class="pfe-modal__content">
7+
<slot name="pfe-modal--header"></slot>
8+
<slot></slot>
9+
</div>
10+
<button class="pfe-modal__close" aria-label="Close dialog">
11+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
12+
<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
13+
</svg>
14+
</button>
815
</div>
9-
<button class="pfe-modal__close" aria-label="Close dialog">
10-
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
11-
<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
12-
</svg>
13-
</button>
14-
1516
</div>
1617
</section>

‎elements/pfe-modal/src/pfe-modal.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ class PfeModal extends PFElement {
6767
this.openModal = this.openModal.bind(this);
6868
this.closeModal = this.closeModal.bind(this);
6969

70-
this._modalWrapper = this.shadowRoot.querySelector(`.${this.tag}__wrapper`);
70+
this._modalWindow = this.shadowRoot.querySelector(`.${this.tag}__window`);
7171
this._modalCloseButton = this.shadowRoot.querySelector(`.${this.tag}__close`);
7272
this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
7373
this._container = this.shadowRoot.querySelector(`.${this.tag}__container`);
@@ -123,16 +123,16 @@ class PfeModal extends PFElement {
123123

124124
if (this.header) {
125125
this.header.setAttribute("id", this.header_id);
126-
this._modalWrapper.setAttribute("aria-labelledby", this.header_id);
126+
this._modalWindow.setAttribute("aria-labelledby", this.header_id);
127127
} else {
128128
// @TODO Do something else to assign the label
129129
this._container.setAttribute("no_header", "");
130130
const headings = this.body.filter(el => el.tagName.startsWith("H"));
131131
if (headings.length > 0) {
132132
headings[0].setAttribute("id", this.header_id);
133-
this._modalWrapper.setAttribute("aria-labelledby", this.header_id);
133+
this._modalWindow.setAttribute("aria-labelledby", this.header_id);
134134
} else if (this.trigger) {
135-
this._modalWrapper.setAttribute("aria-label", this.trigger.innerText);
135+
this._modalWindow.setAttribute("aria-label", this.trigger.innerText);
136136
}
137137
}
138138

@@ -145,7 +145,7 @@ class PfeModal extends PFElement {
145145
case "Tab":
146146
if (event.target === this._modalCloseButton) {
147147
event.preventDefault();
148-
this._modalWrapper.focus();
148+
this._modalWindow.focus();
149149
}
150150
return;
151151
case "Escape":
@@ -164,15 +164,15 @@ class PfeModal extends PFElement {
164164
if(event.detail.open) {
165165
this.open = true;
166166
// Reveal the container and overlay
167-
this._modalWrapper.removeAttribute("hidden");
167+
this._modalWindow.removeAttribute("hidden");
168168
this._overlay.removeAttribute("hidden");
169169
this._outer.removeAttribute("hidden");
170170
// Set the focus to the container
171-
this._modalWrapper.focus();
171+
this._modalWindow.focus();
172172
} else {
173173
this.open = false;
174174
// Hide the container and overlay
175-
this._modalWrapper.setAttribute("hidden", true);
175+
this._modalWindow.setAttribute("hidden", true);
176176
this._overlay.setAttribute("hidden", true);
177177
this._outer.setAttribute("hidden", true);
178178
// Move focus back to the trigger element

‎elements/pfe-modal/src/pfe-modal.scss‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ $pfe-modal--breakpoint--medium: 640px;
5151
display: none;
5252
}
5353
}
54-
&__wrapper {
54+
&__window {
5555
position: relative;
5656
max-width: pfe-local(MaxWidth--mobile);
5757
min-width: pfe-local(MinWidth);
@@ -66,11 +66,8 @@ $pfe-modal--breakpoint--medium: 640px;
6666
}
6767
&__container {
6868
position: relative;
69-
padding: var(--pfe-modal--Padding--mobile);
7069
max-width: calc(100% - #{pfe-var(ui--element--size)});
71-
overflow-y: auto;
72-
overscroll-behavior: contain;
73-
max-height: pfe-local(MaxHeight);
70+
padding: var(--pfe-modal--Padding--mobile);
7471

7572
@media screen and (min-width: $pfe-modal--breakpoint--medium) {
7673
padding: pfe-local(Padding);
@@ -97,18 +94,24 @@ $pfe-modal--breakpoint--medium: 640px;
9794
}
9895
}
9996

97+
&__content {
98+
overflow-y: auto;
99+
overscroll-behavior: contain;
100+
max-height: pfe-local(MaxHeight);
101+
}
102+
100103
&__close {
101104
@include pfe-reset-button;
102105
position: absolute;
103-
top: calc(#{pfe-var(container-padding)} * .5);
104-
right: calc(#{pfe-var(container-padding)} * .5);
106+
top: calc(#{pfe-var(container-padding)} * .25);
107+
right: calc(#{pfe-var(container-padding)} * .25);
105108
cursor: pointer;
106109
line-height: .5;
107110
padding: pfe-var(container-padding);
108111

109112
@media screen and (min-width: $pfe-modal--breakpoint--medium) {
110-
top: calc(#{pfe-var(container-padding)} * .75);
111-
right: calc(#{pfe-var(container-padding)} * .75);
113+
top: #{pfe-var(container-padding)};
114+
right: #{pfe-var(container-padding)};
112115
}
113116

114117
> svg {

0 commit comments

Comments
 (0)