From d33d61765bcaf8b420ff6ff29c4bb425d567c238 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 16 Jan 2025 12:06:28 -0500
Subject: [PATCH] fix: better scope styles to prevent clashing styles with PF

---
 packages/module/src/catalog/QuickStartTile.scss          | 6 +++---
 packages/module/src/catalog/QuickStartTile.tsx           | 1 +
 packages/module/src/controller/QuickStartTaskHeader.scss | 9 +++------
 packages/module/src/controller/QuickStartTaskHeader.tsx  | 1 +
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/module/src/catalog/QuickStartTile.scss b/packages/module/src/catalog/QuickStartTile.scss
index 6dd6c93b..2bc82734 100644
--- a/packages/module/src/catalog/QuickStartTile.scss
+++ b/packages/module/src/catalog/QuickStartTile.scss
@@ -4,10 +4,10 @@
 
 // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
 // the icons would have a height and width of 0.
-.pf-v6-c-card__header-main .pf-v6-c-icon__content, {
+.pfext-catalog-item .pf-v6-c-card__header-main .pf-v6-c-icon__content {
   display: contents;
 }
 
-.pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
-  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth) !important;
+.pfext-catalog-item.pf-v6-c-card.pf-m-selectable::before, .pfext-catalog-item.pf-v6-c-card.pf-m-clickable::before {
+  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
 }
diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx
index 7fd7faf0..8604dd1f 100644
--- a/packages/module/src/catalog/QuickStartTile.tsx
+++ b/packages/module/src/catalog/QuickStartTile.tsx
@@ -137,6 +137,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       id={`${id}-catalog-tile`}
       style={{ height: '100%' }}
       data-testid={`qs-card-${camelize(displayName)}`}
+      className="pfext-catalog-item"
       {...(isActive && {
         isClickable: true,
         isSelectable: true,
diff --git a/packages/module/src/controller/QuickStartTaskHeader.scss b/packages/module/src/controller/QuickStartTaskHeader.scss
index 2a5caee4..f6936d6e 100644
--- a/packages/module/src/controller/QuickStartTaskHeader.scss
+++ b/packages/module/src/controller/QuickStartTaskHeader.scss
@@ -1,19 +1,16 @@
-button.pf-v6-c-wizard__nav-link {
+.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link {
   margin-bottom: var(--pf-t--global--spacer--md);
 }
-button.pf-v6-c-wizard__nav-link.pf-m-current {
+.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link.pf-m-current {
   --pf-v6-c-wizard__nav-link-main--BackgroundColor: transparent;
 }
-button.pf-v6-c-wizard__nav-link::before {
+.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link::before {
   background-color: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
   color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
   min-width: var(--pf-v6-c-wizard__nav-link--before--Width);
 }
 
 .pfext-quick-start-task-header {
-  button::before {
-    content: none;
-  }
 
   &__title {
     font-family: var(--pf-t--global--font--family--body);
diff --git a/packages/module/src/controller/QuickStartTaskHeader.tsx b/packages/module/src/controller/QuickStartTaskHeader.tsx
index 6067e821..284f0007 100644
--- a/packages/module/src/controller/QuickStartTaskHeader.tsx
+++ b/packages/module/src/controller/QuickStartTaskHeader.tsx
@@ -79,6 +79,7 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
       component="button"
       isCurrent={isActiveTask}
       status={status}
+      className="pfext-quick-start-task-header"
     >
       {children}
     </WizardNavItem>