@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.2

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

@@ -12,56 +12,74 @@ exports[`simple fileupload 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <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=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="simple-text-file-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="true"
-          class="pf-v5-c-button pf-m-control pf-m-disabled"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
+          <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"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="simple-text-file-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="true"
+            class="pf-v5-c-button pf-m-control pf-m-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <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

@@ -11,55 +11,73 @@ exports[`simple fileuploadfield 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <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=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="custom-file-upload-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+          <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"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="custom-file-upload-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <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/FileUpload/examples/FileUpload.md

@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-c-file-upload
+cssPrefix: pf-v5-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload
@@ -71,3 +71,16 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 
 ```ts file="./FileUploadCustomUpload.tsx"
 ```
+
+## Types
+
+File upload uses the `DropzoneOptions` type from react-dropzone. It is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).
+
+Additionally, it calls the `onDataChange`, `onReadFailed`, `onReadFinished`, and `onReadStarted` callbacks with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
+
+```noLive
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/Form/FormAlert.tsx

@@ -13,9 +13,9 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
   className = '',
   ...props
 }: FormAlertProps) => (
-  // There are currently no associated styles with the pf-c-form_alert class.
+  // There are currently no associated styles with the pf-v5-c-form_alert class.
   // Therefore, it does not exist in react-styles
-  <div {...props} className={css('pf-c-form__alert', className)}>
+  <div {...props} className={css('pf-v5-c-form__alert', className)}>
     {children}
   </div>
 );

package/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Form Alert component should render form group required variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__alert"
+    class="pf-v5-c-form__alert"
   />
 </DocumentFragment>
 `;

package/src/components/Form/examples/Form.md

@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-c-form
+cssPrefix: pf-v5-c-form
 propComponents:
   [
     'ActionGroup',

package/src/components/Form/examples/FormState.tsx

@@ -76,15 +76,15 @@ export const FormState = () => {
               </MenuToggle>
             )}
             onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
-            onSelect={(_, itemId) => {
-              setValue('select-id', itemId as string);
+            onSelect={(_, value) => {
+              setValue('select-id', value as string);
               setIsSelectOpen(false);
             }}
           >
             <SelectList>
-              <SelectOption itemId="Option 1">Option 1</SelectOption>
-              <SelectOption itemId="Option 2">Option 2</SelectOption>
-              <SelectOption itemId="Option 3">Option 3</SelectOption>
+              <SelectOption value="Option 1">Option 1</SelectOption>
+              <SelectOption value="Option 2">Option 2</SelectOption>
+              <SelectOption value="Option 3">Option 3</SelectOption>
             </SelectList>
           </Select>
 

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,40 @@ 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'} />}
+          <div className={css(styles.formControlToggleIcon)}>
+            <CaretDownIcon />
+          </div>
+        </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();
   });