fix(clipboard-copy)!: remove BaseClipboardCopy

Closes #2611

.changeset/remove-base-clipboard-copy.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": major
+---
+`<pf-clipboard-copy>`: Removed `BaseClipboardCopy` class. Reimplement (recommended) or extend `PfClipboardCopy`.
+

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",

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,

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,51 +12,65 @@ 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.
  *
  * @slot - Place content to copy here, or use the `value` attribute
  * @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}">
           <pf-tooltip>
             <pf-button id="copy-button"
                         plain
@@ -142,8 +154,12 @@ export class PfClipboardCopy extends BaseClipboardCopy {
     return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
   }
 
-  override async copy() {
-    await super.copy();
+  /**
+   * Copy the current value to the clipboard.
+   */
+  async copy() {
+    await navigator.clipboard.writeText(this.value);
+    this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));
     await sleep(this.entryDelay);
     this.#copied = true;
     this.requestUpdate();