fix(button)!: remove BaseButton (#2631)

.changeset/remove-basebutton.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-button>`: Removed `BaseButton` class. Reimplement (recommended) or extend `PfButton`.

elements/package.json

@@ -23,7 +23,6 @@
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
     "./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js",
     "./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js",
-    "./pf-button/BaseButton.js": "./pf-button/BaseButton.js",
     "./pf-button/pf-button.js": "./pf-button/pf-button.js",
     "./pf-card/BaseCard.js": "./pf-card/BaseCard.js",
     "./pf-card/pf-card.js": "./pf-card/pf-card.js",

elements/pf-button/pf-button.ts

@@ -143,26 +143,39 @@ export type ButtonVariant = (
 export class PfButton extends LitElement {
   static readonly formAssociated = true;
 
+  static override readonly shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   static readonly styles = [
     tokensStyles,
     iconStyles,
     styles,
   ];
 
-  /** Represents the state of a stateful button */
-  @property({ type: Boolean, reflect: true }) loading = false;
+  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';
 
-  /** Applies plain styles */
-  @property({ type: Boolean, reflect: true }) plain = false;
+  /** Accessible name for the button, use when the button does not have slotted text */
+  @property() label?: string;
 
-  /** Not as urgent as danger */
-  @property({ type: Boolean, reflect: true }) warning = false;
+  /** Form value for the button */
+  @property() value?: string;
+
+  /** Form element name for the button */
+  @property() name?: string;
+
+  /** Disables the button */
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Represents the state of a stateful button */
+  @property({ type: Boolean, reflect: true }) loading = false;
 
   /** Changes the size of the button. */
   @property({ reflect: true }) size?: 'small' | 'large';
 
-  /** Icon set for the `icon` property */
-  @property({ attribute: 'icon-set' }) iconSet?: string;
+  /** Not as urgent as danger */
+  @property({ type: Boolean, reflect: true }) warning = false;
 
   /**
    * Use danger buttons for actions a user can take that are potentially
@@ -171,6 +184,9 @@ export class PfButton extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) danger = false;
 
+  /** Applies plain styles */
+  @property({ type: Boolean, reflect: true }) plain = false;
+
   /**
    * Changes the style of the button.
    * - Primary: Used for the most important call to action on a page. Try to
@@ -187,21 +203,12 @@ export class PfButton extends LitElement {
 
   @property({ reflect: true, type: Boolean }) block = false;
 
-  /** Disables the button */
-  @property({ reflect: true, type: Boolean }) disabled = false;
-
-  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';
-
-  /** Accessible name for the button, use when the button does not have slotted text */
-  @property() label?: string;
-
-  @property() value?: string;
-
-  @property() name?: string;
-
   /** Shorthand for the `icon` slot, the value is icon name */
   @property() icon?: string;
 
+  /** Icon set for the `icon` property */
+  @property({ attribute: 'icon-set' }) iconSet?: string;
+
   #internals = InternalsController.of(this, { role: 'button' });
 
   #slots = new SlotController(this, 'icon', null);
@@ -222,7 +229,12 @@ export class PfButton extends LitElement {
     this.#internals.ariaDisabled = String(!!this.disabled);
   }
 
-  protected override render() {
+  async formDisabledCallback() {
+    await this.updateComplete;
+    this.requestUpdate();
+  }
+
+  override render() {
     const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');
     const { warning, variant, danger, loading, plain, inline, block, size } = this;
     const disabled = this.#disabled;
@@ -244,7 +256,7 @@ export class PfButton extends LitElement {
           <pf-icon role="presentation"
                    icon="${ifDefined(this.icon)}"
                    set="${ifDefined(this.iconSet)}"
-                   ?hidden="${!this.icon}"></pf-icon>
+                   ?hidden="${!this.icon || this.loading}"></pf-icon>
           <pf-spinner size="md"
                       ?hidden="${!this.loading}"
                       aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
@@ -254,11 +266,6 @@ export class PfButton extends LitElement {
     `;
   }
 
-  async formDisabledCallback() {
-    await this.updateComplete;
-    this.requestUpdate();
-  }
-
   #onClick() {
     if (!this.#disabled) {
       switch (this.type) {