Skip to content

Commit 836b5e8

Browse files
bennypowersrlahodazeroedin
committed
feat(clipboard)!: migrate pfe-clipboard to lit
**Features** - updated size of copy icon for Safari display (#1824) **Fixes** - hide deprecated slot when not in use - add CopiedEvent - rename `pfeEvent` to `deprecatedCustomEvent` - add {{version}} to element classes **Tests** - e2e tests with page object model - build demo with optional shadowroot **Docs** - rearrange docs urls - inline docs - fix a11y bugs in demo - use pfe-styles - add changeset Co-Authored-By: Rob Lahoda <[email protected]> Co-Authored-By: Steven Spriggs <[email protected]>
1 parent af1020a commit 836b5e8

20 files changed

+1000
-1128
lines changed

‎.changeset/clipboard.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@patternfly/pfe-clipboard": major
3+
---
4+
5+
## 🔥 Migrate to Lit
6+
7+
This release migrates `<pfe-clipboard>` to LitElement.
8+
9+
### Breaking Changes
10+
- Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
11+
If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
12+
- Deprecates `text` slot (use `label`) and `text--success` (use `success`) slots
13+
- Deprecates `pfe-clipboard:connected` event (use `await el.updateComplete`)
14+
- Deprecates `pfe-clipboard:copied` event (use `copied`)
15+
16+
17+
See [docs](https://patternflyelements.org/components/clipboard/) for more info

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