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

package/src/components/Card/examples/{CardSelectableA11yHighlight.tsx → CardDeprecatedSelectableA11yHighlight.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
-export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
+export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
 
   const onKeyDown = (event: React.KeyboardEvent) => {

package/src/components/Card/examples/CardSelectable.tsx

@@ -1,129 +1,74 @@
 import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 
-export const CardSelectable: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
+export const SelectableCard: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
 
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
+  const id1 = 'selectable-card-input-1';
+  const id2 = 'selectable-card-input-2';
+  const id3 = 'selectable-card-input-3';
 
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
 
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(false);
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
   };
 
-  const dropdownItems = (
-    <>
-      <DropdownItem key="action">Action</DropdownItem>
-      {/* Prevent default onClick functionality for example purposes */}
-      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Link
-      </DropdownItem>
-      <DropdownItem key="disabled action" isDisabled>
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem key="separated action">Separated Action</DropdownItem>
-      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </>
-  );
-
-  const headerActions = (
-    <>
-      <Dropdown
-        onSelect={onSelect}
-        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
   return (
     <React.Fragment>
-      <Card
-        id="selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'selectable-first-card'}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      <Card id="selectable-card-example-1" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'selectable-card-example-1',
+            name: id1,
+            isChecked: isChecked1,
+            onChange
+          }}
+        >
+          <CardTitle>First card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable.</CardBody>
       </Card>
-      <br />
-      <Card
-        id="selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'selectable-second-card'}
-      >
-        <CardTitle>Second card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      <Card id="selectable-card-example-2" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'selectable-card-example-2',
+            name: id2,
+            isChecked: isChecked2,
+            onChange
+          }}
+        >
+          <CardTitle>Second card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable.</CardBody>
       </Card>
-      <br />
-      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised hasSelectableInput>
-        <CardTitle>Third card</CardTitle>
-        <CardBody>This is a raised but disabled card.</CardBody>
+      <Card id="selectable-card-example-3" isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'selectable-card-example-3',
+            name: id3,
+            isChecked: isChecked3,
+            onChange
+          }}
+        >
+          <CardTitle>Third card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable but disabled.</CardBody>
       </Card>
     </React.Fragment>
   );

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const SingleSelectableCard: React.FunctionComponent = () => {
+  const id1 = 'single-selectable-card-input-1';
+  const id2 = 'single-selectable-card-input-2';
+  const id3 = 'single-selectable-card-input-3';
+
+  return (
+    <React.Fragment>
+      <Card id="single-selectable-card-example-1" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>First card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable.</CardBody>
+      </Card>
+      <Card id="single-selectable-card-example-2" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-2',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>Second card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable.</CardBody>
+      </Card>
+      <Card id="single-selectable-card-example-3" isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-3',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>Third card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable but disabled.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -10,6 +10,8 @@ export interface CheckboxProps
     OUIAProps {
   /** Additional classes added to the checkbox. */
   className?: string;
+  /** Additional classed added to the radio input */
+  inputClassName?: string;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -74,6 +76,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     const {
       'aria-label': ariaLabel,
       className,
+      inputClassName,
       onChange,
       isValid,
       isDisabled,
@@ -109,14 +112,14 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
         <input
           {...props}
-          className={css(styles.checkInput)}
+          className={css(styles.checkInput, inputClassName)}
           type="checkbox"
           onChange={this.handleChange}
           aria-invalid={!isValid}
           aria-label={ariaLabel}
           disabled={isDisabled}
           required={isRequired}
-          ref={elem => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           {...checkedProps}
           {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         />

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -131,7 +131,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       expanded: !prevState.expanded
     }));
   };
@@ -183,7 +183,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
@@ -223,7 +223,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
         )}
         {variant !== 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
                   {variant === 'expansion' && (
@@ -237,7 +237,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     />
                   )}
                   <TextInput
-                    isReadOnly={isReadOnly || this.state.expanded}
+                    readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -10,17 +10,20 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <input
-        aria-invalid="false"
-        aria-label="'Copyable input'"
+      <div
         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="text-input-0"
-        type="text"
-        value="[object Object]"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="'Copyable input'"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          id="text-input-0"
+          type="text"
+          value="[object Object]"
+        />
+      </div>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"

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

@@ -15,17 +15,20 @@ exports[`With popover opened 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Date picker"
+          <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"
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value=""
-          />
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -153,16 +156,19 @@ exports[`With popover opened 1`] = `
                   <div
                     class="pf-v5-c-calendar-month__header-year"
                   >
-                    <input
-                      aria-invalid="false"
-                      aria-label="Select year"
+                    <div
                       class="pf-v5-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      type="number"
-                      value="1969"
-                    />
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Select year"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-type="PF4/TextInput"
+                        data-ouia-safe="true"
+                        type="number"
+                        value="1969"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -772,18 +778,21 @@ exports[`disabled date picker 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="disabled date picker"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            disabled=""
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value="2020-11-20"
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-disabled"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="disabled date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              disabled=""
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value="2020-11-20"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"

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