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

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();
   });