@patternfly/react-core 5.0.0-alpha.103 → 5.0.0-alpha.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.103",
+  "version": "5.0.0-alpha.104",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "6b1ff3ecf91538a866ee0b7b49ef733d40aef763"
+  "gitHead": "71527891f7cac3fdaa4b067d83c7af495e760f72"
 }

package/src/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Title } from '../Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,19 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   isCloseHidden,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!isCloseHidden && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
 
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../../../components/Button';
-import { Title } from '../../../components/Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,18 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!hideClose && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardHeader.test.tsx.snap

@@ -5,24 +5,24 @@ exports[`WizardHeader should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-wizard__header"
   >
-    <h2
-      aria-label="string"
-      class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-      data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
-      data-ouia-safe="true"
-      id="string"
+    <div
+      class="pf-v5-c-wizard__title"
     >
-      string
-    </h2>
-    <p
+      <h2
+        class="pf-v5-c-wizard__title-text"
+        id="string"
+      >
+        string
+      </h2>
+    </div>
+    <div
       class="pf-v5-c-wizard__description"
       id="string"
-    />
-    <div>
-      ReactNode
+    >
+      <div>
+        ReactNode
+      </div>
     </div>
-    <p />
   </div>
 </DocumentFragment>
 `;

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -8,37 +8,41 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-2"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-1"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-1"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-1"
@@ -277,37 +281,41 @@ exports[`Wizard Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-0"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-0"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-0"