@patternfly/react-core 5.0.0-alpha.108 → 5.0.0-alpha.109

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

@@ -2,109 +2,167 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="default read only text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only default"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="default read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only default"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="disabled text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    disabled=""
-    type="text"
-    value=""
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-disabled"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="disabled text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      disabled=""
+      type="text"
+      value=""
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="invalid text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="invalid text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="plain read only text input"
-    class="pf-v5-c-form-control pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only plain"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="plain read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only plain"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="read only text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="read only"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="simple text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="simple text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="validated text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="validated text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;

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

@@ -6,46 +6,55 @@ cssPrefix: pf-c-form-control
 propComponents: ['TextInput']
 ---
 
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
 ## Examples
 
 ### Basic
 
 ```ts file="./TextInputBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputDisabled.tsx"
+
 ```
 
 ### Truncated on Left
 
 ```ts file="./TextInputLeftTruncated.tsx"
+
 ```
 
 ### Read only
 
 ```ts file="./TextInputReadOnly.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./TextInputInvalid.tsx"
+
 ```
 
 ### Select text using ref
 
 ```ts file="./TextInputSelectUsingRef.tsx"
+
 ```
 
-### Icon variants
+### Custom icon
+
+```ts file="./TextInputCustomIcon.tsx"
 
-```ts file="./TextInputIcon.tsx"
 ```
 
-### Icon sprite variants
+### Custom icon and invalid
 
-**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+```ts file="./TextInputCustomIconInvalid.tsx"
 
-```ts file="./TextInputIconSprite.tsx"
 ```

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
+export const TextInputCustomIcon: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        customIcon={<ClockIcon />}
+        onChange={(_event, value) => setClock(value)}
+        aria-label="text input example with clock icon"
+      />
+    </>
+  );
+};

package/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput, ValidatedOptions } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+
+export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        validated={ValidatedOptions.error}
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+    </>
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -21,7 +20,7 @@ import {
   getSeconds
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
-
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 export interface TimePickerProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** Additional classes added to the time picker. */
@@ -502,14 +501,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const textInput = (
       <TextInput
         aria-haspopup="menu"
-        className={css(formStyles.formControl)}
         id={`${randomId}-input`}
         aria-label={ariaLabel}
         validated={isInvalid ? 'error' : 'default'}
         placeholder={placeholder}
         value={timeState || ''}
         type="text"
-        iconVariant="clock"
+        customIcon={<OutlinedClockIcon />}
         onClick={this.onInputClick}
         onChange={this.onInputChange}
         autoComplete="off"

package/src/components/TreeView/TreeViewSearch.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -29,15 +30,14 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
   ...props
 }: TreeViewSearchProps) => (
   <div className={css(styles.treeViewSearch, className)}>
-    <input
-      className={css(formStyles.formControl, formStyles.modifiers.search)}
-      onChange={onSearch}
-      id={id}
-      name={name}
-      aria-label={ariaLabel}
-      type="search"
-      {...props}
-    />
+    <div className={css(formStyles.formControl, formStyles.modifiers.icon)}>
+      <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
+      <div className={css(formStyles.formControlUtilities)}>
+        <div className={css(formStyles.formControlIcon)}>
+          <SearchIcon />
+        </div>
+      </div>
+    </div>
   </div>
 );
 TreeViewSearch.displayName = 'TreeViewSearch';

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

@@ -2903,13 +2903,35 @@ exports[`tree view renders search successfully 1`] = `
   <div
     class="pf-v5-c-tree-view__search"
   >
-    <input
-      aria-label="Search input example"
-      class="pf-v5-c-form-control pf-m-search"
-      id="input-search"
-      name="search-input"
-      type="search"
-    />
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        aria-label="Search input example"
+        id="input-search"
+        name="search-input"
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -96,7 +96,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
               id="date-time"
               aria-label="date and time picker demo"
               value={valueDate + ' ' + valueTime}
-              isReadOnly
+              readOnlyVariant="default"
             />
           </InputGroupItem>
           <InputGroupItem>{calendarButton}</InputGroupItem>

package/src/deprecated/components/Select/Select.tsx

@@ -295,7 +295,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     // Move focus to top of the menu if state.focusFirstOption was updated to true and the menu does not have custom content
     if (!prevState.focusFirstOption && this.state.focusFirstOption && !this.props.customContent) {
       const firstRef = this.refCollection.find(
-        ref =>
+        (ref) =>
           // If a select option is disabled then ref[0] will be undefined, so we want to return
           // the first ref that both a) is not null and b) is not disabled.
           ref !== null && ref[0]
@@ -467,14 +467,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? React.Children.map(children, group => {
+            ? React.Children.map(children, (group) => {
                 if (
                   React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
                   group.type === SelectGroup
                 ) {
-                  const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
-                    SelectGroupProps
-                  >[]).filter(childFilter);
+                  const filteredGroupChildren = (
+                    React.Children.toArray(group.props.children) as React.ReactElement<SelectGroupProps>[]
+                  ).filter(childFilter);
                   if (filteredGroupChildren.length > 0) {
                     return React.cloneElement(group, {
                       titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
@@ -489,7 +489,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       } else {
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? childrenArray.filter(child => {
+            ? childrenArray.filter((child) => {
                 const valueToCheck = child.props.value;
                 // Dividers don't have value and should not be filtered
                 if (!valueToCheck) {
@@ -540,10 +540,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         const newOptionValue = isCreateSelectOptionObject
           ? ({
               toString: () => newValue,
-              compareTo: value =>
-                this.toString()
-                  .toLowerCase()
-                  .includes(value.toString().toLowerCase())
+              compareTo: (value) => this.toString().toLowerCase().includes(value.toString().toLowerCase())
             } as SelectOptionObject)
           : newValue;
 
@@ -665,8 +662,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
-    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
+    this.refCollection[index] = [optionRef as unknown as HTMLElement, favoriteRef as unknown as HTMLElement];
+    this.optionContainerRefCollection[index] = optionContainerRef as unknown as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {
@@ -698,7 +695,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       // !isLoad prevents the view more button text from appearing the typeahead input
       typeaheadInputValue = optionTextElm.textContent;
     }
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
       typeaheadStoredIndex: nextIndex,
       typeaheadInputValue
@@ -900,7 +897,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         this.moveFocus(nextIndex);
       } else {
         const nextIndex = this.refCollection.findIndex(
-          ref => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
+          (ref) => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
         );
         this.moveFocus(nextIndex);
       }
@@ -920,9 +917,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const item = this.props.isGrouped
       ? (React.Children.toArray(this.props.children) as React.ReactElement[])
           .reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
-          .find(child => child.props.value.toString() === value.toString())
+          .find((child) => child.props.value.toString() === value.toString())
       : React.Children.toArray(this.props.children).find(
-          child =>
+          (child) =>
             (child as React.ReactElement).props.value &&
             (child as React.ReactElement).props.value.toString() === value.toString()
         );
@@ -945,7 +942,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       return '';
     } else {
       const multi: string[] = [];
-      React.Children.toArray(item.props.children).forEach(child => multi.push(this.findText(child)));
+      React.Children.toArray(item.props.children).forEach((child) => multi.push(this.findText(child)));
       return multi.join('');
     }
   };
@@ -1084,7 +1081,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     }
 
     if (isOpen) {
-      if (renderableItems.find(item => (item as any)?.key === 'loading') === undefined) {
+      if (renderableItems.find((item) => (item as any)?.key === 'loading') === undefined) {
         if (loadingVariant === 'spinner') {
           renderableItems.push(
             <SelectOption isLoading key="loading" value="loading">
@@ -1109,7 +1106,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const clearBtn = (
       <button
         className={css(buttonStyles.button, buttonStyles.modifiers.plain, styles.selectToggleClear)}
-        onClick={e => {
+        onClick={(e) => {
           this.clearSelection(e);
           onClear(e);
           e.stopPropagation();
@@ -1118,7 +1115,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         type="button"
         disabled={isDisabled}
         ref={this.clearRef}
-        onKeyDown={event => {
+        onKeyDown={(event) => {
           if (event.key === KeyTypes.Enter) {
             this.clearRef.current.click();
           }
@@ -1135,7 +1132,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       ) : (
         <ChipGroup {...chipGroupProps}>
           {selections &&
-            (selections as string[]).map(item => (
+            (selections as string[]).map((item) => (
               <Chip
                 key={item}
                 onClick={(e: React.MouseEvent) => onSelect(e, item)}
@@ -1151,14 +1148,13 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
             <input
               key="inline-filter-input"
               type="search"
-              className={css(formStyles.formControl, formStyles.modifiers.search)}
               onChange={this.onChange}
               placeholder={inlineFilterPlaceholderText}
-              onKeyDown={event => {
+              onKeyDown={(event) => {
                 if (event.key === KeyTypes.ArrowUp) {
                   this.handleMenuKeys(0, 0, 'up');
                   event.preventDefault();
@@ -1462,7 +1458,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     return (
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <SelectContext.Provider
             value={{
               onSelect,

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1192,11 +1192,10 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search"
+          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
         >
           <input
             autocomplete="off"
-            class="pf-v5-c-form-control pf-m-search"
             type="search"
           />
         </div>