@patternfly/quickstarts 5.4.0-prerelease.4 → 6.0.0-alpha.2

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/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

@@ -9,6 +9,7 @@ import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
 import QuickStartTileHeader, { QuickstartAction } from './QuickStartTileHeader';
+import { Icon } from '@patternfly/react-core';
 
 import './QuickStartTile.scss';
 
@@ -40,15 +41,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>
     );
   }
 

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,13 +1,13 @@
 .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);
+  & .pf-v6-c-badge:not(:last-of-type) {
+    margin-right: var(--pf-t--global--spacer--sm);
   }
 
   h3 {

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/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';
@@ -93,22 +93,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}

package/src/controller/QuickStartTaskReview.scss

@@ -1,15 +1,15 @@
 .pfext-quick-start-task-review-alert {
-  margin: var(--pf-v5-global--spacer--lg) 0;
+  margin: var(--pf-t--global--spacer--lg) 0;
 }
 .pfext-quick-start-task-review {
-  font-size: var(--pf-v5-global--FontSize--md);
-  line-height: var(--pf-v5-global--FontSize--xl);
-  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  font-size: var(--pf-t--global--font--size--md);
+  line-height: var(--pf-t--global--font--line-height--heading);
+  font-family: var(--pf-t--global--font--family--heading);
 
   &__actions {
     display: flex;
     align-items: flex-start;
-    margin-bottom: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
     input[type='radio'] {
       margin-top: 0;
       margin-right: 0;
@@ -17,14 +17,14 @@
   }
 
   &__radio {
-    margin-right: var(--pf-v5-global--spacer--xl) !important;
+    margin-right: var(--pf-t--global--spacer--xl) !important;
   }
 
   &--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-chart-global--danger--Color--100);
+    color: var(--pf-t--global--text--color--status--danger--default);
   }
 }

package/src/controller/QuickStartTasks.scss

@@ -5,16 +5,16 @@
     }
 
     li {
-      &.pf-v5-c-wizard__nav-item {
+      &.pf-v6-c-wizard__nav-item {
         list-style-type: none;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        margin-bottom: var(--pf-v5-global--spacer--xs);
+        margin-bottom: var(--pf-t--global--spacer--xs);
       }
     }
     .pfext-quick-start-task__content {
-      margin-bottom: var(--pf-v5-global--spacer--md);
+      margin-bottom: var(--pf-t--global--spacer--md);
     }
     // Custom styles on PF React List rendered in custom react renderer
     .task-pflist {
@@ -23,13 +23,13 @@
         margin-bottom: 6px;
       }
       &-subtitle {
-        color: var(--pf-v5-global--Color--200);
+        color: var(--pf-t--global--text--color--subtle);
         font-size: 16px;
       }
       &-list {
         font-size: 16px;
         &--prereq {
-          padding-left: var(--pf-v5-global--spacer--lg);
+          padding-left: var(--pf-t--global--spacer--lg);
           li + li {
             margin-top: 4px;
           }
@@ -58,25 +58,26 @@
             }
           }
           &__content {
-            .pf-v5-c-alert {
+            .pf-v6-c-alert {
               // add margins to match design
-              margin: var(--pf-v5-global--spacer--md) 0;
+              margin: var(--pf-t--global--spacer--md) 0;
             }
-            .pf-v5-c-alert__title {
+            .pf-v6-c-alert__title {
               // remove margins from markdown css
               margin-top: 0;
               margin-bottom: 0;
               // lift PF style specificity to override markdown css
-              font-weight: var(--pf-v5-c-alert__title--FontWeight);
+              font-weight: var(--pf-v6-c-alert__title--FontWeight);
               font-family: inherit;
               line-height: inherit;
-              color: var(--pf-v5-c-alert__title--Color);
+              color: var(--pf-v6-c-alert__title--Color);
               word-break: break-word;
             }
             .task-pflist-list__item__content__note {
-              background-color: var(--pf-v5-global--palette--blue-50);
-              border-color: var(--pf-v5-global--active-color--200);
-              margin: var(--pf-v5-global--spacer--md) 0;
+              background-color: var(--pf-t--global--color--nonstatus--blue--default);
+              border-color: var(--pf-t--global--border--color--brand--default);
+              margin: var(--pf-t--global--spacer--md) 0;
+              color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
               &__body {
                 font-size: 14px;
               }

package/src/styles/_base.scss

@@ -6,7 +6,7 @@
 
   // match pf4 styling / table col head styling
   dt {
-    font-weight: var(--pf-v5-global--FontWeight--bold); }
+    font-weight: var(--pf-t--global--font--weight--body--bold); }
 
   dd {
     margin-bottom: 20px; }
@@ -28,8 +28,8 @@
     margin-right: 7px;
   }
 
-  .pf-v5-c-list {
-    --pf-v5-c-list--PaddingLeft: 20px;
+  .pf-v6-c-list {
+    --pf-v6-c-list--PaddingLeft: 20px;
   }
 }
 
@@ -40,9 +40,6 @@
 .pfext-page-layout__content,
 // catalog item prereq popover
 .pfext-popover__base {
-  --pf-v5-global--FontSize--md: 14px;
-  --pf-v5-global--FontSize--sm: 13px;
-
   ul {
       list-style-type: disc;
   }