diff --git a/.changeset/remove-base-clipboard-copy.md b/.changeset/remove-base-clipboard-copy.md new file mode 100644 index 0000000000..dc2cbd20a0 --- /dev/null +++ b/.changeset/remove-base-clipboard-copy.md @@ -0,0 +1,5 @@ +--- +"@patternfly/elements": major +--- +``: Removed `BaseClipboardCopy` class. Reimplement (recommended) or extend `PfClipboardCopy`. + diff --git a/elements/package.json b/elements/package.json index 357d3d1111..f688ae6835 100644 --- a/elements/package.json +++ b/elements/package.json @@ -28,7 +28,6 @@ "./pf-card/pf-card.js": "./pf-card/pf-card.js", "./pf-chip/pf-chip.js": "./pf-chip/pf-chip.js", "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js", - "./pf-clipboard-copy/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js", "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js", "./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js", "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js", diff --git a/elements/pf-clipboard-copy/BaseClipboardCopy.css b/elements/pf-clipboard-copy/BaseClipboardCopy.css deleted file mode 100644 index a90e4b1cad..0000000000 --- a/elements/pf-clipboard-copy/BaseClipboardCopy.css +++ /dev/null @@ -1,6 +0,0 @@ -[hidden], -[inert], -[inert]::slotted(*) { - display: none !important; -} - diff --git a/elements/pf-clipboard-copy/BaseClipboardCopy.ts b/elements/pf-clipboard-copy/BaseClipboardCopy.ts deleted file mode 100644 index 5dfcdc0b69..0000000000 --- a/elements/pf-clipboard-copy/BaseClipboardCopy.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { LitElement } from 'lit'; -import { ComposedEvent } from '@patternfly/pfe-core'; -import styles from './BaseClipboardCopy.css'; - -export class ClipboardCopyCopiedEvent extends ComposedEvent { - constructor( - public text: string - ) { - super('copy'); - } -} - -/** - * Clipboard Copy - * @slot - Place element content here - */ -export abstract class BaseClipboardCopy extends LitElement { - static readonly styles = [styles]; - - abstract value: string; - - /** - * Copy the current value to the clipboard. - */ - async copy() { - await navigator.clipboard.writeText(this.value); - this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value)); - } -} diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.css b/elements/pf-clipboard-copy/pf-clipboard-copy.css index 295220cc8a..c15223b0b2 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.css +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.css @@ -3,6 +3,12 @@ flex-direction: column; } +[hidden], +[inert], +[inert]::slotted(*) { + display: none !important; +} + #input-group, #wrapper, pf-tooltip, diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index d62525b97b..e04f163d13 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -1,11 +1,9 @@ -import { html } from 'lit'; +import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { BaseClipboardCopy } from './BaseClipboardCopy.js'; - import styles from './pf-clipboard-copy.css'; import '@patternfly/elements/pf-button/pf-button.js'; @@ -14,6 +12,12 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js'; const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); +export class ClipboardCopyCopiedEvent extends Event { + constructor(public text: string) { + super('copy', { bubbles: true }); + } +} + /** * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard. * @@ -21,44 +25,52 @@ const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); * @slot actions - Place additional action buttons here */ @customElement('pf-clipboard-copy') -export class PfClipboardCopy extends BaseClipboardCopy { - static readonly styles = [...BaseClipboardCopy.styles, styles]; +export class PfClipboardCopy extends LitElement { + static readonly styles = [styles]; - static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true }; + static shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; - @property({ attribute: 'click-tip' }) clickTip = 'Copied'; + /** Tooltip message to display when clicking the copy button */ + @property({ attribute: 'click-tip' }) clickTip = 'Successfully copied to clipboard!'; - @property({ attribute: 'hover-tip' }) hoverTip = 'Copy'; + /** Tooltip message to display when hover the copy button */ + @property({ attribute: 'hover-tip' }) hoverTip = 'Copy to clipboard'; - @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input'; + /** Accessible label to use on the text input. */ + @property({ attribute: 'accessible-text-label' }) accessibleTextLabel = 'Copyable input'; - @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content'; + /** Accessible label to use on the toggle button. */ + @property({ attribute: 'accessible-toggle-label' }) accessibleToggleLabel = 'Show content'; + /** Delay in ms before the tooltip appears. */ @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300; + /** Delay in ms before the tooltip disappears. */ @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500; + /** Flag to determine if inline clipboard copy should be block styling */ @property({ type: Boolean, reflect: true }) block = false; + /** Flag to determine if clipboard copy content includes code */ @property({ type: Boolean, reflect: true }) code = false; + /** Flag to determine if clipboard copy is in the expanded state */ @property({ type: Boolean, reflect: true }) expanded = false; - /** - * Implies not `inline`. - */ + /** Implies not `inline`. */ @property({ type: Boolean, reflect: true }) expandable = false; + /** Flag to show if the input is read only. */ @property({ type: Boolean, reflect: true }) readonly = false; - /** - * Implies not expandable. Overrules `expandable`. - */ + /** Implies not expandable. Overrules `expandable`. */ @property({ type: Boolean, reflect: true }) inline = false; + /** Flag to determine if inline clipboard copy should have compact styling */ @property({ type: Boolean, reflect: true }) compact = false; - @property() override value = ''; + /** String to copy */ + @property() value = ''; #copied = false; @@ -96,7 +108,7 @@ export class PfClipboardCopy extends BaseClipboardCopy { ?disabled="${expanded || readonly}" .value="${this.value}" @input="${this.#onChange}" - aria-label="${this.textAriaLabel}"> + aria-label="${this.accessibleTextLabel}">