From cb2e6bcf042a526b39fd54a8d977b583d727ddaf Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 19 Oct 2023 09:10:24 +0300
Subject: [PATCH] fix(tooltip)!: remove BaseTooltip

Closes #2615
---
 .changeset/remove-basetooltip.md    |  4 ++
 elements/package.json               |  1 -
 elements/pf-tooltip/BaseTooltip.css | 70 -----------------------------
 elements/pf-tooltip/BaseTooltip.ts  | 64 --------------------------
 4 files changed, 4 insertions(+), 135 deletions(-)
 create mode 100644 .changeset/remove-basetooltip.md
 delete mode 100644 elements/pf-tooltip/BaseTooltip.css
 delete mode 100644 elements/pf-tooltip/BaseTooltip.ts

diff --git a/.changeset/remove-basetooltip.md b/.changeset/remove-basetooltip.md
new file mode 100644
index 0000000000..e60835d22f
--- /dev/null
+++ b/.changeset/remove-basetooltip.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-tooltip>`: Removed `BaseTooltip` class. Reimplement (recommended) or extend `PfTooltip`.
diff --git a/elements/package.json b/elements/package.json
index 0cd47fe88f..5083f9be54 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -63,7 +63,6 @@
     "./pf-tile/BaseTile.js": "./pf-tile/BaseTile.js",
     "./pf-tile/pf-tile.js": "./pf-tile/pf-tile.js",
     "./pf-timestamp/pf-timestamp.js": "./pf-timestamp/pf-timestamp.js",
-    "./pf-tooltip/BaseTooltip.js": "./pf-tooltip/BaseTooltip.js",
     "./pf-tooltip/pf-tooltip.js": "./pf-tooltip/pf-tooltip.js",
     "./pf-popover/pf-popover.js": "./pf-popover/pf-popover.js",
     "./react/*": "./react/*"
diff --git a/elements/pf-tooltip/BaseTooltip.css b/elements/pf-tooltip/BaseTooltip.css
deleted file mode 100644
index 43a366a4f7..0000000000
--- a/elements/pf-tooltip/BaseTooltip.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:host {
-  display: inline;
-}
-
-
-#container {
-  display: inline-flex;
-  position: relative;
-  max-width: 100%;
-  --_floating-arrow-size: 0.5rem;
-}
-
-#tooltip,
-#tooltip::after {
-  position: absolute;
-}
-
-#tooltip {
-  display: block;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 10000;
-  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
-  text-align: center;
-  word-break: break-word;
-  translate: var(--_floating-content-translate);
-  max-width: calc(100vw - 10px);
-  width: max-content;
-  top: 0;
-  left: 0;
-  will-change: opacity;
-}
-
-#tooltip::after {
-  display: block;
-  content: '';
-  rotate: 45deg;
-  width: var(--_floating-arrow-size);
-  height: var(--_floating-arrow-size);
-  will-change: left top right bottom;
-}
-
-.open #tooltip {
-  opacity: 1;
-}
-
-/* LEFT */
-.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
-.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.left.start #tooltip::after    { top: var(--_floating-arrow-size); }
-.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }
-
-/* TOP */
-.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.top.start #tooltip::after     { left: var(--_floating-arrow-size); }
-.top.end #tooltip::after       { right: var(--_floating-arrow-size); }
-
-/* RIGHT */
-.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.right.start #tooltip::after   { top: var(--_floating-arrow-size); }
-.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }
-
-/* BOTTOM */
-.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }
-.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }
-
diff --git a/elements/pf-tooltip/BaseTooltip.ts b/elements/pf-tooltip/BaseTooltip.ts
deleted file mode 100644
index 0d6843f8f6..0000000000
--- a/elements/pf-tooltip/BaseTooltip.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
-
-import { LitElement, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
-
-import style from './BaseTooltip.css';
-
-const enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
-const exitEvents = ['focusout', 'blur', 'mouseleave'];
-
-/**
- * @deprecated - Will be removed in the next major version. Use FloatingDOMController
- */
-export abstract class BaseTooltip extends LitElement {
-  static readonly styles = [style];
-
-  abstract content?: string;
-
-  /** The position of the tooltip, relative to the invoking content */
-  abstract position?: Placement;
-
-  #float = new FloatingDOMController(this, {
-    content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),
-  });
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    enterEvents.forEach(evt => this.addEventListener(evt, this.show));
-    exitEvents.forEach(evt => this.addEventListener(evt, this.hide));
-  }
-
-  async show() {
-    await this.updateComplete;
-    const placement = this.position;
-    const offset =
-        !placement?.match(/top|bottom/) ? 15
-      : { mainAxis: 15, alignmentAxis: -4 };
-    await this.#float.show({ offset, placement });
-  }
-
-  async hide() {
-    await this.#float.hide();
-  }
-
-  override render() {
-    const { alignment, anchor, open, styles } = this.#float;
-
-    return html`
-      <div id="container"
-           style="${styleMap(styles)}"
-           class="${classMap({ open,
-                               [anchor]: !!anchor,
-                               [alignment]: !!alignment })}">
-        <slot id="invoker" role="tooltip" aria-labelledby="tooltip"></slot>
-        <slot id="tooltip"
-              name="content"
-              aria-hidden="${String(!open) as 'true' | 'false'}">${this.content}</slot>
-      </div>
-    `;
-  }
-}