Merge c65286e into a28644b

patternfly · Apr 11, 2024 · f8ea219 · f8ea219
2 parents a28644b + c65286e
commit f8ea219
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 35 deletions.
diff --git a/.changeset/remove-basetile.md b/.changeset/remove-basetile.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-tile>`: Removed `BaseTile` class. Reimplement (recommended) or extend `PfTile`.
diff --git a/elements/package.json b/elements/package.json
@@ -67,7 +67,6 @@
     "./pf-tabs/pf-tabs.js": "./pf-tabs/pf-tabs.js",
     "./pf-text-area/pf-text-area.js": "./pf-text-area/pf-text-area.js",
     "./pf-text-input/pf-text-input.js": "./pf-text-input/pf-text-input.js",
-    "./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",

diff --git a/elements/pf-tile/BaseTile.ts b/elements/pf-tile/BaseTile.ts
diff --git a/elements/pf-tile/pf-tile.ts b/elements/pf-tile/pf-tile.ts
@@ -1,9 +1,7 @@
-
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { BaseTile } from './BaseTile.js';
-
 import styles from './pf-tile.css';
 
 export type StackedSize = (
@@ -42,15 +40,31 @@ export type StackedSize = (
  * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
  * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
  * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
- * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
+ * @cssprop   {<length>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
  */
 @customElement('pf-tile')
-export class PfTile extends BaseTile {
+export class PfTile extends LitElement {
   static readonly styles = [styles];
 
   @property({ reflect: true, type: Boolean }) selected = false;
 
   @property({ reflect: true }) stacked?: StackedSize;
+
+  override render() {
+    return html`
+      <div part="header">
+        <div part="icon">
+          <slot id="icon" name="icon"></slot>
+        </div>
+        <div part="title">
+          <slot id="title" name="title"></slot>
+        </div>
+      </div>
+      <div part="body">
+        <slot id="body"></slot>
+      </div>
+    `;
+  }
 }
 
 declare global {