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

package/src/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-v5-c-number-input
+cssPrefix: pf-v6-c-number-input
 propComponents: ['NumberInput']
 ---
 

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-v5-c-overflow-menu
+cssPrefix: pf-v6-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/Page.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
-import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
+import { Drawer, DrawerContent, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';
 import { PageGroup, PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -345,9 +345,7 @@ class Page extends React.Component<PageProps, PageState> {
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>
               <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={(event) => onNotificationDrawerExpand(event)}>
-                <DrawerContent panelContent={panelContent}>
-                  <DrawerContentBody>{main}</DrawerContentBody>
-                </DrawerContent>
+                <DrawerContent panelContent={panelContent}>{main}</DrawerContent>
               </Drawer>
             </div>
           )}

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

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-v5-c-page
+cssPrefix: pf-v6-c-page
 propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
@@ -115,7 +115,7 @@ To add additional components and information to a group, you may use the followi
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v5-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v6-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 

package/src/components/Pagination/examples/Pagination.md

@@ -1,7 +1,7 @@
 ---
 id: Pagination
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-pagination
 propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
 ouia: true
 ---

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-v5-c-panel
+cssPrefix: pf-v6-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-v5-c-popover
+cssPrefix: pf-v6-c-popover
 propComponents: ['Popover']
 ---
 

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-v5-c-progress
+cssPrefix: pf-v6-c-progress
 propComponents: ['Progress']
 ---
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,7 +1,7 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-v5-c-progress-stepper
+cssPrefix: pf-v6-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-radio
+cssPrefix: pf-v6-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/examples/SearchInput.md

@@ -1,7 +1,7 @@
 ---
 id: 'Search input'
 section: components
-cssPrefix: 'pf-v5-c-search-input'
+cssPrefix: 'pf-v6-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---
 

package/src/components/Select/Select.tsx

@@ -117,7 +117,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       setTimeout(() => {
         const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-select
+cssPrefix: pf-v6-c-select
 propComponents:
   ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
 ouia: true

package/src/components/Sidebar/examples/Sidebar.md

@@ -1,6 +1,6 @@
 ---
 id: Sidebar
-cssPrefix: pf-v5-c-sidebar
+cssPrefix: pf-v6-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---
@@ -43,4 +43,4 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 
 ### Padding on content
 ```ts file="./SidebarPaddingContent.tsx"
-```
+```

package/src/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-v5-c-simple-list
+cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
 

package/src/components/Skeleton/examples/Skeleton.md

@@ -1,17 +1,17 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-v5-c-skeleton
+cssPrefix: pf-v6-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 ## Examples
 

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_font_size_4xl.name}
+    {t_global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_font_size_3xl.name}
+    {t_global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_font_size_2xl.name}
+    {t_global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_font_size_xl.name}
+    {t_global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_font_size_lg.name}
+    {t_global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_font_size_md.name}
+    {t_global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_font_size_sm.name}
+    {t_global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-v5-c-skip-to-content
+cssPrefix: pf-v6-c-skip-to-content
 propComponents: ['SkipToContent']
 ---
 

package/src/components/Slider/Slider.tsx

@@ -474,7 +474,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           </div>
         )}
         {hasTooltipOverThumb ? (
-          <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
+          <Tooltip
+            className={css('pf-v6-m-tabular-nums')}
+            triggerRef={thumbRef}
+            entryDelay={0}
+            content={findAriaTextValue()}
+          >
             {thumbComponent}
           </Tooltip>
         ) : (

package/src/components/Slider/examples/Slider.md

@@ -1,7 +1,7 @@
 ---
 id: Slider
 section: components
-cssPrefix: pf-v5-c-slider
+cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 

package/src/components/Spinner/examples/Spinner.md

@@ -1,7 +1,7 @@
 ---
 id: Spinner
 section: components
-cssPrefix: pf-v5-c-spinner
+cssPrefix: pf-v6-c-spinner
 propComponents: ['Spinner']
 ---
 

package/src/components/Switch/examples/Switch.md

@@ -1,7 +1,7 @@
 ---
 id: Switch
 section: components
-cssPrefix: pf-v5-c-switch
+cssPrefix: pf-v6-c-switch
 propComponents: ['Switch']
 ouia: true
 ---

package/src/components/Tabs/examples/Tabs.md

@@ -1,7 +1,7 @@
 ---
 id: Tabs
 section: components
-cssPrefix: pf-v5-c-tabs
+cssPrefix: pf-v6-c-tabs
 propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---

package/src/components/TextArea/examples/TextArea.md

@@ -2,7 +2,7 @@
 id: Text area
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 

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

@@ -2,7 +2,7 @@
 id: Text input
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -11,6 +11,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   isDisabled?: boolean;
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
+  /** Status variant of the text input group. */
+  validated?: 'success' | 'warning' | 'error';
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -24,6 +26,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   className,
   isDisabled,
   isPlain,
+  validated,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -31,13 +34,14 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   const textInputGroupRef = innerRef || ref;
 
   return (
-    <TextInputGroupContext.Provider value={{ isDisabled }}>
+    <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
       <div
         ref={textInputGroupRef}
         className={css(
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
+          validated && styles.modifiers[validated],
           className
         )}
         {...props}

package/src/components/TextInputGroup/TextInputGroupIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface TextInputGroupIconProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Content rendered inside the text input group utilities div */
+  children?: React.ReactNode;
+  /** Additional classes applied to the text input group utilities container */
+  className?: string;
+  /** Flag indicating if the icon is a status icon and should inherit status styling. */
+  isStatus?: boolean;
+}
+
+export const TextInputGroupIcon: React.FunctionComponent<TextInputGroupIconProps> = ({
+  children,
+  className,
+  isStatus,
+  ...props
+}: TextInputGroupIconProps) => (
+  <span className={css(styles.textInputGroupIcon, isStatus && styles.modifiers.status, className)} {...props}>
+    {children}
+  </span>
+);
+
+TextInputGroupIcon.displayName = 'TextInputGroupIcon';

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
+import { TextInputGroupIcon } from './TextInputGroupIcon';
+import { statusIcons, ValidatedOptions } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -78,9 +80,10 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   inputId,
   ...props
 }: TextInputGroupMainProps) => {
-  const { isDisabled } = React.useContext(TextInputGroupContext);
+  const { isDisabled, validated } = React.useContext(TextInputGroupContext);
   const ref = React.useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
+  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -100,7 +103,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             id={inputId}
           />
         )}
-        {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
+        {icon && <TextInputGroupIcon>{icon}</TextInputGroupIcon>}
         <input
           ref={textInputGroupInputInputRef}
           type={type}
@@ -119,6 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
+        {validated && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
       </span>
     </div>
   );

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

@@ -34,20 +34,42 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass('custom-class');
   });
 
-  it('does not render with the pf-m-disabled class when not disabled', () => {
+  it(`does not render with the ${styles.modifiers.disabled} class when not disabled`, () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).not.toHaveClass('pf-m-disabled');
+    expect(inputGroup).not.toHaveClass(styles.modifiers.disabled);
   });
 
-  it('renders with the pf-m-disabled class when disabled', () => {
+  it(`renders with the ${styles.modifiers.disabled} class when disabled`, () => {
     render(<TextInputGroup isDisabled>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).toHaveClass('pf-m-disabled');
+    expect(inputGroup).toHaveClass(styles.modifiers.disabled);
+  });
+
+  it(`renders with class ${styles.modifiers.success} when validated="success"`, () => {
+    render(<TextInputGroup validated="success">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.success);
+  });
+  it(`renders with class ${styles.modifiers.warning} when validated="warning"`, () => {
+    render(<TextInputGroup validated="warning">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.warning);
+  });
+  it(`renders with class ${styles.modifiers.error} when validated="error"`, () => {
+    render(<TextInputGroup validated="error">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -242,6 +242,16 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeVisible();
   });
 
+  it(`Renders status icon with class ${styles.modifiers.status} when a validated prop is passed`, () => {
+    render(
+      <TextInputGroupContext.Provider value={{ validated: 'success' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Text input group
 section: components
-cssPrefix: pf-v5-c-text-input-group
+cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
@@ -10,22 +10,44 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
 
-### Basic
+### Basic text input group 
+
+A basic text input group updates its contents as users enter text.
 
 ```ts file="./TextInputGroupBasic.tsx"
+
 ```
 
-### Disabled
+### Disabled text input group
+
+To prevent users from making edits to a text input group, you can disable it using `isDisabled`.
 
 ```ts file="./TextInputGroupDisabled.tsx"
+
 ```
 
-### Utilities and icon
+### With icon and utilities
+
+To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `icon` within `<TextInputGroupMain>`.
+
+You can also add additional actions or utilities via `<TextInputGroupUtilities>`. The following example includes a clear button that allows users to remove their previous input. 
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
+
 ```
 
-### Filters
+### With validation
+
+You can add a validation status to a `<TextInputGroup>` by passing the `validated` property with a value of either "success", "warning", or "error".
+
+```ts file="./TextInputGroupWithStatus.tsx"
+
+```
+
+### With filters
+
+When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `<LabelGroup>` to `<TextInputGroupMain>`, with all of the labels that a user has selected. Users can interact with these labels as needed.
 
 ```ts file="./TextInputGroupFilters.tsx"
+
 ```

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  ValidatedOptions,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TextInputGroupWithStatus: React.FunctionComponent = () => {
+  const [successValue, setSuccessValue] = React.useState('Success validation');
+  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = React.useState(
+    'Error validation with custom non-status icon at start and utilities'
+  );
+
+  /** show the input clearing button only when the input is not empty */
+  const showClearButton = !!errorValue;
+
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
+  /** callback for clearing the text input */
+  const clearInput = () => {
+    setErrorValue('');
+  };
+
+  return (
+    <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapSm' }}>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.success}>
+          <TextInputGroupMain value={successValue} onChange={(_event, value) => setSuccessValue(value)} />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.warning}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={warningValue}
+            onChange={(_event, value) => setWarningValue(value)}
+          />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup validated={ValidatedOptions.error}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={errorValue}
+            onChange={(_event, value) => setErrorValue(value)}
+          />
+          {showUtilities && (
+            <TextInputGroupUtilities>
+              {showClearButton && (
+                <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
+              )}
+            </TextInputGroupUtilities>
+          )}
+        </TextInputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};

package/src/components/TimePicker/examples/TimePicker.md

@@ -2,7 +2,7 @@
 id: Time picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-time-picker
+cssPrefix: pf-v6-c-time-picker
 propComponents: ['TimePicker']
 ---