@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.21

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -13,6 +13,8 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIE
   isRead?: boolean;
   /**  Callback for when a list item is clicked */
   onClick?: (event: any) => void;
+  /**  Visually hidden text that conveys the current read state of the notification list item */
+  readStateScreenReaderText?: string;
   /**  Tab index for the list item */
   tabIndex?: number;
   /**  Variant indicates the severity level */
@@ -26,20 +28,27 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   isRead = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClick = (event: React.MouseEvent) => undefined as any,
+  readStateScreenReaderText,
   tabIndex = 0,
   variant = 'custom',
   ...props
 }: NotificationDrawerListItemProps) => {
   const onKeyDown = (event: React.KeyboardEvent) => {
-    if (
-      !(event.target as HTMLElement).parentElement.classList.contains('pf-v5-c-notification-drawer__list-item-action')
-    ) {
+    if (!(event.target as HTMLElement).parentElement.classList.contains(styles.notificationDrawerListItemAction)) {
       // Accessibility function. Click on the list item when pressing Enter or Space on it.
       if (event.key === 'Enter' || event.key === ' ') {
         (event.target as HTMLElement).click();
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -54,6 +63,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
+      <span className="pf-v5-screen-reader">{readStateSRText}</span>
       {children}
     </li>
   );

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx

@@ -21,8 +21,21 @@ describe('NotificationDrawerListItem', () => {
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-hoverable');
   });
 
-  test('drawer list item with isRead applied', () => {
+  test('drawer list item with isRead applied and screen reader text is set to read', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
+
+  });
+
+  test('drawer list item has screen reader text set to unread by default', () => {
+    render(<NotificationDrawerListItem />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">unread</span>');
+  });
+
+  test('drawer list item screen reader textcan be customized', () => {
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read"/>);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });
+ 

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap

@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;

package/src/components/NumberInput/NumberInput.tsx

@@ -7,6 +7,7 @@ import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
 import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_number_input_c_form_control_width_chars';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
@@ -108,7 +109,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
       className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
       {...(widthChars && {
         style: {
-          '--pf-v5-c-number-input--c-form-control--width-chars': widthChars,
+          [cssFormControlWidthChars.name]: widthChars,
           ...props.style
         } as React.CSSProperties
       })}

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

@@ -69,7 +69,6 @@ describe('numberInput', () => {
       <NumberInput
         value={5}
         onMinus={jest.fn()}
-        inputProps={{ 'aria-describedby': '' }}
         minusBtnProps={{ id: 'minus-id' }}
         onPlus={jest.fn()}
         plusBtnProps={{ id: 'plus-id' }}

package/src/components/Page/__tests__/PageSidebarBody.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageSidebarBody } from '../PageSidebarBody';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 test('Renders without children', () => {
   render(
@@ -18,10 +19,10 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
+test(`Renders with class ${styles.pageSidebarBody} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.pageSidebarBody);
 });
 
 test('Renders with custom class', () => {
@@ -30,40 +31,40 @@ test('Renders with custom class', () => {
   expect(screen.getByText('Test')).toHaveClass('tester');
 });
 
-test('Renders without pf-m-page-insets by default', () => {
+test(`Renders without ${styles.modifiers.pageInsets} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders with pf-m-page-insets when usePageInsets is passed', () => {
+test(`Renders with ${styles.modifiers.pageInsets} when usePageInsets is passed`, () => {
   render(<PageSidebarBody usePageInsets>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders without pf-m-fill by default', () => {
+test(`Renders without ${styles.modifiers.fill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders with pf-m-fill when isFilled={true} is passed', () => {
+test(`Renders with ${styles.modifiers.fill} when isFilled={true} is passed`, () => {
   render(<PageSidebarBody isFilled={true}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders without pf-m-no-fill by default', () => {
+test(`Renders without ${styles.modifiers.noFill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noFill);
 });
 
-test('Renders with pf-m-no-fill when isFilled={false} is passed', () => {
+test(`Renders with ${styles.modifiers.noFill} when isFilled={false} is passed`, () => {
   render(<PageSidebarBody isFilled={false}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noFill);
 });
 
 test('Renders with additional props', () => {

package/src/components/Page/examples/Page.md

@@ -17,6 +17,7 @@ propComponents:
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import './page.css';
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,6 +17,8 @@ import {
   CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+/* eslint-disable camelcase */
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
@@ -67,8 +69,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
-            section.
+            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Panel/PanelMain.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Panel/panel';
 import { css } from '@patternfly/react-styles';
+import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
 
 export interface PanelMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the panel main div */
@@ -19,7 +20,7 @@ export const PanelMain: React.FunctionComponent<PanelMainProps> = ({
 }: PanelMainProps) => (
   <div
     className={css(styles.panelMain, className)}
-    style={{ '--pf-v5-c-panel__main--MaxHeight': maxHeight } as React.CSSProperties}
+    style={{ [cssMaxHeight.name]: maxHeight } as React.CSSProperties}
     {...props}
   >
     {children}

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

@@ -5,6 +5,7 @@ import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
 import userEvent from '@testing-library/user-event';
 import { useEffect } from 'react';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -20,14 +21,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel', () => {
+test(`Renders with the class ${styles.panel}`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
+  expect(screen.getByText('Test')).toHaveClass(styles.panel);
 });
 
-test('Renders with only the class pf-v5-c-panel by default', () => {
+test(`Renders with only the class ${styles.panel} by default`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panel, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -35,19 +36,19 @@ test('Renders with custom class name when className prop is passed', () => {
   expect(screen.getByText('Test')).toHaveClass('test-class');
 });
 
-test('Renders with class name pf-m-raised when variant is raised', () => {
+test(`Renders with class name ${styles.modifiers.raised} when variant is raised`, () => {
   render(<Panel variant="raised">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.raised);
 });
 
-test('Renders with class name pf-m-bordered when variant is bordered', () => {
+test(`Renders with class name ${styles.modifiers.bordered} when variant is bordered`, () => {
   render(<Panel variant="bordered">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
-test('Renders with class name pf-m-scrollable when isScrollable is true', () => {
+test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
 });
 
 test('Renders with ref', async () => {

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelFooter } from '../PanelFooter';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__footer', () => {
+test(`Renders with the class ${styles.panelFooter}`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter);
 });
 
-test('Renders with only the class pf-v5-c-panel__footer by default', () => {
+test(`Renders with only the class ${styles.panelFooter} by default`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelHeader } from '../PanelHeader';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__header', () => {
+test(`Renders with the class ${styles.panelHeader}`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader);
 });
 
-test('Renders with only the class pf-v5-c-panel__header by default', () => {
+test(`Renders with only the class ${styles.panelHeader} by default`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMain } from '../PanelMain';
+import cssPanelMainMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +18,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main', () => {
+test(`Renders with the class ${styles.panelMain}`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain);
 });
 
-test('Renders with only the class pf-v5-c-panel__main by default', () => {
+test(`Renders with only the class ${styles.panelMain} by default`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -34,7 +36,7 @@ test('Renders with custom class name when className prop is passed', () => {
 test('Renders with custom max height name when maxHeight prop is passed', () => {
   render(<PanelMain maxHeight="100px">Test</PanelMain>);
   const styles = getComputedStyle(screen.getByText('Test'));
-  expect(styles.getPropertyValue('--pf-v5-c-panel__main--MaxHeight')).toBe('100px');
+  expect(styles.getPropertyValue(cssPanelMainMaxHeight.name)).toBe('100px');
 });
 
 test('Renders with the inherited element props spread to the component', () => {

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMainBody } from '../PanelMainBody';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main-body', () => {
+test(`Renders with the class ${styles.panelMainBody}`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody);
 });
 
-test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
+test(`Renders with only the class ${styles.panelMainBody} by default`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressHelperText } from '../ProgressHelperText';
+import styles from '@patternfly/react-styles/css/components/Progress/progress';
 
 test('Renders without children', () => {
   render(
@@ -17,10 +18,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
+test(`Renders with class ${styles.progressHelperText} on the div containing the helper text component`, () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressHelperText);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStep, ProgressStepVariant } from '../ProgressStep';
 import { capitalize } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Success icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
@@ -23,9 +24,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
+test(`Renders with class ${styles.progressStepperStep} on the containing li element`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep);
 });
 
 test('Renders with custom class name on the containing li element when className prop is provided', () => {
@@ -36,7 +37,7 @@ test('Renders with custom class name on the containing li element when className
 ['default', undefined].forEach((variant) => {
   test(`Renders with no additional classes when variant=${variant} on containing li element`, () => {
     render(<ProgressStep variant={`${variant as ProgressStepVariant}`}>Test</ProgressStep>);
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step', { exact: true });
+    expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep, { exact: true });
   });
 });
 
@@ -77,9 +78,9 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
+test(`Renders the icon element inside span element with class ${styles.progressStepperStepIcon}`, () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
-  expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
+  expect(screen.getByText('Custom Icon')).toHaveClass(styles.progressStepperStepIcon);
 });
 
 test('Does not render with class pf-m-current by default on containing li element', () => {
@@ -112,14 +113,14 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
+test(`Renders the description element inside div element with class ${styles.progressStepperStepDescription}`, () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
-  expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
+  expect(screen.getByText('Description')).toHaveClass(styles.progressStepperStepDescription);
 });
 
-test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
+test(`Renders children inside class ${styles.progressStepperStepTitle}`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressStepperStepTitle);
 });
 
 test('Renders Component element as div by default', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStepper } from '../ProgressStepper';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
+test(`Renders with only class name ${styles.progressStepper} by default`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper, { exact: true });
 });
 
-test('Renders with class name pf-v5-c-progress-stepper', () => {
+test(`Renders with class name ${styles.progressStepper}`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper);
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute properrty.
@@ -58,6 +59,9 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** An accessible label for the search input. */
   'aria-label'?: string;
+  /** Flag to indicate utilities should be displayed. By default if this prop is undefined or false, utilities will only be displayed when the search input has a value. */
+
+  areUtilitiesDisplayed?: boolean;
   /** Array of attribute values used for dynamically generated advanced search. */
   attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
@@ -151,6 +155,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   appendTo,
   zIndex = 9999,
   name,
+  areUtilitiesDisplayed,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -294,11 +299,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onChange={onChangeHandler}
         name={name}
       />
-      {renderUtilities && (
+      {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>
           {resultsCount && <Badge isRead>{resultsCount}</Badge>}
           {!!onNextClick && !!onPreviousClick && (
-            <div className="pf-v5-c-text-input-group__group">
+            <div className={textInputGroupStyles.textInputGroupGroup}>
               <Button
                 variant={ButtonVariant.plain}
                 aria-label={previousNavigationButtonAriaLabel}

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

@@ -7,6 +7,8 @@ import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 const props = {
   onChange: jest.fn(),
@@ -30,7 +32,7 @@ describe('SearchInput', () => {
 
   test('result count', () => {
     render(<SearchInput {...props} resultsCount={3} aria-label="simple text input" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(screen.getByTestId('test-id').querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
   });
 
   test('renders search input in strict mode', async () => {
@@ -64,8 +66,8 @@ describe('SearchInput', () => {
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
-    expect(input.querySelector('.pf-v5-c-text-input-group__group')).toBeInTheDocument();
-    expect(input.querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(input.querySelector(`.${textInputGroupStyles.textInputGroupGroup}`)).toBeInTheDocument();
+    expect(input.querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
 
     await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();
@@ -248,3 +250,11 @@ test('toggleAriaLabel is applied to the expandable toggle', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
+test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
+  render(
+    <SearchInput {...props} areUtilitiesDisplayed resetButtonLabel='test-util-display'/>
+  );
+  expect(screen.getByLabelText('test-util-display')).toBeVisible();
+});
+

package/src/components/Select/Select.tsx

@@ -25,6 +25,8 @@ export interface SelectPopperProps {
    * appendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface SelectToggleProps {