Skip to content

Commit eb74cb8

Browse files
castastrophekylebuch8
castastrophe
and
kylebuch8
authored
feat: Update pfe-select to use new event emission format (#758) (#760)
* feat Update pfe-select to use new event emission format * feat Add debugging log to event function; tidy up demo page * feat Adjust case of option in string * using a lowercase "O" in the storybook file Co-authored-by: Kyle Buchanan <[email protected]>
1 parent 13f2c55 commit eb74cb8

File tree

5 files changed

+88
-51
lines changed

5 files changed

+88
-51
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## Prerelese 45 ( TBD )
2+
3+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: add event emission to pfe-select
4+
15
## Prerelease 44 ( 2020-04-02 )
26

37
Tag: [v1.0.0-prerelease.44](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.44)

‎elements/pfe-select/demo/index.html‎

Lines changed: 71 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,86 @@
44
<meta charset="utf-8">
55
<title>PatternFly Element | pfe-select Demo</title>
66

7-
<noscript>
8-
<link href="../../pfelement/dist/pfelement-noscript.min.css" rel="stylesheet">
9-
</noscript>
7+
<!-- Stylesheets for testing light DOM styles.
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
10+
-->
1011

11-
<link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
12+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
13+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
14+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
1215

1316
<!-- uncomment the es5-adapter if you're using the umd version -->
1417
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
1518
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
1619
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
17-
<script>require(['../dist/pfe-select.umd.js'])</script>
20+
21+
<script>
22+
require([
23+
'../../pfe-band/dist/pfe-band.umd.js',
24+
'../dist/pfe-select.umd.js'
25+
]);
26+
</script>
27+
28+
<noscript>
29+
<link href="../../pfelement/dist/pfelement-noscript.min.css" rel="stylesheet">
30+
</noscript>
31+
32+
<link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
33+
34+
<style>
35+
/* For demo only */
36+
label {
37+
font-size: 20px;
38+
font-weight: 800;
39+
}
40+
</style>
1841
</head>
1942
<body unresolved>
43+
<pfe-band>
44+
<h1 slot="pfe-band--header"><code>&lt;pfe-select&gt;</code></h1>
45+
<label for="example1">Example one</label>
46+
<pfe-select id="pfe-select-success">
47+
<select id="example1">
48+
<option disabled>Please select an option</option>
49+
<option value="1">One</option>
50+
<option value="2">Two</option>
51+
<option value="3">Three</option>
52+
</select>
53+
</pfe-select>
54+
<p slot="pfe-band--footer"><strong>Selected option:</strong> <span id="selectedOption"></span></p>
55+
</pfe-band>
2056

21-
<h1>&lt;pfe-select&gt;</h1>
22-
<label for="example1">Example one</label>
23-
<pfe-select id="pfe-select-success">
24-
<select id="example1">
25-
<option disabled>Please select an option</option>
26-
<option value="1">One</option>
27-
<option value="2">Two</option>
28-
<option value="3">Three</option>
29-
</select>
30-
</pfe-select>
31-
<p>Selected Option: <span id="selectedOption"></span></p>
57+
<pfe-band pfe-color="lighter">
58+
<h1 slot="pfe-band--header"><code>&lt;pfe-select&gt;</code> with error check using <code>pfe-invalid</code> attribute</h1>
59+
<label for="example2">Example two</label>
60+
<pfe-select id="pfe-select-error">
61+
<select id="example2">
62+
<option value="">Please select an option</option>
63+
<option value="1">One</option>
64+
<option value="2">Two</option>
65+
<option value="3">Three</option>
66+
</select>
67+
</pfe-select>
68+
</pfe-band>
3269

33-
<h1>&lt;pfe-select&gt; with error check using pfe-invalid attribute</h1>
34-
<label for="example2">Example two</label>
35-
<pfe-select id="pfe-select-error">
36-
<select id="example2">
37-
<option value="">Please select an option</option>
38-
<option value="1">One</option>
39-
<option value="2">Two</option>
40-
<option value="3">Three</option>
41-
</select>
42-
</pfe-select>
70+
<pfe-band pfe-color="lightest">
71+
<h1 slot="pfe-band--header"><code>&lt;pfe-select&gt;</code> with JS options and <code>&lt;select&gt;</code> element</h1>
72+
<p>In this case, the existing select element will be destroyed and options will be created through custom options array</p>
73+
<label for="example3">Example three</label>
74+
<pfe-select id="pfe-select-with-js-options">
75+
<select id="example3">
76+
<option value="1">One</option>
77+
<option value="2">Two</option>
78+
</select>
79+
</pfe-select>
80+
</pfe-band>
4381

44-
<h1>&lt;pfe-select&gt; with JS options and &lt;select&gt; element</h1>
45-
<p>In this case, the existing select element will be destroyed and options will be created through custom options array</p>
46-
<label for="example3">Example three</label>
47-
<pfe-select id="pfe-select-with-js-options">
48-
<select id="example3">
49-
<option value="1">One</option>
50-
<option value="2">Two</option>
51-
</select>
52-
</pfe-select>
53-
54-
<h1>&lt;pfe-select&gt; with only JS options</h1>
55-
<label for="example4">Example Four</label>
56-
<pfe-select id="pfe-select-with-js-options-only">
57-
</pfe-select>
82+
<pfe-band pfe-color="lighter">
83+
<h1 slot="pfe-band--header"><code>&lt;pfe-select&gt;</code> with only JS options</h1>
84+
<label for="example4">Example Four</label>
85+
<pfe-select id="pfe-select-with-js-options-only"></pfe-select>
86+
</pfe-band>
5887

5988
<script>
6089
let select = document.querySelector("#pfe-select-success");
@@ -75,7 +104,7 @@ <h1>&lt;pfe-select&gt; with only JS options</h1>
75104
customElements.whenDefined("pfe-select").then(function() {
76105
// Default Options
77106
selectWithJSOptions.pfeOptions = [
78-
{ text: "Please select an Option", value: "", selected: true },
107+
{ text: "Please select an option", value: "", selected: true },
79108
{ text: 'One', value: '1', selected: false },
80109
{ text: 'Two', value: '2', selected: false },
81110
{ text: 'Three', value: '3', selected: false}
@@ -89,13 +118,12 @@ <h1>&lt;pfe-select&gt; with only JS options</h1>
89118
customElements.whenDefined("pfe-select").then(function() {
90119
// Default Options
91120
selectWithJSOptionsOnly.pfeOptions = [
92-
{ text: "Please select an Option", value: "", selected: true },
121+
{ text: "Please select an option", value: "", selected: true },
93122
{ text: 'One', value: '1', selected: false },
94123
{ text: 'Two', value: '2', selected: false },
95124
{ text: 'Three', value: '3', selected: false}
96125
];
97126
});
98-
99127
</script>
100128
</body>
101129
</html>

‎elements/pfe-select/demo/pfe-select.story.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ stories.add(PfeSelect.tag, () => {
3030
let htmlOptions = "";
3131

3232
const defaultOptions = [
33-
{ text: "Please select an Option", value: "" },
33+
{ text: "Please select an option", value: "" },
3434
{ text: "One", value: "1" },
3535
{ text: "Two", value: "2" }
3636
];

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ class PfeSelect extends PFElement {
3939
this.querySelector("select").setAttribute("aria-invalid", invalidAttr);
4040
}
4141

42+
static get events() {
43+
return {
44+
change: `${this.tag}:change`
45+
};
46+
}
47+
4248
static get observedAttributes() {
4349
return ["pfe-invalid"];
4450
}
@@ -114,13 +120,11 @@ class PfeSelect extends PFElement {
114120
}
115121

116122
_inputChanged() {
117-
this.dispatchEvent(
118-
new CustomEvent(`${this.tag}:change`, {
119-
detail: { value: this._input.value },
120-
bubbles: true,
121-
composed: true
122-
})
123-
);
123+
this.emitEvent(PfeSelect.events.change, {
124+
detail: {
125+
value: this._input.value
126+
}
127+
});
124128
}
125129

126130
_modifyDOM() {

‎elements/pfelement/src/pfelement.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,7 @@ class PFElement extends HTMLElement {
396396
name,
397397
{ bubbles = true, cancelable = false, composed = false, detail = {} } = {}
398398
) {
399+
this.log(`Custom event: ${name}`);
399400
this.dispatchEvent(
400401
new CustomEvent(name, {
401402
bubbles,

0 commit comments

Comments
 (0)