Skip to content

Commit 732f65a

Browse files
LyndseyRLyndseycastastrophekylebuch8[ Cassondra ]
authored
fix: pfe-modal removing hidden attribute (#924)
* Added hidden attribute to pfe-modal.js * Added changelog * Added hidden attribute to pfe-modal demo page for testing * added test case * Update CHANGELOG-prerelease.md * Added test case to see that hidden attribute is removed from pfe-modal * Added test to verify modal windows open with hidden attribute applied to pfe-modal * Moved removing hidden attr from modal to inside the init function * Added remove attribute hidden to inside the trigger filing inside the init * Update elements/pfe-modal/test/pfe-modal_test.html Updated test case wording Co-authored-by: [ Cassondra ] <[email protected]> * updated comments in test case * Update CHANGELOG-prerelease.md * : Update changelog, remove shadow dom test from new AT Co-authored-by: Lyndsey <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Kyle Buchanan <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]>
1 parent b3f1e46 commit 732f65a

File tree

3 files changed

+85
-50
lines changed

3 files changed

+85
-50
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
## Prerelease 50 ( TBD )
22

3-
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-dropdown: remove preventDefault call on clicks outside of dropdown #915
4-
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Automerging PRs based on labels
3+
- [cf010c1](https://github.com/patternfly/patternfly-elements/commit/cf010c18c404e07d59eab775ee44552f52627bde) feat: Automerging PRs based on labels
4+
- [b3f1e46](https://github.com/patternfly/patternfly-elements/commit/b3f1e46fe401be3f09f361fcc3b284a87de3728e) fix: pfe-dropdown: remove preventDefault call on clicks outside of dropdown #915
5+
- [cf010c1](https://github.com/patternfly/patternfly-elements/commit/cf010c18c404e07d59eab775ee44552f52627bde) feat: Automerging PRs based on labels
56
- [775b821](https://github.com/patternfly/patternfly-elements/commit/775b821702c903f926b8bf9fdf9c948ac949335f) feat: Add automatic labeling to PRs
67
- [82bf8e6](https://github.com/patternfly/patternfly-elements/commit/82bf8e6a0d407a651571dac1e37d06a2b14fa3d4) feat: Move PR cards automatically in the Project when labels are changed
78
- [235e9a8](https://github.com/patternfly/patternfly-elements/commit/235e9a816b763dc9251e3022c914cba72f148368) fix: Move tab headings to the ShadowDOM
@@ -11,6 +12,7 @@
1112
- Update paths to built-in sets: (#723)
1213
- Storybook icon listing: (#728)
1314
- Icon panel storybook: (#719)
15+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-modal removing hidden attribute (#924)
1416

1517
## Prerelease 49 ( 2020-05-29 )
1618

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ class PfeModal extends PFElement {
9696

9797
if (this.trigger) {
9898
this.trigger.addEventListener("click", this.open);
99+
this.removeAttribute("hidden");
99100
}
100101

101102
if (this.header) {

‎elements/pfe-modal/test/pfe-modal_test.html‎

Lines changed: 80 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,91 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
6-
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
7-
<script src="/components/web-component-tester/browser.js"></script>
8-
<script type="module" src="../dist/pfe-modal.js"></script>
9-
</head>
10-
<body>
11-
<pfe-modal>
12-
<button slot="pfe-modal--trigger">Open the modal</button>
13-
<h2 slot="pfe-modal--header">Modal with a header</h2>
14-
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
15-
<pfe-cta>
16-
<a href="#bar">Learn more</a>
17-
</pfe-cta>
18-
</pfe-modal>
19-
<script>
20-
suite('<pfe-modal>', () => {
21-
test('it should upgrade pfe-modal', () => {
22-
assert.instanceOf(document.querySelector('pfe-modal'), customElements.get("pfe-modal", 'pfe-modal should be an instance of PfeModal'));
23-
});
243

25-
test('it should add the proper attributes to the modal window', () => {
26-
const pfeModal = document.querySelector('pfe-modal');
27-
const outer = pfeModal.shadowRoot.querySelector('.pfe-modal__outer');
28-
const modalWindow = pfeModal.shadowRoot.querySelector('.pfe-modal__window');
29-
const button = pfeModal.shadowRoot.querySelector('.pfe-modal__close');
30-
31-
assert.isTrue(pfeModal.hasAttribute('has_trigger'));
32-
assert.isTrue(pfeModal.hasAttribute('has_header'));
33-
assert.isTrue(pfeModal.hasAttribute('has_body'));
34-
assert.equal(modalWindow.getAttribute('tabindex'), '0');
35-
assert.isTrue(modalWindow.hasAttribute('hidden'));
36-
assert.equal(button.getAttribute('aria-label'), 'Close dialog');
37-
});
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7+
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
8+
<script src="/components/web-component-tester/browser.js"></script>
9+
<script type="module" src="../dist/pfe-modal.js"></script>
10+
</head>
3811

39-
test('it should open the modal window when the trigger is clicked', () => {
40-
const pfeModal = document.querySelector('pfe-modal');
41-
const modalWindow = pfeModal.shadowRoot.querySelector('.pfe-modal__window');
42-
const button = pfeModal.shadowRoot.querySelector('.pfe-modal__close');
43-
const trigger = pfeModal.querySelector('[slot=pfe-modal--trigger');
12+
<body>
13+
<pfe-modal>
14+
<button slot="pfe-modal--trigger">Open the modal</button>
15+
<h2 slot="pfe-modal--header">Modal with a header</h2>
16+
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut
17+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
18+
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
19+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
20+
est laborum.</p>
21+
<pfe-cta>
22+
<a href="#bar">Learn more</a>
23+
</pfe-cta>
24+
</pfe-modal>
4425

45-
trigger.click();
26+
<pfe-modal hidden>
27+
<button slot="pfe-modal--trigger">Verify modal opens with hidden attribute</button>
28+
<h2 slot="pfe-modal--header">Modal option 2</h2>
29+
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut
30+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
31+
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
32+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
33+
est laborum.</p>
34+
<pfe-cta>
35+
<a href="#bar">Learn more</a>
36+
</pfe-cta>
37+
</pfe-modal>
4638

47-
assert.isNotTrue(modalWindow.hasAttribute('hidden'));
39+
<script>
40+
suite('<pfe-modal>', () => {
41+
test('it should upgrade pfe-modal', () => {
42+
assert.instanceOf(document.querySelector('pfe-modal'), customElements.get("pfe-modal",
43+
'pfe-modal should be an instance of PfeModal'));
44+
});
4845

49-
// reset
50-
button.click();
51-
assert.isTrue(modalWindow.hasAttribute('hidden'));
52-
53-
});
46+
test('it should add the proper attributes to the modal window', () => {
47+
const pfeModal = document.querySelector('pfe-modal');
48+
const outer = pfeModal.shadowRoot.querySelector('.pfe-modal__outer');
49+
const modalWindow = pfeModal.shadowRoot.querySelector('.pfe-modal__window');
50+
const button = pfeModal.shadowRoot.querySelector('.pfe-modal__close');
51+
52+
assert.isTrue(pfeModal.hasAttribute('has_trigger'));
53+
assert.isTrue(pfeModal.hasAttribute('has_header'));
54+
assert.isTrue(pfeModal.hasAttribute('has_body'));
55+
assert.equal(modalWindow.getAttribute('tabindex'), '0');
56+
assert.isTrue(modalWindow.hasAttribute('hidden'));
57+
assert.equal(button.getAttribute('aria-label'), 'Close dialog');
58+
});
59+
60+
test('it should open the modal window when the trigger is clicked', () => {
61+
const pfeModal = document.querySelector('pfe-modal');
62+
const modalWindow = pfeModal.shadowRoot.querySelector('.pfe-modal__window');
63+
const button = pfeModal.shadowRoot.querySelector('.pfe-modal__close');
64+
const trigger = pfeModal.querySelector('[slot=pfe-modal--trigger');
65+
66+
trigger.click();
5467

68+
assert.isNotTrue(modalWindow.hasAttribute('hidden'));
5569

70+
// reset
71+
button.click();
72+
assert.isTrue(modalWindow.hasAttribute('hidden'));
73+
74+
});
75+
76+
test('it should remove the hidden attribute from the host on upgrade', done => {
77+
const pfeModal = document.querySelector('pfe-modal');
78+
79+
flush(() => {
80+
// test for the hidden attribute on the host
81+
assert.isNotTrue(pfeModal.hasAttribute('hidden'));
82+
done();
83+
});
5684
});
57-
</script>
58-
</body>
85+
86+
});
87+
88+
</script>
89+
</body>
90+
5991
</html>

0 commit comments

Comments
 (0)