fix: better scope styles to prevent clashing styles with PF

Author: nicolethoen

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);
 }

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,

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);

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>