@patternfly/react-core 5.2.0-prerelease.1 → 5.2.0-prerelease.11

package/src/components/Wizard/Wizard.tsx

@@ -30,6 +30,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   footer?: WizardFooterType;
   /** Wizard navigation */
   nav?: WizardNavType;
+  /** Aria-label for the Nav */
+  navAriaLabel?: string;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -63,6 +65,7 @@ export const Wizard = ({
   className,
   header,
   nav,
+  navAriaLabel,
   startIndex = 1,
   isVisitRequired = false,
   isProgressive = false,
@@ -176,7 +179,12 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
+        <WizardInternal
+          nav={nav}
+          navAriaLabel={navAriaLabel}
+          isVisitRequired={isVisitRequired}
+          isProgressive={isProgressive}
+        />
       </div>
     </WizardContextProvider>
   );
@@ -184,9 +192,10 @@ export const Wizard = ({
 
 const WizardInternal = ({
   nav,
+  navAriaLabel,
   isVisitRequired,
   isProgressive
-}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
+}: Pick<WizardProps, 'nav' | 'navAriaLabel' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -198,12 +207,13 @@ const WizardInternal = ({
     return (
       <WizardNavInternal
         nav={nav}
+        navAriaLabel={navAriaLabel}
         isNavExpanded={isNavExpanded}
         isVisitRequired={isVisitRequired}
         isProgressive={isProgressive}
       />
     );
-  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, navAriaLabel, steps]);
 
   return (
     <WizardToggle

package/src/components/Wizard/WizardNavInternal.tsx

@@ -7,21 +7,28 @@ import { WizardNav, WizardNavProps } from './WizardNav';
 import { WizardNavItem } from './WizardNavItem';
 
 /**
- * Hosts deafult wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
+ * Hosts default wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
  * This component is not exposed to consumers.
  */
 
 interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
+  navAriaLabel: string;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({
+  nav,
+  navAriaLabel,
+  isVisitRequired,
+  isProgressive,
+  isNavExpanded
+}: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
-    'aria-label': nav?.['aria-label'] || 'Wizard steps',
+    'aria-label': navAriaLabel || nav?.['aria-label'] || 'Wizard steps',
     ...(nav?.['aria-labelledby'] && {
       'aria-labelledby': nav['aria-labelledby']
     })

package/src/components/Wizard/WizardNavItem.tsx

@@ -7,6 +7,8 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
+import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
+import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
 export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
@@ -125,8 +127,8 @@ export const WizardNavItem = ({
             {content}
             {/* TODO, patternfly/patternfly#5142 */}
             {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>
-                <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />
+              <span style={{ marginLeft: globalSpacerSm.var }}>
+                <ExclamationCircleIcon color={globalDangerColor100.var} />
               </span>
             )}
           </>

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -99,6 +99,18 @@ test('renders default nav with custom props', () => {
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
+test('renders nav aria label', () => {
+
+  render(
+    <Wizard navAriaLabel="custom nav aria-label">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+  const navElement = screen.getByLabelText('custom nav aria-label');
+
+  expect(navElement).toHaveAttribute('aria-label');
+});
+
 test('renders custom nav', () => {
   const customNav = () => <nav>Some custom nav</nav>;
 

package/src/components/Wizard/examples/Wizard.md

@@ -49,6 +49,8 @@ WizardHeader
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 ## Examples
 
@@ -149,7 +151,7 @@ import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 Used to access any property of [WizardContext](#wizardcontextprops):
 
 ```noLive
-import { useWizardContext } from '@patternfly/react-core/next';
+import { useWizardContext } from '@patternfly/react-core';
 
 const StepContent = () => {
   const { activeStep } = useWizardContext();
@@ -162,7 +164,7 @@ const StepContent = () => {
 Used to set a unique footer for the wizard on any given step.
 
 ```noLive
-import { useWizardFooter } from '@patternfly/react-core/next';
+import { useWizardFooter } from '@patternfly/react-core';
 
 const StepContent = () => {
   useWizardFooter(<>Some footer</>);

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -14,6 +14,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
@@ -39,7 +40,7 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className={styles.wizardMainBody}
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -22,6 +22,7 @@ import {
   useWizardContext
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -45,7 +46,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/components/Wizard/examples/WizardWithCustomNavItem.tsx

@@ -10,7 +10,7 @@ export const WizardWithCustomNavItem: React.FunctionComponent = () => (
       id="custom-nav-item-second-step"
       name="Step 2"
       navItem={{
-        content: <span style={{ color: 'var(--pf-v5-global--default-color--200)' }}>Custom item</span>
+        content: <span>Custom item</span>
       }}
     >
       Step 2 content with a custom navigation item

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -12,6 +12,7 @@ import {
   WizardStep
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -35,7 +36,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/demos/Banner.md

@@ -3,6 +3,9 @@ id: Banner
 section: components
 ---
 
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
 ## Demos
 
 ### Basic sticky banner
@@ -21,7 +24,10 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
+
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -33,12 +39,12 @@ class BannerDemo extends React.Component {
               justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
               flexWrap={{ default: 'nowrap' }}
             >
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>
                 This message is sticky to the top of the page.
               </div>
-              <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
             </Flex>
           </Banner>
           <PageSection variant={PageSectionVariants.light}>
@@ -86,6 +92,8 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -103,12 +111,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the top of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>
@@ -142,12 +150,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the bottom of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>