@patternfly/quickstarts 5.3.0-prerelease.1 → 6.0.0-alpha.1

package/src/HelpTopicPanelContent.tsx

@@ -127,7 +127,7 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
               headingLevel="h1"
               size="xl"
               className="pfext-quick-start-panel-content__name"
-              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
+              style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
             >
               {activeHelpTopic?.title}
             </Title>

package/src/QuickStartCatalogPage.tsx

@@ -4,11 +4,9 @@ import {
   Divider,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   Text,
   EmptyStateFooter,
   EmptyStateActions,
-  EmptyStateHeader,
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
@@ -30,12 +28,7 @@ export interface QuickStartCatalogPageProps {
 export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
-    <EmptyState>
-      <EmptyStateHeader
-        titleText={<>{getResource('No results found')}</>}
-        icon={<EmptyStateIcon icon={SearchIcon} />}
-        headingLevel="h4"
-      />
+    <EmptyState  headingLevel="h4" icon={SearchIcon}  titleText={<>{getResource('No results found')}</>}>
       <EmptyStateBody>
         {getResource(
           'No results match the filter criteria. Remove filters or clear all filters to show results.',

package/src/QuickStartController.tsx

@@ -50,7 +50,7 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
     let activeTaskNumber = 0;
     while (
       activeTaskNumber !== totalTasks &&
-      activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS
+      activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT
     ) {
       activeTaskNumber++;
     }

package/src/QuickStartDrawer.scss

@@ -5,7 +5,7 @@
     z-index: 0;
     position: relative;
   }
-  &__modal > .pf-v5-c-modal-box__footer {
+  &__modal > .pf-v6-c-modal-box__footer {
     display: block;
   }
 }

package/src/QuickStartDrawer.tsx

@@ -252,7 +252,7 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
             </DrawerContentBody>
           </DrawerContent>
         ) : (
-          <div className="pf-v5-c-drawer__main">{panelContent}</div>
+          <div className="pf-v6-c-drawer__main">{panelContent}</div>
         )}
       </Drawer>
       <QuickStartCloseModal

package/src/QuickStartMarkdownView.tsx

@@ -45,7 +45,7 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
             if (!linkLabel || !linkType || !linkId) {
               return text;
             }
-            return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+            return `<button class="pf-v6-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
           },
         },
         {

package/src/QuickStartPanelContent.scss

@@ -3,21 +3,21 @@
     position: sticky;
     top: 0px;
     background: inherit;
-    z-index: var(--pf-v5-global--ZIndex--xs);
+    z-index: var(--pf-t--global--z-index--xs);
     &__shadow {
-      box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+      box-shadow: var(--pf-t--global--box-shadow--sm--bottom);
     }
     &--blue-white {
-      background-color: var(--pf-v5-global--palette--blue-400);
+      background-color: var(--pf-t--global--color--brand--default);
       .pfext-quick-start-panel-content__title {
-        color: var(--pf-v5-global--Color--light-100);
+        color: var(--pf-t--global--text--color--on-brand--default);
       }
       .pfext-quick-start-panel-content__duration {
-        color: var(--pf-v5-global--Color--light-200);
+        color: var(--pf-t--global--text--color--on-brand--default);
       }
       .pfext-quick-start-panel-content__close-button {
         button {
-          color: var(--pf-v5-global--Color--light-100) !important;
+          color: var(--pf-t--global--text--color--on-brand--default) !important;
         }
       }
     }
@@ -33,14 +33,14 @@
   }
   &__duration {
     display: inline-block;
-    font-size: var(--pf-v5-global--FontSize--md);
-    font-weight: 400;
+    font-size: var(--pf-t--global--font--size--body--default);
+    font-weight: var(--pf-t--global--font--weight--body);
     line-height: 1;
-    color: #9c9c9c;
+    color: var(--pf-t--global--text--color--subtle);
   }
   &__footer {
     &__shadow {
-      box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
+      box-shadow: var(--pf-t--global--box-shadow--sm--top);
     }
   }
 }

package/src/QuickStartPanelContent.tsx

@@ -111,7 +111,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
               headingLevel="h2"
               size="xl"
               className="pfext-quick-start-panel-content__name"
-              style={{ marginRight: 'var(--pf-v5-global--spacer--md)' }}
+              style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
             >
               <span
                 dangerouslySetInnerHTML={{

package/src/catalog/QuickStartCatalog.scss

@@ -1,6 +1,6 @@
 .pfext-quick-start-catalog {
   &__gallery {
-    --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
+    --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
   }
   &__gallery-item {
     display: inherit !important;

package/src/catalog/QuickStartTile.tsx

@@ -8,7 +8,8 @@ import { camelize } from '../utils/quick-start-utils';
 import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
-import QuickStartTileHeader, { QuickstartAction } from './QuickStartTileHeader';
+import QuickStartTileHeader from './QuickStartTileHeader';
+import { Icon } from '@patternfly/react-core';
 
 import './QuickStartTile.scss';
 
@@ -17,8 +18,6 @@ interface QuickStartTileProps {
   status: QuickStartStatus;
   isActive: boolean;
   onClick?: () => void;
-  /** Action config for button rendered next to title */
-  action?: QuickstartAction;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -26,7 +25,6 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   status,
   isActive,
   onClick = () => {},
-  action,
 }) => {
   const {
     metadata: { name: id },
@@ -40,15 +38,17 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
 
   let quickStartIcon: React.ReactNode;
   if (typeof icon === 'object') {
-    quickStartIcon = icon;
+    quickStartIcon = <Icon size="xl">{icon}</Icon>
   } else {
     quickStartIcon = (
+      <Icon size="xl">
       <FallbackImg
         className="pfext-catalog-item-icon__img--large"
         src={icon as string}
         alt=""
         fallback={<RocketIcon />}
       />
+      </Icon>
     );
   }
 
@@ -68,23 +68,17 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
     e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
   ) => {
     if (ref.current?.contains(e.target as Node)) {
-      if (!link) {
+      if (link) {
+        window.open(link.href);
+      } else {
         setActiveQuickStart(id, tasks?.length);
       }
       onClick();
     }
   };
 
-  const linkProps = link
-    ? {
-        href: link.href,
-        target: '_blank',
-        rel: 'noreferrer',
-      }
-    : {};
-
   return (
-    <div ref={ref} onClick={handleClick}>
+    <div ref={ref}>
       <CatalogTile
         id={id + '-catalog-tile'}
         style={{
@@ -101,9 +95,9 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
             duration={durationMinutes}
             type={type}
             quickStartId={id}
-            action={action}
           />
         }
+        onClick={handleClick}
         onKeyDown={(event) => {
           if (event.key === 'Enter' || event.key === ' ') {
             setActiveQuickStart(id, tasks?.length);
@@ -111,16 +105,13 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           }
         }}
         // https://github.com/patternfly/patternfly-react/issues/7039
-        {...linkProps}
+        href={link?.href}
         data-test={`tile ${id}`}
         description={
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />
         }
         footer={footerComponent}
         tabIndex={0}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore-next-line
-        isSelectableRaised
       />
     </div>
   );

package/src/catalog/QuickStartTileDescription.scss

@@ -13,12 +13,12 @@
   &-prerequisites {
     display: inline-flex;
     &__text {
-      margin-right: var(--pf-v5-global--spacer--sm);
-      font-size: var(--pf-v5-global--FontSize--md);
+      margin-right: var(--pf-t--global--spacer--sm);
+      font-size: var(--pf-t--global--font--size--md);
       margin-top: 11.5px;
       margin-bottom: 11.5px;
-      font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
-      font-weight: var(--pf-v5-global--FontWeight--normal);
+      font-family: var(--pf-t--global--font--family--heading);
+      font-weight: var(--pf-t--global--font--weight--heading);
       line-height: 1.1;
     }
 

package/src/catalog/QuickStartTileHeader.scss

@@ -1,16 +1,12 @@
 .pfext-quick-start-tile-header {
   &__status {
-    margin: var(--pf-v5-global--spacer--sm) 0;
+    margin: var(--pf-t--global--spacer--sm) 0;
   }
   &--margin {
-    margin-right: var(--pf-v5-global--spacer--sm);
-    margin-bottom: var(--pf-v5-global--spacer--sm);
+    margin-right: var(--pf-t--global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
   }
-  & .pf-v5-c-badge:not(:last-of-type) {
-    margin-right: var(--pf-v5-global--spacer--sm);
-  }
-
-  h3 {
-    flex: 1;
+  & .pf-v6-c-badge:not(:last-of-type) {
+    margin-right: var(--pf-t--global--spacer--sm);
   }
 }

package/src/catalog/QuickStartTileHeader.tsx

@@ -1,31 +1,18 @@
 import './QuickStartTileHeader.scss';
 import * as React from 'react';
-import { Button, ButtonProps, Flex, Label, Title } from '@patternfly/react-core';
+import { Label, Title } from '@patternfly/react-core';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import { StatusIcon } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
-export interface QuickstartAction {
-  /** Screen reader aria label. */
-  'aria-label': string;
-  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
-  icon?: React.ComponentType<unknown>;
-  /** Callback with synthetic event parameter. */
-  onClick?: (e: React.SyntheticEvent) => void;
-  /** Additional button props to be rendered as extra props. */
-  buttonProps?: ButtonProps;
-}
-
 interface QuickStartTileHeaderProps {
   status: string;
   duration: number;
   name: string;
   type?: QuickStartType;
   quickStartId?: string;
-  action?: QuickstartAction;
 }
 
 const statusColorMap = {
@@ -40,7 +27,6 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
   name,
   type,
   quickStartId,
-  action,
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
 
@@ -50,24 +36,11 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
     [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
   };
 
-  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
-
   return (
     <div className="pfext-quick-start-tile-header">
-      <Flex flexWrap={{ default: 'nowrap' }}>
-        <Title headingLevel="h3" data-test="title" id={quickStartId}>
-          <QuickStartMarkdownView content={name} />
-        </Title>
-        {action && (
-          <Button
-            aria-label={action['aria-label']}
-            icon={<ActionIcon />}
-            variant="plain"
-            onClick={action.onClick}
-            {...action.buttonProps}
-          />
-        )}
-      </Flex>
+      <Title headingLevel="h3" data-test="title" id={quickStartId}>
+        <QuickStartMarkdownView content={name} />
+      </Title>
       <div className="pfext-quick-start-tile-header__status">
         {type && (
           <Label className="pfext-quick-start-tile-header--margin" color={type.color}>

package/src/catalog/Toolbar/QuickStartCatalogFilter.scss

@@ -5,21 +5,21 @@
   }
 
   &__count {
-    font-weight: var(--pf-v5-global--FontWeight--bold);
+    font-weight: var(--pf-t--global--font--weight--body--bold);
   }
 }
 
-.pf-v5-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
-  --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toolbar--RowGap: 0;
+.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
+  --pf-v6-c-toolbar--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar--RowGap: 0;
   font-size: 14px;
 
-  .pf-v5-c-select {
-    --pf-v5-c-select__toggle--FontSize: 14px;
+  .pf-v6-c-select {
+    --pf-v6-c-select__toggle--FontSize: 14px;
   }
 
-  .pf-v5-c-check {
-    --pf-v5-c-check__label--FontSize: 14px;
+  .pf-v6-c-check {
+    --pf-v6-c-check__label--FontSize: 14px;
   }
 }

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -73,7 +73,7 @@ export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
   return (
     <ToolbarItem
       className="pfext-quick-start-catalog-filter__count"
-      align={{ default: 'alignRight' }}
+      align={{ default: 'alignEnd' }}
     >
       {getResource('{{count, number}} item', quickStartsCount).replace(
         '{{count, number}}',

package/src/catalog/index.ts

@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
 export { default as QuickStartTileDescription } from './QuickStartTileDescription';
 export { default as QuickStartTileFooter } from './QuickStartTileFooter';
 export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
-export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
+export { default as QuickStartTileHeader } from './QuickStartTileHeader';
 export * from './Toolbar/QuickStartCatalogFilterItems';
 export * from './Catalog';

package/src/controller/QuickStartConclusion.tsx

@@ -53,7 +53,7 @@ const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
               nextQuickStart?.spec?.displayName,
             )}{' '}
             <ArrowRightIcon
-              style={{ marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' }}
+              style={{ marginLeft: 'var(--pf-t--global--spacer--xs)', verticalAlign: 'middle' }}
             />
           </Button>
         ))}

package/src/controller/QuickStartContent.scss

@@ -1,10 +1,10 @@
 .pfext-quick-start-content {
   flex: 1 1 0;
   overflow: auto;
-  padding: var(--pf-v5-global--spacer--lg);
+  padding: var(--pf-t--global--spacer--lg);
   font-size: 16px;
 
-  .pf-v5-c-alert__description {
+  .pf-v6-c-alert__description {
     p {
       font-size: 13px;
     }

package/src/controller/QuickStartFooter.scss

@@ -1,10 +1,10 @@
 .pfext-quick-start-footer {
-  background-color: var(--pf-v5-global--BackgroundColor--100);   // this is an example about how we should use PF variables
+  background-color: var(--pf-t--global--background--color--primary--default);   // this is an example about how we should use PF variables
   flex: 0 0 auto;
-  padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg);
 
   &__actionbtn {
-    margin-right: var(--pf-v5-global--spacer--md);
+    margin-right: var(--pf-t--global--spacer--md);
   }
 
   &__restartbtn {

package/src/controller/QuickStartIntroduction.scss

@@ -1,19 +1,19 @@
 .pfext-quick-start-intro {
   &__prereq {
-    margin-bottom: var(--pf-v5-global--spacer--md);
-    .pf-v5-c-expandable-section__content {
-      margin-top: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--md);
+    .pf-v6-c-expandable-section__content {
+      margin-top: var(--pf-t--global--spacer--sm);
     }
-    .pf-v5-c-expandable-section__toggle {
+    .pf-v6-c-expandable-section__toggle {
       padding-top: 0;
       padding-bottom: 0;
       &-text {
-        margin-left: var(--pf-v5-global--spacer--sm);
+        margin-left: var(--pf-t--global--spacer--sm);
       }
       &-icon {
-        color: var(--pf-v5-c-expandable-section__toggle--Color);
+        color: var(--pf-v6-c-expandable-section__toggle--Color);
         &:focus, &:hover {
-          --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+          --pf-v6-c-expandable-section__toggle--Color: var(--pf-v6-c-expandable-section__toggle--focus--Color);
         }
       }
     }

package/src/controller/QuickStartIntroduction.tsx

@@ -49,7 +49,7 @@ const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
     <>
       <QuickStartMarkdownView content={introduction} />
       {prereqList}
-      <p style={{ marginBottom: 'var(--pf-v5-global--spacer--md)' }}>
+      <p style={{ marginBottom: 'var(--pf-t--global--spacer--md)' }}>
         {getResource(
           'In this quick start, you will complete {{count, number}} task',
           tasks.length,

package/src/controller/QuickStartTaskHeader.scss

@@ -1,41 +1,41 @@
 .pfext-quick-start-task-header {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-t--global--spacer--sm);
   display: grid;
   grid-template-columns: min-content auto;
-  font-size: var(--pf-v5-global--FontSize--md);
+  font-size: var(--pf-t--global--font--size--body--default);
   button::before {
     content: none;
   }
 
   &__title {
-    color: var(--pf-v5-global--primary-color--100) !important;
-    margin-right: var(--pf-v5-global--spacer--md) !important;
+    color: var(--pf-t--global--text--color--brand--default) !important;
+    margin-right: var(--pf-t--global--spacer--md) !important;
   }
 
   &__subtitle {
-    font-size: var(--pf-v5-global--FontSize--sm);
-    color: var(--pf-v5-global--Color--dark-200) !important;
+    font-size: var(--pf-t--global--font--size--body--sm);
+    color: var(--pf-t--global--text--color--subtle) !important;
   }
 
   &__tryagain {
     display: block;
-    font-size: var(--pf-v5-global--FontSize--md);
-    color: var(--pf-v5-global--Color--300) !important;
+    font-size: var(--pf-t--global--font--size--body--default);
+    color: var(--pf-t--global--text--color--subtle) !important;
   }
 
   &__title-success {
-    color: var(--pf-v5-global--success-color--100) !important;
+    color: var(--pf-t--global--text--color--status--success--default) !important;
   }
 
   &__title-failed {
-    color: var(--pf-v5-global--danger-color--100) !important;
+    color: var(--pf-t--global--text--color--status--danger--default) !important;
   }
 
   &__task-icon {
     &-init {
-      background-color: var(--pf-v5-global--primary-color--100);
-      border-radius: var(--pf-v5-global--BorderRadius--lg);
-      color: var(--pf-v5-global--Color--light-100);
+      background-color: var(--pf-t--global--color--brand--default);
+      border-radius: var(--pf-t--global--border--radius--large);
+      color: var(--pf-t--global--text--color--on-brand--default);
       display: inline-flex;
       justify-content: center;
       height: 1.5em;
@@ -48,11 +48,11 @@
     }
 
     &-success {
-      color: var(--pf-v5-global--success-color--100) !important;
+      color: var(--pf-t--global--text--color--status--success--default) !important;
     }
 
     &-failed {
-      color: var(--pf-v5-global--danger-color--100) !important;
+      color: var(--pf-t--global--text--color--status--danger--default) !important;
     }
   }
 }

package/src/controller/QuickStartTaskHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon, Title, WizardNavItem } from '@patternfly/react-core';
+import { Icon, Text, TextVariants, Title, WizardNavItem } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { css } from '@patternfly/react-styles';
@@ -91,22 +91,22 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   );
 
   const content = (
-    <div className="pfext-quick-start-task-header" ref={titleRef}>
-      <TaskIcon taskIndex={taskIndex} taskStatus={taskStatus} />
-      <Title headingLevel="h3" size={size} className={classNames}>
-        <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
-        {isActiveTask && subtitle && (
-          <span
-            className="pfext-quick-start-task-header__subtitle"
-            data-test-id="quick-start-task-subtitle"
-          >
-            {' '}
-            {subtitle}
-          </span>
-        )}
-      </Title>
-      {tryAgain}
-    </div>
+    <div ref={titleRef}>
+        <Title headingLevel="h3">
+          <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
+          {isActiveTask && subtitle && (
+            <span
+              data-test-id="quick-start-task-subtitle"
+            >
+              {' '}
+              <Text component={TextVariants.small}>
+                {subtitle}
+              </Text>
+            </span>
+          )}
+        {tryAgain}
+        </Title>
+    </div>    
   );
 
   return (

package/src/controller/QuickStartTaskHeaderList.scss

@@ -11,7 +11,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      margin-bottom: var(--pf-v5-global--spacer--xs);
+      margin-bottom: var(--pf-t--global--spacer--xs);
     }
   }
 }

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -16,7 +16,7 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
   allTaskStatuses,
   onTaskSelect,
 }) => tasks.length > 0 ? (
-    <List className="pfext-quick-start-task-header__list">
+    <List className="pf-v6-c-wizard__nav-list">
       {tasks.map((task, index) => (
         <TaskHeader
           key={task.title}