@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.21

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/TextInput/TextInput.tsx

@@ -26,6 +26,13 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
+export interface TextInputExpandedObj {
+  /** Flag to apply expanded styling. */
+  isExpanded: boolean;
+  /** Id of the element that the text input is controlling expansion of. */
+  ariaControls: string;
+}
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,8 +40,10 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** Flag to apply expanded styling */
+  /** @deprecated Flag to apply expanded styling. expandedProps should now be used instead. */
   isExpanded?: boolean;
+  /** Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. */
+  expandedProps?: TextInputExpandedObj;
   /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
   /** Flag indicating whether the input is required */
@@ -182,6 +191,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isLeftTruncated,
       isStartTruncated,
       isExpanded,
+      expandedProps,
       readOnly,
       readOnlyVariant,
       isRequired,
@@ -193,6 +203,9 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     } = this.props;
 
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+    const ariaExpandedProps = expandedProps
+      ? { 'aria-expanded': expandedProps?.isExpanded, 'aria-controls': expandedProps?.ariaControls, role: 'combobox' }
+      : {};
 
     return (
       <span
@@ -201,7 +214,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
           isDisabled && styles.modifiers.disabled,
-          isExpanded && styles.modifiers.expanded,
+          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
           customIcon && styles.modifiers.icon,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
@@ -215,6 +228,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           type={type}
           value={this.sanitizeInputValue(value)}
           aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          {...ariaExpandedProps}
           required={isRequired}
           disabled={isDisabled}
           readOnly={!!readOnlyVariant || readOnly}

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

@@ -33,7 +33,9 @@ describe('TextInput', () => {
   });
 
   test('read only text input using isReadOnly', () => {
-    const { asFragment } = render(<TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />);
+    const { asFragment } = render(
+      <TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -113,15 +115,24 @@ describe('TextInput', () => {
 
   test('trimLeft is called when isStartTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isStartTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
 
   test('trimLeft is called when isLeftTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
+
+  test('has aria-expanded set to true when ariaProps.isExpanded is true', () => {
+    render(<TextInput expandedProps={{ isExpanded: true, ariaControls: 'test' }} aria-label="isExpanded" />);
+
+    const input = screen.getByLabelText('isExpanded');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-controls', 'test');
+  });
 });

package/src/components/TextInput/examples/TextInput.md

@@ -3,7 +3,7 @@ id: Text input
 section: components
 subsection: forms
 cssPrefix: pf-v5-c-form-control
-propComponents: ['TextInput']
+propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';

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

@@ -7,12 +7,10 @@ import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   test('Renders in strict mode', () => {
-    const validateTime = (_time: string) => {
-      return true;
-    };
+    const validateTime = (_time: string) => true;
 
     const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
+    render(
       <React.StrictMode>
         <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
       </React.StrictMode>
@@ -112,9 +110,7 @@ describe('TimePicker', () => {
 
   describe('test isInvalid', () => {
     test('should be valid by default', () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
 
       render(<TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />);
 
@@ -122,9 +118,7 @@ describe('TimePicker', () => {
     });
 
     test('should stay valid after onChange', async () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
       const user = userEvent.setup();
 
       render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);

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"