fix(icon)!: remove BaseIcon (#2636)

* fix(icon)!: remove BaseIcon Closes #2621 * docs: jsdoc * fix(icon): base styles * docs: addIconSet jsdoc Co-authored-by: Steven Spriggs <[email protected]> * docs: jsdoc for getIconUrl Co-authored-by: Steven Spriggs <[email protected]> * style: lint * fix: remove baseicon from bad merge --------- Co-authored-by: Steven Spriggs <[email protected]>
patternfly · Jun 2, 2024 · 222975b · 222975b
1 parent 6e96eb2
commit 222975b
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 205 deletions.
diff --git a/.changeset/remove-base-icon.md b/.changeset/remove-base-icon.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-icon>`: Removed `BaseIcon` class. Reimplement (recommended) or extend `PfIcon`.
diff --git a/elements/package.json b/elements/package.json
@@ -33,7 +33,6 @@
     "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.ts",
     "./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.ts",
     "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.ts",
-    "./pf-icon/BaseIcon.js": "./pf-icon/BaseIcon.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",

diff --git a/elements/pf-badge/pf-badge.ts b/elements/pf-badge/pf-badge.ts
@@ -6,24 +6,17 @@ import styles from './pf-badge.css';
 
 /**
  * A **badge** is used to annotate other information like a label or an object name.
- *
  * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}
- *
  * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}
- *
  * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}
  * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}
  * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}
- *
  * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}
  * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}
- *
  * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}
  * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}
- *
  * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}
  * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
  */

diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts
@@ -13,9 +13,7 @@ import style from './pf-card.css';
  * users to access more details. For example, in dashboards and catalog views, cards
  * function as a preview of a detailed page. Cards may also be used in data displays
  * like card views, or for positioning content on a page.
- *
  * @summary Gives a preview of information in a small layout
- *
  * @slot header
  *       When included, defines the contents of a card. Card headers can contain images as well as
  *       the title of a card and an actions menu represented by the right-aligned kebab.
@@ -28,12 +26,9 @@ import style from './pf-card.css';
  *         text and/or active content.
  * @slot footer
  *       Contains external links, actions, or static text at the bottom of a card.
- *
  * @csspart header - The container for *header* content
  * @csspart body - The container for *body* content
  * @csspart footer - The container for *footer* content
- *
- *
  * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}
  * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}
  * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}
@@ -71,13 +66,13 @@ export class PfCard extends LitElement {
   @property({ reflect: true }) size?: 'compact' | 'large';
 
   /**
-  * Optionally apply a border radius for the drop shadow and/or border.
-  */
+   * Optionally apply a border radius for the drop shadow and/or border.
+   */
   @property({ type: Boolean, reflect: true }) rounded = false;
 
   /**
- * Optionally allow the card to take up the full height of the parent element.
- */
+   * Optionally allow the card to take up the full height of the parent element.
+   */
   @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;
 
   /**

diff --git a/elements/pf-icon/BaseIcon.css b/elements/pf-icon/BaseIcon.css
diff --git a/elements/pf-icon/BaseIcon.ts b/elements/pf-icon/BaseIcon.ts
diff --git a/elements/pf-icon/pf-icon.css b/elements/pf-icon/pf-icon.css
@@ -1,3 +1,25 @@
+:host {
+  position: relative;
+  display:  inline-block;
+  line-height:  0;
+  height: fit-content !important;
+  width: fit-content !important;
+}
+
+#container {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  place-content: center;
+}
+
+#container.content ::slotted(*) {
+  display: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
 :host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }
 :host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }
 :host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }