fix(badge)!: remove BaseBadge

Closes #2619

.changeset/remove-basebadge.md

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

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

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,

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,18 +30,39 @@ 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
    * Options include read and unread
    */
   @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 {

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'];