Merge pull request #76 from nicolethoen/fix_console_errors

fix: prevent console errors for read only badges in card actions
patternfly · Jan 13, 2025 · 330e740 · 330e740
2 parents ebd8588 + 602f9f6
commit 330e740
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 33 deletions.
diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css
@@ -2,6 +2,9 @@
   color: var(--pf-t--global--text--color--regular);
   text-decoration: none;
 }
+.ws-react-e-catalog-tile .pf-v6-c-card__header-main {
+  display: flex;
+}
 .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle {
   color: var(--pf-t--global--text--color--subtle);
   font-size: var(--pf-t--global--font--size--body--sm);

diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss
@@ -11,6 +11,10 @@
     text-decoration: none;
   }
 
+  .pf-v6-c-card__header-main {
+    display: flex;
+  }
+
   .pf-v6-c-card__actions {
     padding-left: 5px;
   }

diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx
@@ -119,7 +119,6 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
       >
         {(badges.length > 0 || iconImg || iconClass || icon || onClick || href) && (
           <CardHeader
-            actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }}
             selectableActions={ (onClick || href) && {
                 selectableActionId: id + '-input',
                 onClickAction: (e) => this.handleClick(e),
@@ -129,6 +128,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
           >
             {iconImg && <img className="catalog-tile-pf-icon" src={iconImg} alt={iconAlt} />}
             {!iconImg && (iconClass || icon) && <span className={`catalog-tile-pf-icon ${iconClass}`}>{icon}</span>}
+            {badges.length > 0 && this.renderBadges(badges)}
           </CardHeader>
         )}
         <CardTitle className="catalog-tile-pf-header">

diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`CatalogTile href renders properly 1`] = `
       class="pf-v6-c-card__header"
     >
       <div
-        class="pf-v6-c-card__actions pf-m-no-offset"
+        class="pf-v6-c-card__actions"
       >
         <div
           class="pf-v6-c-card__selectable-actions"
@@ -80,7 +80,7 @@ exports[`CatalogTile renders properly 1`] = `
         class="pf-v6-c-card__header"
       >
         <div
-          class="pf-v6-c-card__actions pf-m-no-offset"
+          class="pf-v6-c-card__header-main"
         >
           <div
             class="catalog-tile-pf-badge-container"
@@ -134,9 +134,6 @@ exports[`CatalogTile renders properly 1`] = `
             </span>
           </div>
         </div>
-        <div
-          class="pf-v6-c-card__header-main"
-        />
       </div>
       <div
         class="pf-v6-c-card__title"
@@ -189,7 +186,7 @@ exports[`CatalogTile renders properly 1`] = `
         class="pf-v6-c-card__header"
       >
         <div
-          class="pf-v6-c-card__actions pf-m-no-offset"
+          class="pf-v6-c-card__header-main"
         >
           <div
             class="catalog-tile-pf-badge-container"
@@ -252,9 +249,6 @@ exports[`CatalogTile renders properly 1`] = `
             </span>
           </div>
         </div>
-        <div
-          class="pf-v6-c-card__header-main"
-        />
       </div>
       <div
         class="pf-v6-c-card__title"
@@ -300,8 +294,11 @@ exports[`CatalogTile renders properly 1`] = `
         class="pf-v6-c-card__header"
       >
         <div
-          class="pf-v6-c-card__actions pf-m-no-offset"
+          class="pf-v6-c-card__header-main"
         >
+          <span
+            class="catalog-tile-pf-icon fa fa-codepen"
+          />
           <div
             class="catalog-tile-pf-badge-container"
           >
@@ -335,13 +332,6 @@ exports[`CatalogTile renders properly 1`] = `
             </span>
           </div>
         </div>
-        <div
-          class="pf-v6-c-card__header-main"
-        >
-          <span
-            class="catalog-tile-pf-icon fa fa-codepen"
-          />
-        </div>
       </div>
       <div
         class="pf-v6-c-card__title"
@@ -387,7 +377,21 @@ exports[`CatalogTile renders properly 1`] = `
         class="pf-v6-c-card__header"
       >
         <div
-          class="pf-v6-c-card__actions pf-m-no-offset"
+          class="pf-v6-c-card__actions"
+        >
+          <div
+            class="pf-v6-c-card__selectable-actions"
+          >
+            <button
+              aria-labelledby="tile-footer-test"
+              class="pf-v6-c-card__clickable-action"
+              id="tile-footer-test-input"
+              type="button"
+            />
+          </div>
+        </div>
+        <div
+          class="pf-v6-c-card__header-main"
         >
           <div
             class="catalog-tile-pf-badge-container"
@@ -421,20 +425,7 @@ exports[`CatalogTile renders properly 1`] = `
               </div>
             </span>
           </div>
-          <div
-            class="pf-v6-c-card__selectable-actions"
-          >
-            <button
-              aria-labelledby="tile-footer-test"
-              class="pf-v6-c-card__clickable-action"
-              id="tile-footer-test-input"
-              type="button"
-            />
-          </div>
         </div>
-        <div
-          class="pf-v6-c-card__header-main"
-        />
       </div>
       <div
         class="pf-v6-c-card__title"
@@ -500,7 +491,7 @@ exports[`CatalogTile renders properly 1`] = `
         class="pf-v6-c-card__header"
       >
         <div
-          class="pf-v6-c-card__actions pf-m-no-offset"
+          class="pf-v6-c-card__actions"
         >
           <div
             class="pf-v6-c-card__selectable-actions"