@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.8

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadInsets: React.FunctionComponent = () => (
+  <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Tabs/TabContent.tsx

@@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   ouiaSafe?: boolean;
 }
 
-const variantStyle = {
-  default: '',
-  light300: styles.modifiers.light_300
-};
+// TODO: Update with issue #9909
+// const variantStyle = {
+//   default: ''
+// };
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
@@ -60,10 +60,11 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
           <section
             ref={innerRef}
             hidden={children ? null : child.props.eventKey !== activeKey}
+            // TODO: Update "variant" with issue #9909
             className={
               children
-                ? css(styles.tabContent, className, variantStyle[variant])
-                : css(styles.tabContent, child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variant)
+                : css(styles.tabContent, child.props.className, variant)
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}

package/src/components/Tabs/Tabs.tsx

@@ -38,7 +38,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** Additional classes added to the tabs */
   className?: string;
   /** Tabs background color variant */
-  variant?: 'default' | 'light300';
+  variant?: 'default';
   /** The index of the active tab */
   activeKey?: number | string;
   /** The index of the default active tab. Set this for uncontrolled Tabs */

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-v5-c-tab-content string"
+    class="pf-v5-c-tab-content string default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="string"

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `
   </nav>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -92,7 +92,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -104,7 +104,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -227,7 +227,7 @@ exports[`should render box tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -238,7 +238,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -250,7 +250,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -262,7 +262,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content light300"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -544,7 +544,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -555,7 +555,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -567,7 +567,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -579,7 +579,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -672,7 +672,7 @@ exports[`should render filled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -683,7 +683,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -695,7 +695,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -788,7 +788,7 @@ exports[`should render secondary tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-primarieTabs"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-primarieTabs"
@@ -873,7 +873,7 @@ exports[`should render secondary tabs 1`] = `
     </div>
     <section
       aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -885,7 +885,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -897,7 +897,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -910,7 +910,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -922,7 +922,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1045,7 +1045,7 @@ exports[`should render simple tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1056,7 +1056,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1068,7 +1068,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1080,7 +1080,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1173,7 +1173,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-one-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1185,7 +1185,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-two-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1197,7 +1197,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-three-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1290,7 +1290,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1301,7 +1301,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1313,7 +1313,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1407,7 +1407,7 @@ exports[`should render tabs with separate content 1`] = `
   <div>
     <section
       aria-label="Tab item 1"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       id="refTab1Section"
@@ -1418,7 +1418,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 2"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1434,7 +1434,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 3"
-      class="pf-v5-c-tab-content"
+      class="pf-v5-c-tab-content default"
       data-ouia-component-type="PF5/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1561,7 +1561,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1572,7 +1572,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1584,7 +1584,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1596,7 +1596,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1719,7 +1719,7 @@ exports[`should render vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1730,7 +1730,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1742,7 +1742,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1754,7 +1754,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-v5-c-tab-content"
+    class="pf-v5-c-tab-content default"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     hidden=""

package/src/components/Tabs/examples/TabsBoxLight.tsx

@@ -24,7 +24,8 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        variant={isTabsLightScheme ? 'light300' : 'default'}
+        // TODO: Update variant value when "isTabsLightScheme" with issue #9909
+        variant={isTabsLightScheme ? 'default' : 'default'}
         isBox
         aria-label="Tabs in the box light variation example"
         role="region"

package/src/components/Text/examples/Text.md

@@ -51,7 +51,7 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
-### Visited
+### Link and visited link
 
 ```ts file="./TextVisited.tsx"
 

package/src/components/Text/examples/TextVisited.tsx

@@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 export const TextVisited: React.FunctionComponent = () => (
   <>
     <TextContent>
-      <Text component={TextVariants.h3}>Visited link example</Text>
+      <Text component={TextVariants.h3}>Link example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} isVisitedLink href="#">
-          Visited link
+          Click to visit link
         </Text>
       </Text>
     </TextContent>
     <br />
     <TextContent isVisited>
-      <Text component={TextVariants.h3}>Visited content example</Text>
+      <Text component={TextVariants.h3}>Link content example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} href="#">
           content link 1

package/src/components/Title/Title.tsx

@@ -12,15 +12,6 @@ export enum TitleSizes {
   '4xl' = '4xl'
 }
 
-enum headingLevelSizeMap {
-  h1 = '2xl',
-  h2 = 'xl',
-  h3 = 'lg',
-  h4 = 'md',
-  h5 = 'md',
-  h6 = 'md'
-}
-
 type Size = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>, OUIAProps {
@@ -42,7 +33,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
   className = '',
   children = '',
   headingLevel: HeadingLevel,
-  size = headingLevelSizeMap[HeadingLevel],
+  size,
   ouiaId,
   ouiaSafe = true,
   ...props
@@ -52,7 +43,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
     <HeadingLevel
       {...ouiaProps}
       {...props}
-      className={css(styles.title, size && styles.modifiers[size as Size], className)}
+      className={css(styles.title, size ? styles.modifiers[size as Size] : styles.modifiers[HeadingLevel], className)}
     >
       {children}
     </HeadingLevel>

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

@@ -22,9 +22,9 @@ test(`Renders with the ${styles.title}`, () => {
   expect(screen.getByRole('heading')).toHaveClass(styles.title);
 });
 
-test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
+test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers.h1} by default`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers.h1}`, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -36,34 +36,34 @@ test('Renders with custom class name when className prop is passed', () => {
   expect(screen.getByRole('heading')).toHaveClass('test-class');
 });
 
-test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
+test('Renders with class name pf-m-h1 by default when "h1" is passed as heading level', () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h1');
 });
 
-test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
+test('Renders with class name pf-m-h2 by default when "h2" is passed as heading level', () => {
   render(<Title headingLevel="h2">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h2');
 });
 
-test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
+test('Renders with class name pf-m-h3 by default when "h3" is passed as heading level', () => {
   render(<Title headingLevel="h3">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h3');
 });
 
-test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
+test('Renders with class name pf-m-h4 by default when "h4" is passed as heading level', () => {
   render(<Title headingLevel="h4">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h4');
 });
 
-test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
+test('Renders with class name pf-m-h5 by default when "h5" is passed as heading level', () => {
   render(<Title headingLevel="h5">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h5');
 });
 
-test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
+test('Renders with class name pf-m-h6 by default when "h6" is passed as heading level', () => {
   render(<Title headingLevel="h6">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h6');
 });
 
 test('Renders with class name pf-m-md when "md" is passed as title size', () => {

package/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-title pf-m-2xl"
+    class="pf-v5-c-title pf-m-h1"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"

package/src/components/Title/examples/TitleCustomSizes.tsx

@@ -4,22 +4,22 @@ import { Title, TitleSizes } from '@patternfly/react-core';
 export const TitleCustomSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
-      h1 as 4xl
+      4xl title
     </Title>
     <Title headingLevel="h2" size="3xl">
-      h2 as 3xl
+      3xl title
     </Title>
     <Title headingLevel="h3" size={TitleSizes['2xl']}>
-      h3 as 2xl
+      2xl title
     </Title>
     <Title headingLevel="h4" size="xl">
-      h4 as xl
+      xl title
     </Title>
     <Title headingLevel="h5" size={TitleSizes.lg}>
-      h5 as lg
+      lg title
     </Title>
     <Title headingLevel="h6" size="md">
-      h6 as md Title
+      md title
     </Title>
   </React.Fragment>
 );

package/src/components/Title/examples/TitleDefaultSizes.tsx

@@ -3,11 +3,11 @@ import { Title } from '@patternfly/react-core';
 
 export const TitleDefaultSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Title headingLevel="h1">h1 defaults to 2xl</Title>
-    <Title headingLevel="h2">h2 defaults to xl</Title>
-    <Title headingLevel="h3">h3 defaults to lg</Title>
-    <Title headingLevel="h4">h4 defaults to md</Title>
-    <Title headingLevel="h5">h5 defaults to md</Title>
-    <Title headingLevel="h6">h6 defaults to md</Title>
+    <Title headingLevel="h1">H1-styled title</Title>
+    <Title headingLevel="h2">H2-styled title</Title>
+    <Title headingLevel="h3">H3-styled title</Title>
+    <Title headingLevel="h4">H4-styled title</Title>
+    <Title headingLevel="h5">H5-styled title</Title>
+    <Title headingLevel="h6">H6-styled title</Title>
   </React.Fragment>
 );