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

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/Checkbox/examples/Checkbox.md

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-c-check
+cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +1,3 @@
-.ws-react-c-checkbox .pf-c-check.nested {
+.ws-react-c-checkbox .pf-v5-c-check.nested {
   padding-left: var(--pf-v5-global--spacer--md);
 }

package/src/components/Chip/ChipGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
+import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import { Chip } from './Chip';

package/src/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: pf-c-chip
+cssPrefix: pf-v5-c-chip
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 ---

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/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-c-copyclipboard
+cssPrefix: pf-v5-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -13,7 +13,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-c-code-block__actions-item', className)} {...props}>
+  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
     {children}
   </div>
 );

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

@@ -26,7 +26,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
         class="pf-v5-c-code-block__actions"
       >
         <div
-          class="pf-c-code-block__actions-item"
+          class="pf-v5-c-code-block__actions-item"
         >
           button
         </div>
@@ -53,7 +53,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
 exports[`CodeBlockAction renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-code-block__actions-item"
+    class="pf-v5-c-code-block__actions-item"
   >
     action
   </div>

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-c-code-block
+cssPrefix: pf-v5-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/DataList/examples/DataList.md

@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-c-data-list
+cssPrefix: pf-v5-c-data-list
 propComponents:
   [
     'DataList',

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DatePicker/date-pick
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
-import { InputGroup } from '../InputGroup/InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
@@ -72,7 +72,7 @@ export interface DatePickerRef {
    * If the eventKey parameter is set to 'Escape', that will invoke the date pickers
    * onEscapePress event to toggle the correct control appropriately.
    */
-  toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
+  toggleCalendar: (isOpen?: boolean) => void;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
@@ -189,10 +189,8 @@ const DatePickerBase = (
     ref,
     () => ({
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
-      toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
-        if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
-          setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
-        }
+      toggleCalendar: (setOpen?: boolean) => {
+        setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
       },
       isCalendarOpen: popoverOpen
     }),
@@ -222,7 +220,7 @@ const DatePickerBase = (
         }
         showClose={false}
         isVisible={popoverOpen}
-        shouldClose={(event, _fn) => {
+        shouldClose={(event, hideFunction) => {
           event = event as KeyboardEvent;
           if (event.key === KeyTypes.Escape && selectOpen) {
             event.stopPropagation();
@@ -233,7 +231,12 @@ const DatePickerBase = (
           if (buttonRef.current && buttonRef.current.contains(event.target as Node)) {
             return false;
           }
-          setPopoverOpen(false);
+
+          if (popoverOpen) {
+            event.stopPropagation();
+            setPopoverOpen(false);
+            hideFunction();
+          }
           if (event.key === KeyTypes.Escape && popoverOpen) {
             event.stopPropagation();
           }
@@ -248,37 +251,44 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <TextInput
-              isDisabled={isDisabled}
-              aria-label={ariaLabel}
-              placeholder={placeholder}
-              validated={errorText.trim() ? 'error' : 'default'}
-              value={value}
-              onChange={onTextInput}
-              onBlur={onInputBlur}
-              onKeyPress={onKeyPress}
-              {...inputProps}
-            />
-            <button
-              ref={buttonRef}
-              // TODO: Removed style follow up work with issue #8457
-              className={css(buttonStyles.button, buttonStyles.modifiers.control)}
-              aria-label={buttonAriaLabel}
-              type="button"
-              onClick={() => setPopoverOpen(!popoverOpen)}
-              disabled={isDisabled}
-            >
-              <OutlinedCalendarAltIcon />
-            </button>
+            <InputGroupItem isFill>
+              <TextInput
+                isDisabled={isDisabled}
+                aria-label={ariaLabel}
+                placeholder={placeholder}
+                validated={errorText.trim() ? 'error' : 'default'}
+                value={value}
+                onChange={onTextInput}
+                onBlur={onInputBlur}
+                onKeyPress={onKeyPress}
+                {...inputProps}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <button
+                ref={buttonRef}
+                // TODO: Removed style follow up work with issue #8457
+                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                aria-label={buttonAriaLabel}
+                type="button"
+                onClick={() => setPopoverOpen(!popoverOpen)}
+                disabled={isDisabled}
+              >
+                <OutlinedCalendarAltIcon />
+              </button>
+            </InputGroupItem>
           </InputGroup>
         </div>
       </Popover>
-      {helperText && <div className={styles.datePickerHelperText}>{helperText}</div>}
-      {errorText.trim() && (
+      {(errorText || helperText) && (
         <div className={styles.datePickerHelperText}>
-          <HelperText>
-            <HelperTextItem variant="error">{errorText}</HelperTextItem>
-          </HelperText>
+          {errorText ? (
+            <HelperText>
+              <HelperTextItem variant="error">{errorText}</HelperTextItem>
+            </HelperText>
+          ) : (
+            helperText
+          )}
         </div>
       )}
     </div>

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

@@ -1,9 +1,12 @@
-import { screen, render } from '@testing-library/react';
-import { DatePicker } from '../DatePicker';
 import React from 'react';
+
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('../../../helpers/util.ts')
+import { HelperText, HelperTextItem } from '../../HelperText';
+import { DatePicker } from '../DatePicker';
+
+jest.mock('../../../helpers/util.ts');
 
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
@@ -60,4 +63,39 @@ test('With popover opened', async () => {
   await screen.findByRole('button', { name: 'Previous month' });
 
   expect(asFragment()).toMatchSnapshot();
-})
+});
+
+test('Shows helperText instead of "Invalid date" when no error exists', () => {
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
+  expect(screen.getByText('Help me')).toBeVisible();
+});
+
+test('Shows "Invalid date" instead of helperText when an error exists', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  await user.type(screen.getByRole('textbox'), 'not a date');
+  await user.click(document.body);
+
+  expect(screen.queryByText('Help me')).not.toBeInTheDocument();
+  expect(screen.getByText('Invalid date')).toBeVisible();
+});