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

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

@@ -11,51 +11,53 @@ propComponents: ['TextArea']
 ### Basic
 
 ```ts file="./TextAreaBasic.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./TextAreaInvalid.tsx"
+
 ```
 
 ### Validated
 
 ```ts file="./TextAreaValidated.tsx"
+
 ```
 
 ### Vertically resizable
 
 ```ts file="./TextAreaVerticallyResizable.tsx"
+
 ```
 
 ### Horizontally resizable
 
 ```ts file="./TextAreaHorizontallyResizable.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextAreaDisabled.tsx"
+
 ```
 
 ### Read only
 
 ```ts file="./TextAreaReadOnly.tsx"
+
 ```
 
 ### Auto resizing
 
 ```ts file="./TextAreaAutoResizing.tsx"
-```
-
-### Icon sprite variants
-
-**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="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextInput/TextInput.tsx

@@ -5,6 +5,7 @@ import { ValidatedOptions } from '../../helpers/constants';
 import { trimLeft } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 
 export enum TextInputTypes {
   text = 'text',
@@ -25,7 +26,6 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
-
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,10 +33,11 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** @deprecated Use readOnlyVariant instead. Flag to show if the text input is read only. */
-  isReadOnly?: boolean;
-  /** Read only variant. */
+  /** Flag to apply expanded styling */
+  isExpanded?: boolean;
+  /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
+  /** Flag indicating whether the input is required */
   isRequired?: boolean;
   /** Value to indicate if the text input is modified to show that validation state.
    * If set to success, text input will be modified to indicate valid state.
@@ -60,6 +61,8 @@ export interface TextInputProps
     | 'url';
   /** Value of the text input. */
   value?: string | number;
+  /** Placeholder of the text input when there is no value */
+  placeholder?: string;
   /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text input box. */
@@ -70,14 +73,8 @@ export interface TextInputProps
   onFocus?: (event?: any) => void;
   /** Callback function when text input is blurred (focus leaves) */
   onBlur?: (event?: any) => void;
-  /** icon variant */
-  iconVariant?: 'calendar' | 'clock' | 'search';
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
-  /** Custom icon url to set as the text input's background-image */
-  customIconUrl?: string;
-  /** Dimensions for the custom icon set as the text input's background-size */
-  customIconDimensions?: string;
+  /** Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon. */
+  customIcon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -92,12 +89,10 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   static displayName = 'TextInputBase';
   static defaultProps: TextInputProps = {
     'aria-label': null,
-    className: '',
     isRequired: false,
     validated: 'default' as 'success' | 'warning' | 'error' | 'default',
     isDisabled: false,
-    isReadOnly: false,
-    isIconSprite: false,
+    isExpanded: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
     onChange: (): any => undefined,
@@ -174,60 +169,61 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       className,
       type,
       value,
+      placeholder,
       validated,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       onChange,
       onFocus,
       onBlur,
       isLeftTruncated,
-      isReadOnly,
+      isExpanded,
       readOnly,
       readOnlyVariant,
       isRequired,
       isDisabled,
-      isIconSprite,
-      iconVariant,
-      customIconUrl,
-      customIconDimensions,
+      customIcon,
       ouiaId,
       ouiaSafe,
       ...props
     } = this.props;
 
-    const customIconStyle = {} as any;
-    if (customIconUrl) {
-      customIconStyle.backgroundImage = `url('${customIconUrl}')`;
-    }
-    if (customIconDimensions) {
-      customIconStyle.backgroundSize = customIconDimensions;
-    }
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <input
-        {...props}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          ((iconVariant && iconVariant !== 'search') || customIconUrl) && styles.modifiers.icon,
-          iconVariant && styles.modifiers[iconVariant],
+          isDisabled && styles.modifiers.disabled,
+          isExpanded && styles.modifiers.expanded,
+          customIcon && styles.modifiers.icon,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
         )}
-        onChange={this.handleChange}
-        type={type}
-        value={this.sanitizeInputValue(value)}
-        aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
-        required={isRequired}
-        disabled={isDisabled}
-        readOnly={!!readOnlyVariant || isReadOnly || readOnly}
-        ref={innerRef || this.inputRef}
-        {...((customIconUrl || customIconDimensions) && { style: customIconStyle })}
-        {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
+      >
+        <input
+          {...props}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          onChange={this.handleChange}
+          type={type}
+          value={this.sanitizeInputValue(value)}
+          aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          required={isRequired}
+          disabled={isDisabled}
+          readOnly={!!readOnlyVariant || readOnly}
+          ref={innerRef || this.inputRef}
+          placeholder={placeholder}
+          {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+        />
+        {(customIcon || hasStatusIcon) && (
+          <div className={css(styles.formControlUtilities)}>
+            {customIcon && <FormControlIcon customIcon={customIcon} />}
+            {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+          </div>
+        )}
+      </div>
     );
   }
 

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

@@ -59,12 +59,12 @@ describe('TextInput', () => {
 
   test('validated text input success', () => {
     render(<TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />);
-    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-success');
+    expect(screen.getByLabelText('validated text input').parentElement).toHaveClass('pf-m-success');
   });
 
   test('validated text input warning', () => {
     render(<TextInput {...props} required validated={ValidatedOptions.warning} aria-label="validated text input" />);
-    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-warning');
+    expect(screen.getByLabelText('validated text input').parentElement).toHaveClass('pf-m-warning');
   });
 
   test('validated text input error', () => {

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';