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

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/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Checkbox controlled - 3rd state 1`] = `
       aria-label="check"
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-2"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -30,7 +30,7 @@ exports[`Checkbox controlled 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-1"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -49,7 +49,7 @@ exports[`Checkbox isDisabled 1`] = `
       aria-label="check"
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-4"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       disabled=""
       id="check"
@@ -70,7 +70,7 @@ exports[`Checkbox label is function 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-6"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -98,7 +98,7 @@ exports[`Checkbox label is node 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-7"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -126,7 +126,7 @@ exports[`Checkbox label is string 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-5"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -153,7 +153,7 @@ exports[`Checkbox passing HTML attribute 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-9"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -179,7 +179,7 @@ exports[`Checkbox passing class 1`] = `
       checked=""
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-8"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"
@@ -204,7 +204,7 @@ exports[`Checkbox uncontrolled 1`] = `
       aria-label="check"
       class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-3"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="check"
       type="checkbox"

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/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Chip closable 1`] = `
   <div
     class="pf-v5-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-2"
-    data-ouia-component-type="PF4/Chip"
+    data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
     id="chip_one"
   >
@@ -28,7 +28,7 @@ exports[`Chip closable 1`] = `
         aria-labelledby="remove_chip_one chip_one"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="close"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_chip_one"
         type="button"
@@ -37,8 +37,10 @@ exports[`Chip closable 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -55,7 +57,7 @@ exports[`Chip closable with tooltip 1`] = `
   <div
     class="pf-v5-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-3"
-    data-ouia-component-type="PF4/Chip"
+    data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
     id="chip_one"
   >
@@ -78,7 +80,7 @@ exports[`Chip closable with tooltip 1`] = `
         aria-labelledby="remove_chip_one chip_one"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="close"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_chip_one"
         type="button"
@@ -87,8 +89,10 @@ exports[`Chip closable with tooltip 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -105,7 +109,7 @@ exports[`Chip custom max-width text 1`] = `
   <div
     class="pf-v5-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-5"
-    data-ouia-component-type="PF4/Chip"
+    data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
     style="--pf-v5-c-chip__text--MaxWidth: 100px;"
     textmaxwidth="100px"
@@ -129,7 +133,7 @@ exports[`Chip custom max-width text 1`] = `
         aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="close"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_pf-random-id-4"
         type="button"
@@ -138,8 +142,10 @@ exports[`Chip custom max-width text 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -156,7 +162,7 @@ exports[`Chip overflow 1`] = `
   <div
     class="pf-v5-c-chip pf-m-overflow my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-1"
-    data-ouia-component-type="PF4/OverflowChip"
+    data-ouia-component-type="PF5/OverflowChip"
     data-ouia-safe="true"
   >
     <span
@@ -177,7 +183,7 @@ exports[`Chip readonly 1`] = `
   <div
     class="pf-v5-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-4"
-    data-ouia-component-type="PF4/Chip"
+    data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
   >
     <span
@@ -199,7 +205,7 @@ exports[`Chip with role='gridcell' 1`] = `
   <div
     class="pf-v5-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-6"
-    data-ouia-component-type="PF4/Chip"
+    data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
     role="gridcell"
   >
@@ -222,7 +228,7 @@ exports[`Chip with role='gridcell' 1`] = `
         aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="close"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_pf-random-id-5"
         type="button"
@@ -231,8 +237,10 @@ exports[`Chip with role='gridcell' 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"