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

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,16 +56,19 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -247,16 +250,19 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -416,16 +422,19 @@ exports[`slider renders slider with input 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item pf-m-box"
@@ -492,16 +501,19 @@ exports[`slider renders slider with input above thumb 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Slider value input"
-              class="pf-v5-c-form-control pf-v5-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              type="number"
-              value="50"
-            />
+            <div
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="Slider value input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-type="PF4/TextInput"
+                data-ouia-safe="true"
+                type="number"
+                value="50"
+              />
+            </div>
           </div>
           <div
             class="pf-v5-c-input-group__item pf-m-box"

package/src/components/TextArea/TextArea.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import heightToken from '@patternfly/react-tokens/dist/esm/c_form_control_textarea_Height';
 import { css } from '@patternfly/react-styles';
 import { capitalize, ValidatedOptions, canUseDOM } from '../../helpers';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
@@ -23,12 +23,8 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   isRequired?: boolean;
   /** Flag to show if the text area is disabled. */
   isDisabled?: boolean;
-  /** @deprecated Use readOnlyVariant instead. Flag to show if the text area is read only. */
-  isReadOnly?: boolean;
   /** Read only variant. */
   readOnlyVariant?: 'default' | 'plain';
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
   /** Flag to modify height based on contents. */
   autoResize?: boolean;
   /** Value to indicate if the text area is modified to show that validation state.
@@ -55,7 +51,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     className: '',
     isRequired: false,
     isDisabled: false,
-    isIconSprite: false,
     validated: 'default',
     resizeOrientation: 'both',
     'aria-label': null as string
@@ -64,7 +59,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
   inputRef = React.createRef<HTMLTextAreaElement>();
 
   private setAutoHeight = (field: HTMLTextAreaElement) => {
-    field.style.setProperty(heightToken.name, 'inherit');
+    const parent = field.parentElement;
+    parent.style.setProperty('height', 'inherit');
     const computed = window.getComputedStyle(field);
     // Calculate the height
     const height =
@@ -73,7 +69,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       field.scrollHeight +
       parseInt(computed.getPropertyValue('padding-bottom')) +
       parseInt(computed.getPropertyValue('border-bottom-width'));
-    field.style.setProperty(heightToken.name, `${height}px`);
+    parent.style.setProperty('height', `${height}px`);
   };
 
   constructor(props: TextAreaProps) {
@@ -110,8 +106,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       validated,
       isRequired,
       isDisabled,
-      isIconSprite,
-      isReadOnly,
       readOnlyVariant,
       resizeOrientation,
       innerRef,
@@ -122,27 +116,40 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal';
+    const orientation = `resize${capitalize(resizeOrientation)}` as
+      | 'resizeVertical'
+      | 'resizeHorizontal'
+      | 'resizeBoth';
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+
     return (
-      <textarea
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          className,
-          resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
+          resizeOrientation && styles.modifiers[orientation],
+          isDisabled && styles.modifiers.disabled,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+          className
+        )}
+      >
+        <textarea
+          onChange={this.handleChange}
+          {...(typeof this.props.defaultValue !== 'string' && { value })}
+          aria-invalid={validated === ValidatedOptions.error}
+          required={isRequired}
+          disabled={isDisabled || disabled}
+          readOnly={!!readOnlyVariant}
+          ref={innerRef || this.inputRef}
+          {...props}
+        />
+        {hasStatusIcon && (
+          <div className={css(styles.formControlUtilities)}>
+            <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
+          </div>
         )}
-        onChange={this.handleChange}
-        {...(typeof this.props.defaultValue !== 'string' && { value })}
-        aria-invalid={validated === ValidatedOptions.error}
-        required={isRequired}
-        disabled={isDisabled || disabled}
-        readOnly={!!readOnlyVariant || isReadOnly}
-        ref={innerRef || this.inputRef}
-        {...props}
-      />
+      </div>
     );
   }
 }

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

@@ -32,7 +32,7 @@ test('Renders simple text input', () => {
 test('Renders with custom class passed', () => {
   render(<TextArea aria-label="custom class textarea" className="test-class" />);
 
-  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('test-class');
 });
 
 test('Renders text area with required attribute using isRequired', () => {
@@ -69,17 +69,17 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-v5-c-form-control');
 });
 
 test('Renders validated text area with success className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-success');
 });
 
 test('Renders validated text area with warning className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-warning');
 });
 
 test('Renders invalid text area', () => {
@@ -94,12 +94,12 @@ test('Text area is not invalid by default', () => {
 
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
 });
 
 test('Renders horizontally resizable text area', () => {
   render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
 test('Throws console error when no aria-label or id is given', () => {

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

@@ -2,13 +2,16 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="test textarea"
-    class="pf-v5-c-form-control custom class"
-    disabled=""
-    required=""
-    style="--pf-v5-c-form-control--textarea--Height: 6px;"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
+    style="height: 6px;"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-label="test textarea"
+      disabled=""
+      required=""
+    />
+  </div>
 </DocumentFragment>
 `;

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', () => {