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

package/src/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -8,15 +8,10 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -29,6 +24,7 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action" description="This is a description">

package/src/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -16,15 +16,10 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -37,6 +32,7 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownGroup>
         <DropdownList>

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -9,15 +9,10 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -36,6 +31,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           <EllipsisVIcon />
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action">

package/src/components/FileUpload/FileUploadField.tsx

@@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
         <InputGroup>
           <InputGroupItem isFill>
             <TextInput
-              isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
               name={`${id}-filename`}

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

@@ -15,21 +15,24 @@ exports[`simple fileupload 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-describedby="simple-text-file-browse-button"
-            aria-invalid="false"
-            aria-label="Drag a file here or browse to upload"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="simple-text-file-filename"
-            name="simple-text-file-filename"
-            placeholder="Drag a file here or browse to upload"
-            readonly=""
-            type="text"
-            value=""
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          >
+            <input
+              aria-describedby="simple-text-file-browse-button"
+              aria-invalid="false"
+              aria-label="Drag a file here or browse to upload"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="simple-text-file-filename"
+              name="simple-text-file-filename"
+              placeholder="Drag a file here or browse to upload"
+              readonly=""
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -66,14 +69,17 @@ exports[`simple fileupload 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <textarea
-        aria-invalid="false"
-        aria-label="File upload"
+      <div
         class="pf-v5-c-form-control pf-m-resize-vertical"
-        id="simple-text-file"
-        name="simple-text-file"
-        placeholder=""
-      />
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="File upload"
+          id="simple-text-file"
+          name="simple-text-file"
+          placeholder=""
+        />
+      </div>
     </div>
     <input
       style="display: none;"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -14,21 +14,24 @@ exports[`simple fileuploadfield 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-describedby="custom-file-upload-browse-button"
-            aria-invalid="false"
-            aria-label="Do something custom with this!"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="custom-file-upload-filename"
-            name="custom-file-upload-filename"
-            placeholder="Do something custom with this!"
-            readonly=""
-            type="text"
-            value=""
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          >
+            <input
+              aria-describedby="custom-file-upload-browse-button"
+              aria-invalid="false"
+              aria-label="Do something custom with this!"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="custom-file-upload-filename"
+              name="custom-file-upload-filename"
+              placeholder="Do something custom with this!"
+              readonly=""
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -64,14 +67,17 @@ exports[`simple fileuploadfield 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <textarea
-        aria-invalid="false"
-        aria-label="File upload"
+      <div
         class="pf-v5-c-form-control pf-m-resize-vertical"
-        id="custom-file-upload"
-        name="custom-file-upload"
-        placeholder=""
-      />
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="File upload"
+          id="custom-file-upload"
+          name="custom-file-upload"
+          placeholder=""
+        />
+      </div>
     </div>
     <p>
       A custom preview of the uploaded file can be passed as children

package/src/components/FormControl/FormControlIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import { css } from '@patternfly/react-styles';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  error: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon
+};
+
+export interface FormControlIconProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional class names added to the text input icon wrapper. */
+  className?: string;
+  /** A custom icon to render instead of a status icon. */
+  customIcon?: React.ReactNode;
+  /** The status icon to render. */
+  status?: 'success' | 'error' | 'warning';
+}
+
+export const FormControlIcon = ({ status, customIcon, className, ...props }: FormControlIconProps) => {
+  const StatusIcon = status && statusIcons[status];
+
+  return (
+    <div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
+      {customIcon || <StatusIcon />}
+    </div>
+  );
+};

package/src/components/FormSelect/FormSelect.tsx

@@ -3,7 +3,9 @@ import styles from '@patternfly/react-styles/css/components/FormControl/form-con
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { ValidatedOptions } from '../../helpers/constants';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface FormSelectProps
   extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>,
@@ -23,8 +25,6 @@ export interface FormSelectProps
   isDisabled?: boolean;
   /** Sets the FormSelect required. */
   isRequired?: boolean;
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
   /** Optional callback for updating when selection loses focus */
   onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection gets focus */
@@ -58,7 +58,6 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     validated: 'default',
     isDisabled: false,
     isRequired: false,
-    isIconSprite: false,
     onBlur: (): any => undefined,
     onFocus: (): any => undefined,
     onChange: (): any => undefined,
@@ -70,31 +69,38 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
   };
 
   render() {
-    const { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe, ...props } =
-      this.props;
+    const { children, className, value, validated, isDisabled, isRequired, ouiaId, ouiaSafe, ...props } = this.props;
     /* find selected option and get placeholder flag */
     const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any;
     const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+
     return (
-      <select
-        {...props}
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
-          className,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          isSelectedPlaceholder && styles.modifiers.placeholder
+          isDisabled && styles.modifiers.disabled,
+          isSelectedPlaceholder && styles.modifiers.placeholder,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+          className
         )}
-        aria-invalid={validated === ValidatedOptions.error}
-        {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        onChange={this.handleChange}
-        disabled={isDisabled}
-        required={isRequired}
-        value={value}
       >
-        {children}
-      </select>
+        <select
+          {...props}
+          aria-invalid={validated === ValidatedOptions.error}
+          {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+          onChange={this.handleChange}
+          disabled={isDisabled}
+          required={isRequired}
+          value={value}
+        >
+          {children}
+        </select>
+        <div className={css(styles.formControlUtilities)}>
+          {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+          <FormControlIcon customIcon={<CaretDownIcon />} />
+        </div>
+      </div>
     );
   }
 }

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

@@ -147,7 +147,7 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect).toHaveClass('pf-m-success');
+    expect(formSelect.parentElement).toHaveClass('pf-m-success');
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -160,7 +160,7 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect).toHaveClass('pf-m-warning');
+    expect(formSelect.parentElement).toHaveClass('pf-m-warning');
     expect(asFragment()).toMatchSnapshot();
   });