From d912ffaeb7257f2da712a6cc4da254ccc099502e Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 19 Oct 2023 10:07:53 +0300
Subject: [PATCH] fix(badge)!: remove BaseBadge

Closes #2619
---
 .changeset/remove-basebadge.md    |  4 ++++
 elements/package.json             |  1 -
 elements/pf-badge/BaseBadge.css   |  6 ------
 elements/pf-badge/BaseBadge.ts    | 34 -------------------------------
 elements/pf-badge/pf-badge.css    |  4 ++++
 elements/pf-badge/pf-badge.ts     | 28 +++++++++++++++++++++----
 elements/pf-tooltip/pf-tooltip.ts |  1 -
 7 files changed, 32 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/remove-basebadge.md
 delete mode 100644 elements/pf-badge/BaseBadge.css
 delete mode 100644 elements/pf-badge/BaseBadge.ts

diff --git a/.changeset/remove-basebadge.md b/.changeset/remove-basebadge.md
new file mode 100644
index 0000000000..9aa1f1c36b
--- /dev/null
+++ b/.changeset/remove-basebadge.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-badge>`: Removed `BaseBadge` class. Reimplement (recommended) or extend `PfBadge`.
diff --git a/elements/package.json b/elements/package.json
index c3aa1d9874..164059ab9f 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -21,7 +21,6 @@
     "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
-    "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.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",
diff --git a/elements/pf-badge/BaseBadge.css b/elements/pf-badge/BaseBadge.css
deleted file mode 100644
index 859c924193..0000000000
--- a/elements/pf-badge/BaseBadge.css
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  position: relative;
-  white-space: nowrap;
-  text-align: center;
-  display: inline-block;
-}
\ No newline at end of file
diff --git a/elements/pf-badge/BaseBadge.ts b/elements/pf-badge/BaseBadge.ts
deleted file mode 100644
index 6f5783d496..0000000000
--- a/elements/pf-badge/BaseBadge.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { LitElement, html } from 'lit';
-
-import style from './BaseBadge.css';
-
-export abstract class BaseBadge extends LitElement {
-  static readonly styles = [style];
-
-  abstract state?: string;
-
-  /**
-   * Sets a numeric value for a badge.
-   *
-   * You can pair it with `threshold` attribute to add a `+` sign
-   * if the number exceeds the threshold value.
-   */
-  abstract number?: number;
-
-  /**
-   * Sets a threshold for the numeric value and adds `+` sign if
-   * the numeric value exceeds the threshold value.
-   */
-  abstract threshold?: number;
-
-  override render() {
-    const { threshold, number, textContent } = this;
-    const displayText =
-        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
-      : (number != null) ? number.toString()
-      : textContent ?? '';
-    return html`
-      <span>${displayText}</span>
-    `;
-  }
-}
diff --git a/elements/pf-badge/pf-badge.css b/elements/pf-badge/pf-badge.css
index 0814183957..6c0d4389c6 100644
--- a/elements/pf-badge/pf-badge.css
+++ b/elements/pf-badge/pf-badge.css
@@ -1,4 +1,8 @@
 :host {
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+  display: inline-block;
   border-radius: var(--pf-c-badge--BorderRadius,
     var(--pf-global--BorderRadius--lg, 180em));
   min-width: var(--pf-c-badge--MinWidth,
diff --git a/elements/pf-badge/pf-badge.ts b/elements/pf-badge/pf-badge.ts
index 7a1fd55b97..af5966c3b6 100644
--- a/elements/pf-badge/pf-badge.ts
+++ b/elements/pf-badge/pf-badge.ts
@@ -1,8 +1,7 @@
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { BaseBadge } from './BaseBadge.js';
-
 import styles from './pf-badge.css';
 
 /**
@@ -31,8 +30,8 @@ import styles from './pf-badge.css';
 
 
 @customElement('pf-badge')
-export class PfBadge extends BaseBadge {
-  static readonly styles = [...BaseBadge.styles, styles];
+export class PfBadge extends LitElement {
+  static readonly styles = [styles];
 
   /**
    * Denotes the state-of-affairs this badge represents
@@ -40,9 +39,30 @@ export class PfBadge extends BaseBadge {
    */
   @property({ reflect: true }) state?: 'unread' | 'read';
 
+  /**
+   * Sets a numeric value for a badge.
+   *
+   * You can pair it with `threshold` attribute to add a `+` sign
+   * if the number exceeds the threshold value.
+   */
   @property({ reflect: true, type: Number }) number?: number;
 
+  /**
+   * Sets a threshold for the numeric value and adds `+` sign if
+   * the numeric value exceeds the threshold value.
+   */
   @property({ reflect: true, type: Number }) threshold?: number;
+
+  override render() {
+    const { threshold, number, textContent } = this;
+    const displayText =
+        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
+      : (number != null) ? number.toString()
+      : textContent ?? '';
+    return html`
+      <span>${displayText}</span>
+    `;
+  }
 }
 
 declare global {
diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-tooltip/pf-tooltip.ts
index 33049e16a7..098607f42a 100644
--- a/elements/pf-tooltip/pf-tooltip.ts
+++ b/elements/pf-tooltip/pf-tooltip.ts
@@ -14,7 +14,6 @@ import { bound } from '@patternfly/pfe-core/decorators/bound.js';
 
 import { StringListConverter } from '@patternfly/pfe-core';
 
-
 import styles from './pf-tooltip.css';
 
 const EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];