Skip to content

Commit a56f268

Browse files
kylebuch8castastropheeyevana[ Cassondra ]
authored
feat: pfe-button component (#837)
* feat: pfe-button component First pass at creating a button. * pfe-button readme, story, tests, and JS updates * adding code comments * first attempt at styling * Update elements/pfe-button/src/pfe-button.json Co-authored-by: [ Cassondra ] <[email protected]> * using denylistAttributes instead of blackListedAttributes * adding a React demo page * removing discovery and changelog documents * style: 💄 add button line-height * style: 💄 add button font-family * refactor: 🎨 interpolate variables expressions * refactor: 🎨 interpolate variables expressions * feat: 💄 add additional border vars * refactor: 🎨 interpolate, use new border vars, & cleanup * style: 💄 add correct bg color for control disabled state * refactor: 🎨 cleanup * fix: 🐛 add submit and button types to demo; tweak input style * feat: ✨ log click events in storybook * feat: use pf theme colors * using the pfe-var(line-height) variable * updating text in pfe-button test * Update pfe-button.scss Stylesheet suggestions; simplified the interpolation and reduced unnecessary selectors * Update pfe-button.scss Moved after to a region * fix: add custom click event to schema * fix: hover property overrides for variants * Bring in the extra PF colors we need to support the form styles * adding Wes and Ivana as contributors * updating pfe-page-status test because critical color has changed * adding react, vue, and e2e tests and updating baselines * adding button test index file Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Ivana Rodriguez <[email protected]> Co-authored-by: Ivana Rodriguez <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]>
1 parent 918e067 commit a56f268

30 files changed

+1507
-22
lines changed

‎docs/content/theme/color-palette.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ And finally, you’ll have colors for states such as error, warning, and success
110110

111111
```css
112112
:root {
113-
--pfe-color--feedback--critical: $pfe-color--red-600 !default;
114-
--pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;
115-
--pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;
113+
--pfe-color--feedback--critical: $pf-color-red-200 !default;
114+
--pfe-color--feedback--critical--lightest: $pf-color-red-50 !default;
115+
--pfe-color--feedback--critical--darkest: $pf-color-red-400 !default;
116116
}
117117
```

‎elements/pfe-button/LICENSE.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright 2020 Red Hat, Inc.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎elements/pfe-button/README.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# PatternFly Element | Button Element
2+
This component is a web component wrapper around a standard HTML Button Element.
3+
`<pfe-button>` is heavily influenced by the findings in this post: [Custom
4+
elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pfe-button>` to work like a normal
5+
HTML Button Element.
6+
7+
## Usage
8+
When using this component, you must provide a standard HTML Button Elements as
9+
the only light DOM child of `pfe-button`.
10+
11+
```html
12+
<pfe-button>
13+
<button>My Button</button>
14+
</pfe-button>
15+
```
16+
17+
### Accessibility
18+
`<pfe-button>` addresses the issues associated with typical implementations of
19+
web component buttons. When using a `<pfe-button>` in a `<form>` element, the
20+
`<pfe-button>` will function as a standard button in a `<form>`. You can expect
21+
the button to submit the form.
22+
23+
#### Disabled Attribute
24+
Adding the `disabled` attribute to either the `<pfe-button>` wrapper or the
25+
`<button>` element in the light DOM will disable the button.
26+
27+
```html
28+
<pfe-button disabled>
29+
<button>Submit</button>
30+
</pfe-button>
31+
```
32+
33+
Or
34+
35+
```html
36+
<pfe-button>
37+
<button disabled>Submit</button>
38+
</pfe-button>
39+
```
40+
41+
#### Type Attribute
42+
Using the `type` attribute works in the same fashion as the `disabled`
43+
attribute. You can add a `type` attribute to either the `<pfe-button>` wrapper
44+
or the `<button>` element in the light DOM.
45+
46+
```html
47+
<pfe-button type="button or reset or submit">
48+
<button>Submit</button>
49+
</pfe-button>
50+
```
51+
52+
Or
53+
54+
```html
55+
<pfe-button>
56+
<button type="button or reset or submit">Submit</button>
57+
</pfe-button>
58+
```
59+
60+
## Slots
61+
62+
None
63+
64+
## Attributes
65+
`disabled` (observed): Disables the button
66+
67+
`pfe-variant`: Changes the style of the button. Possible values are
68+
- primary (default)
69+
- secondary
70+
- tertiary
71+
- danger
72+
- control
73+
74+
## Events
75+
### pfe-button:click
76+
This event is fired when `<pfe-button>` is clicked and serves as a way to
77+
capture click events if necessary.
78+
79+
## Dev
80+
81+
`npm start`
82+
83+
## Test
84+
85+
`npm run test`
86+
87+
## Build
88+
89+
`npm run build`
90+
91+
## Demo
92+
93+
From the PFElements root directory, run:
94+
95+
`npm run demo`
96+
97+
## Code style
98+
99+
Button (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
100+
101+
[prettier]: https://github.com/prettier/prettier/
102+
[prettier-ed]: https://prettier.io/docs/en/editors.html
103+
[web-component-tester]: https://github.com/Polymer/web-component-tester

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

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<!DOCTYPE html>
2+
<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+
<title>PatternFly Element | pfe-button Demo</title>
7+
8+
<noscript>
9+
<link href="../../pfelement/dist/pfelement-noscript.min.css" rel="stylesheet">
10+
</noscript>
11+
12+
<link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
13+
14+
<!-- Stylesheets for testing light DOM styles.
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
17+
-->
18+
19+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
20+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
21+
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
22+
23+
<!-- uncomment the es5-adapter if you're using the umd version -->
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
25+
26+
<!-- Use webcomponents-loader when you are adding support for more modern browsers -->
27+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-loader.js"></script> -->
28+
29+
<!-- IE11 test: use bundle + require with umd files -->
30+
<!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->
31+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
32+
33+
<!-- Tests require pulling in the UMD version of the files -->
34+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
35+
36+
<script>require([
37+
"../dist/pfe-button.umd.js",
38+
"../../pfe-band/dist/pfe-band.umd.min.js"
39+
])</script>
40+
41+
<style>
42+
input[type="text"] {
43+
font-size: 16px;
44+
border: 1px solid #d2d2d2;
45+
border-radius: 3px;
46+
padding: 8px;
47+
width: 250px;
48+
line-height: 1.5;
49+
}
50+
51+
#disablers-container {
52+
display: flex;
53+
}
54+
55+
#disablers-container > div {
56+
display: flex;
57+
flex-direction: column;
58+
padding-right: 16px;
59+
}
60+
61+
#eventsBtn {
62+
margin-right: 16px;
63+
}
64+
</style>
65+
</head>
66+
<body unresolved>
67+
<pfe-band pfe-color="lightest">
68+
<header slot="pfe-band--header">
69+
<h2>&lt;pfe-button&gt;</h2>
70+
</header>
71+
<article>
72+
<pfe-button>
73+
<div>fjkdsla</div>
74+
</pfe-button>
75+
<pfe-button></pfe-button>
76+
<pfe-button>
77+
<button>Primary</button>
78+
</pfe-button>
79+
<pfe-button pfe-variant="secondary">
80+
<button>Secondary</button>
81+
</pfe-button>
82+
<pfe-button pfe-variant="tertiary">
83+
<button>Tertiary</button>
84+
</pfe-button>
85+
<pfe-button pfe-variant="danger">
86+
<button>Danger</button>
87+
</pfe-button>
88+
<pfe-button pfe-variant="control">
89+
<button>Control</button>
90+
</pfe-button>
91+
</article>
92+
</pfe-band>
93+
94+
<pfe-band>
95+
<header slot="pfe-band--header">
96+
<h2>&lt;pfe-button&gt; in a form</h2>
97+
</header>
98+
<article>
99+
<h3>Submit a Form</h3>
100+
<form id="form">
101+
<input type="text" placeholder="Name" />
102+
<pfe-button>
103+
<button type="submit">Submit</button>
104+
</pfe-button>
105+
</form>
106+
<div id="formSubmittedMessage" hidden>The form was submitted</div>
107+
</article>
108+
<article>
109+
<h3>Reset a Form</h3>
110+
<form>
111+
<input type="text" placeholder="Fill out the input and hit reset">
112+
<pfe-button>
113+
<button type="reset">Reset</button>
114+
</pfe-button>
115+
</form>
116+
</article>
117+
</pfe-band>
118+
119+
<pfe-band pfe-color="lightest">
120+
<header slot="pfe-band--header">
121+
<h2>&lt;pfe-button&gt; Disabled</h2>
122+
</header>
123+
<article id="disablers-container">
124+
<div>
125+
<pfe-button>
126+
<button>Primary</button>
127+
</pfe-button>
128+
<label>
129+
<input type="checkbox"> Disable
130+
</label>
131+
</div>
132+
<div>
133+
<pfe-button pfe-variant="secondary">
134+
<button>Secondary</button>
135+
</pfe-button>
136+
<label>
137+
<input type="checkbox"> Disable
138+
</label>
139+
</div>
140+
<div>
141+
<pfe-button pfe-variant="tertiary">
142+
<button>Tertiary</button>
143+
</pfe-button>
144+
<label>
145+
<input type="checkbox"> Disable
146+
</label>
147+
</div>
148+
<div>
149+
<pfe-button pfe-variant="danger">
150+
<button>Danger</button>
151+
</pfe-button>
152+
<label>
153+
<input type="checkbox"> Disable
154+
</label>
155+
</div>
156+
<div>
157+
<pfe-button pfe-variant="control">
158+
<button>Control</button>
159+
</pfe-button>
160+
<label>
161+
<input type="checkbox"> Disable
162+
</label>
163+
</div>
164+
</article>
165+
</pfe-band>
166+
167+
<pfe-band>
168+
<header slot="pfe-band--header">
169+
<h2>&lt;pfe-button&gt; Events</h2>
170+
</header>
171+
<article>
172+
<p>Listening for the pfe-button:click event</p>
173+
<pfe-button id="eventsBtn">
174+
<button type="button">Click Me</button>
175+
</pfe-button>
176+
Total Clicks: <span id="totalClicks">0</span>
177+
<div>
178+
<label>
179+
<input id="eventsBtnDisableCheckbox" type="checkbox"> Disable
180+
</label>
181+
</div>
182+
</article>
183+
</pfe-band>
184+
185+
<pfe-band pfe-color="lightest">
186+
<header slot="pfe-band--header">
187+
<h2>&lt;pfe-button&gt; Dynamic text</h2>
188+
</header>
189+
<article>
190+
<input type="text" id="dynamicTextBtnInput" value="My Button">
191+
<pfe-button>
192+
<button id="dynamicTextBtn">My Button</button>
193+
</pfe-button>
194+
</article>
195+
</pfe-band>
196+
197+
<script>
198+
var form = document.querySelector("#form");
199+
var formSubmittedMessage = document.querySelector("#formSubmittedMessage");
200+
201+
form.addEventListener("submit", function (event) {
202+
event.preventDefault();
203+
formSubmittedMessage.removeAttribute("hidden");
204+
});
205+
206+
var disablers = document.querySelectorAll("#disablers-container input");
207+
208+
for (var i = 0; i < disablers.length; i++) {
209+
var disabler = disablers[i];
210+
211+
disabler.addEventListener("change", function (event) {
212+
var btn = this.parentElement.parentElement.querySelector("pfe-button");
213+
214+
if (this.checked) {
215+
btn.setAttribute("disabled", "");
216+
} else {
217+
btn.removeAttribute("disabled");
218+
}
219+
});
220+
}
221+
222+
var dynamicTextBtn = document.querySelector("#dynamicTextBtn");
223+
var dynamicTextBtnInput = document.querySelector("#dynamicTextBtnInput");
224+
225+
dynamicTextBtnInput.addEventListener("keyup", function (event) {
226+
dynamicTextBtn.textContent = dynamicTextBtnInput.value;
227+
});
228+
229+
var eventsBtn = document.querySelector("#eventsBtn");
230+
var totalClicksSpan = document.querySelector("#totalClicks");
231+
var totalClicks = 0;
232+
var eventsBtnDisableCheckbox = document.querySelector("#eventsBtnDisableCheckbox");
233+
234+
eventsBtn.addEventListener("pfe-button:click", function (event) {
235+
totalClicks++;
236+
totalClicksSpan.textContent = totalClicks;
237+
});
238+
239+
eventsBtnDisableCheckbox.addEventListener("change", function (event) {
240+
if (this.checked) {
241+
eventsBtn.setAttribute("disabled", "");
242+
} else {
243+
eventsBtn.removeAttribute("disabled");
244+
}
245+
});
246+
</script>
247+
</body>
248+
</html>

0 commit comments

Comments
 (0)