@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

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

@@ -55,7 +55,7 @@ exports[`SearchInput advanced search 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -86,7 +86,7 @@ exports[`SearchInput advanced search 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -114,7 +114,7 @@ exports[`SearchInput advanced search 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -208,7 +208,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -239,7 +239,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -547,7 +547,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -578,7 +578,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -606,7 +606,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -706,7 +706,7 @@ exports[`SearchInput search input with hint 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -730,7 +730,7 @@ exports[`SearchInput search input with hint 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -755,7 +755,7 @@ exports[`SearchInput search input with hint 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -785,7 +785,7 @@ exports[`SearchInput search input with hint 1`] = `
         type="submit"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-icon"
@@ -870,7 +870,7 @@ exports[`SearchInput simple search input 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -894,7 +894,7 @@ exports[`SearchInput simple search input 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -919,7 +919,7 @@ exports[`SearchInput simple search input 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -949,7 +949,7 @@ exports[`SearchInput simple search input 1`] = `
         type="submit"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-icon"

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/Tabs/TabAction.tsx

@@ -39,11 +39,10 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
       aria-label={ariaLabel}
       onClick={onClick}
       isDisabled={isDisabled}
+      icon={<span className={css(styles.tabsItemActionIcon)}>{children}</span>}
       {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)}
       {...props}
-    >
-      <span className={css(styles.tabsItemActionIcon)}>{children}</span>
-    </Button>
+    />
   </span>
 );
 

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

@@ -35,7 +35,7 @@ exports[`renders tab action 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__text"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-tabs__item-action-icon"

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

@@ -13,19 +13,31 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 ### Basic
 
 ```ts file="./TextInputGroupBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputGroupDisabled.tsx"
+
 ```
 
 ### Utilities and icon
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
+
+```
+
+### 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"
+
 ```
 
 ### Filters
 
 ```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/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -79,7 +79,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               />
             </button>
           </div>
@@ -152,7 +152,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                         type="button"
                       >
                         <span
-                          class="pf-v6-c-button__icon pf-m-start"
+                          class="pf-v6-c-button__icon"
                         >
                           <svg
                             aria-hidden="true"
@@ -200,7 +200,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                         type="button"
                       >
                         <span
-                          class="pf-v6-c-button__icon pf-m-start"
+                          class="pf-v6-c-button__icon"
                         >
                           <svg
                             aria-hidden="true"
@@ -237,7 +237,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__icon pf-m-start"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -14,7 +14,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [isOpen, setIsOpen] = React.useState<boolean>();
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/demos/Banner.md

@@ -21,22 +21,24 @@ import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
+    const banner = (
+      <Banner isSticky>
+        <Flex
+          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+          flexWrap={{ default: 'nowrap' }}
+        >
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>
+            This message is sticky to the top of the page.
+          </div>
+          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+        </Flex>
+      </Banner>
+    );
     return (
       <React.Fragment>
-        <DashboardWrapper breadcrumb={null}>
-          <Banner isSticky>
-            <Flex
-              justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-              flexWrap={{ default: 'nowrap' }}
-            >
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                This message is sticky to the top of the page.
-              </div>
-              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-            </Flex>
-          </Banner>
+        <DashboardWrapper banner={banner} breadcrumb={null}>
           <PageSection>
             <Content>
               <h1>Main title</h1>
@@ -114,7 +116,8 @@ class BannerDemo extends React.Component {
                 <Content>
                   <h1>Main title</h1>
                   <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
+                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
+                    <br />
                     of it’s relative line height of 1.5.
                   </p>
                 </Content>

package/src/demos/CardDemos.md

@@ -13,7 +13,7 @@ import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartB
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
-import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -128,9 +128,8 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 aria-label="Search menu items"
                 id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
-              >
-                <SearchIcon aria-hidden="true" />
-              </Button>
+                icon={<SearchIcon aria-hidden="true" />}
+              />
             </InputGroupItem>
           </InputGroup>
         </MenuSearchInput>

package/src/demos/DashboardHeader.tsx

@@ -99,7 +99,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -182,8 +182,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     Ned Username
                   </MenuToggle>

package/src/demos/DashboardWrapper.tsx

@@ -47,6 +47,7 @@ const PageTemplateTitle = (
 export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
+  banner,
   breadcrumb,
   masthead,
   sidebar,
@@ -109,6 +110,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}
+      banner={banner}
       breadcrumb={renderedBreadcrumb}
       mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
       notificationDrawer={notificationDrawer}