Skip to content

Commit ebafd64

Browse files
bennypowersrlahoda
bennypowers
and
rlahoda
committed
feat(clipboard)!: migrate pfe-clipboard to lit
fix(clipboard): hide deprecated slot when not in use fix(clipboard): add CopiedEvent feat(clipboard): Updated size of copy icon for Safari display (#1824) style(clipboard): lint style(pfe-clipboard): lint test(pfe-clipboard): e2e tests test(pfe-clipboard): e2e tests with page object model test(pfe-clipboard): build demo with optional shadowroot docs(pfe-clipboard): rearrange docs urls Co-authored-by: Rob Lahoda <[email protected]>
1 parent 3287d61 commit ebafd64

19 files changed

+982
-1116
lines changed

‎elements/pfe-clipboard/README.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ window.addEventListener('load', function() {
4444
### Override the link text
4545
```html
4646
<pfe-clipboard role="button" tabindex="0">
47-
<span slot="text">hey you, copy this url!</span>
47+
<span slot="label">hey you, copy this url!</span>
4848
</pfe-clipboard>
4949
```
5050

5151
### Override the copied notification text
5252
```html
5353
<pfe-clipboard role="button" tabindex="0">
54-
<span slot="text--success">URL Copied to clipboard</span>
54+
<span slot="success">URL Copied to clipboard</span>
5555
</pfe-clipboard>
5656
```
5757
### Override the icon
@@ -64,9 +64,9 @@ window.addEventListener('load', function() {
6464
## Override all slots
6565
```html
6666
<pfe-clipboard role="button" tabindex="0">
67-
<span slot="text">Copy this article URL</span>
68-
<span slot="text--success">URL Copied to clipboard</span>
69-
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
67+
<span slot="label">Copy this article URL</span>
68+
<span slot="success">URL Copied to clipboard</span>
69+
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
7070
</pfe-clipboard>
7171
```
7272

@@ -85,11 +85,9 @@ mouse clicks as well as enter and space key presses per the recommendation of
8585

8686
## Slots
8787

88-
- `text`: Optionally override the text of the button.
89-
88+
- `label`: Optionally override the text of the button.
9089
- `icon`: Optionally override the default link svg icon. You can inline svg `<svg slot="icon"></svg>` or use pfe-icon `<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>`.
91-
92-
- `text--success`: Optionally override the text of the success state which defaults to `Copied`.
90+
- `success`: Optionally override the text of the success state which defaults to `Copied`.
9391

9492
## Attributes
9593

@@ -128,7 +126,7 @@ Fires when the current url is successfully copied the user's system clipboard.
128126

129127
```
130128
detail: {
131-
url: String
129+
url: String
132130
}
133131
```
134132

‎elements/pfe-clipboard/custom-elements-manifest.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
2+
3+
export default pfeCustomElementsManifestConfig({
4+
globs: ['pfe-*.ts'],
5+
});

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

Lines changed: 0 additions & 157 deletions
This file was deleted.

‎elements/pfe-clipboard/demo/pfe-clipboard.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="stylesheet" href="/core/pfe-styles/red-hat-font.min.css">
4+
<link rel="stylesheet" href="/core/pfe-core/pfe.min.css">
5+
<link rel="stylesheet" href="/core/pfe-styles/pfe-vars.css">
6+
<link rel="stylesheet" href="/core/pfe-styles/pfe-base.css">
7+
<link rel="stylesheet" href="/core/pfe-styles/pfe-context.css">
8+
<link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.css">
9+
10+
<style>
11+
h2 {
12+
margin-top: 20px;
13+
margin-bottom: 0;
14+
}
15+
</style>
16+
17+
<pfe-band color="lightest">
18+
<p>This element embeds a copy url button on your site.</p>
19+
20+
<h2>Clipboard</h2>
21+
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
22+
23+
<h2>Clipboard with no icon</h2>
24+
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
25+
26+
<h2>Clipboard: with custom icon</h2>
27+
<pfe-clipboard role="button" tabindex="0">
28+
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
29+
</pfe-clipboard>
30+
31+
<h2>Clipboard: with custom text & copying text from element</h2>
32+
<pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
33+
<span slot="label">This will copy the text in the text field below!</span>
34+
<span slot="success">Making some copies!</span>
35+
</pfe-clipboard>
36+
<input type="text" id="textToCopy" value="This text will be copied!!11"></input>
37+
38+
<h2>Clipboard: Copying text from property</h2>
39+
<pfe-clipboard role="button" tabindex="0" copy-from="property" id="propertyCopy">
40+
</pfe-clipboard>
41+
42+
<h2>Clipboard: with custom success text duration.</h2>
43+
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
44+
</pfe-band>
45+
46+
<pfe-band color="darkest">
47+
<p>This element embeds a copy url button on your site.</p>
48+
49+
<h2>Clipboard</h2>
50+
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
51+
52+
<h2>Clipboard with no icon</h2>
53+
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
54+
55+
<h2>Clipboard: with custom icon</h2>
56+
<pfe-clipboard role="button" tabindex="0">
57+
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
58+
</pfe-clipboard>
59+
60+
<h2>Clipboard: with custom text</h2>
61+
<pfe-clipboard role="button" tabindex="0">
62+
<span slot="label">You can totally click to copy url</span>
63+
<span slot="success">Making some copies!</span>
64+
</pfe-clipboard>
65+
66+
<h2>Clipboard: with custom success text duration.</h2>
67+
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
68+
</pfe-band>
69+
70+
<pfe-band color="accent">
71+
<p>This element embeds a copy url button on your site.</p>
72+
73+
<h2>Clipboard</h2>
74+
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
75+
76+
<h2>Clipboard with no icon</h2>
77+
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
78+
79+
<h2>Clipboard: with custom icon</h2>
80+
<pfe-clipboard role="button" tabindex="0">
81+
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
82+
</pfe-clipboard>
83+
84+
<h2>Clipboard: with custom text</h2>
85+
<pfe-clipboard role="button" tabindex="0">
86+
<span slot="label">You can totally click to copy url</span>
87+
<span slot="success">Making some copies!</span>
88+
</pfe-clipboard>
89+
90+
<h2>Clipboard: with custom success text duration.</h2>
91+
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
92+
</pfe-band>
93+
94+
<pfe-band color="lightest">
95+
<h2>Error cases</h2>
96+
97+
<h3>Set to copy "property", but Property doesn't exist</h3>
98+
<pfe-clipboard role="button" tabindex="0" copy-from="property">
99+
<span slot="label">Oops, I didn't set the property to be copied</span>
100+
</pfe-clipboard>
101+
102+
<h3>Set to copy a non-existent selector</h3>
103+
<pfe-clipboard role="button" tabindex="0" copy-from="#wakka-wakka">
104+
<span slot="label">Oops, I didn't set a valid selector to be copied</span>
105+
</pfe-clipboard>
106+
107+
</pfe-band>
108+
109+
<pfe-band color="darkest">
110+
<pfe-clipboard role="button" tabindex="0" copy-from="property">
111+
<span slot="label">Oops, I didn't set the property to be copied</span>
112+
</pfe-clipboard>
113+
</pfe-band>

‎elements/pfe-clipboard/demo/pfe-clipboard.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import '@patternfly/pfe-band';
2+
import '@patternfly/pfe-clipboard';
3+
import '@patternfly/pfe-icon';
4+
5+
const root = document.querySelector('[data-demo="pfe-clipboard"]')?.shadowRoot ?? document;
6+
7+
root.getElementById('propertyCopy').contentToCopy = `
8+
<h2>Clipboard: with custom text & copying text from element</h2>
9+
<pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
10+
<span slot="text">This will copy the text in the text field below!</span>
11+
<span slot="success">Making some copies!</span>
12+
</pfe-clipboard>
13+
<input type="text" id="textToCopy" value="This text will be copied!!11"></input>
14+
`;

0 commit comments

Comments
 (0)