@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.70

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

@@ -1,18 +1,19 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody, Button } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isSelected1, setIsSelected1] = React.useState(false);
+  const [isClicked, setIsClicked] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';
   const id3 = 'clickable-selectable-card-input-3';
 
   const onClick = () => {
-    setIsSelected1((prevState) => !prevState);
+    setIsClicked((prevState) => !prevState);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
@@ -31,64 +32,97 @@ export const CardClickable: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
-            name: id1,
-            isChecked: isChecked1,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button variant="link" isInline onClick={onClick}>
-              First card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
-            name: id2,
-            isChecked: isChecked2,
-            onChange
-          }}
-        >
-          <CardTitle>Second Card</CardTitle>
-        </CardHeader>
-        <CardBody>
-          This card is selectable and has a link in the card body that navigates to{' '}
-          <Button variant="link" isInline component="a" href="#">
-            Patternfly
-          </Button>
-          .
-        </CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
-            name: id3,
-            isChecked: isChecked3,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
-              Third card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card is clickable and selectable, but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-clickable-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card
+            id="clickable-selectable-card-example-1"
+            isClickable
+            isSelectable
+            isSelected={isChecked1}
+            isClicked={isClicked}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+                name: id1,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button variant="link" isInline onClick={onClick}>
+                  First card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-2"
+            isClickable
+            isSelectable
+            isSelected={isChecked2}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
+                name: id2,
+                onChange
+              }}
+            >
+              <CardTitle>Second Card</CardTitle>
+            </CardHeader>
+            <CardBody>
+              This card is selectable and has a link in the card body that navigates to{' '}
+              <Button variant="link" isInline component="a" href="#">
+                Patternfly
+              </Button>
+              .
+            </CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-3"
+            isClickable
+            isSelectable
+            isDisabled
+            isSelected={isChecked3}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
+                name: id3,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
+                  Third card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable and selectable, but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };

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

@@ -13,7 +13,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+import pfLogoSmall from '../../PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardSecondary: React.FunctionComponent = () => (
+  <Card ouiaId="SecondaryCard" variant="secondary">
+    <CardTitle>Title</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -26,50 +27,78 @@ export const SelectableCard: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <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>
-      <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>
-      <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>
+    <>
+      <Checkbox
+        label="Secondary card styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        id="toggle-variant-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card
+            id="selectable-card-example-1"
+            isSelectable
+            isSelected={isChecked1}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'selectable-card-example-1',
+                name: id1,
+                onChange
+              }}
+            >
+              <CardTitle>First card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card
+            id="selectable-card-example-2"
+            isSelectable
+            isSelected={isChecked2}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'selectable-card-example-2',
+                name: id2,
+                onChange
+              }}
+            >
+              <CardTitle>Second card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card
+            id="selectable-card-example-3"
+            isSelectable
+            isDisabled
+            isSelected={isChecked3}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'selectable-card-example-3',
+                name: id3,
+                onChange
+              }}
+            >
+              <CardTitle>Third card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, Divider } from '@patternfly/react-core';
+
+export const CardWithDividers: React.FunctionComponent = () => (
+  <Card ouiaId="CardWithDividers">
+    <CardTitle>Title</CardTitle>
+    <Divider />
+    <CardBody>Body</CardBody>
+    <Divider />
+    <CardBody>Body</CardBody>
+    <Divider />
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);

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

@@ -15,7 +15,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import pfLogo from '../../assets/pfLogo.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -85,23 +85,23 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
 
   return (
     <>
-      <Card>
-        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
-          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
-        </CardHeader>
-        <CardTitle>Title</CardTitle>
-        <CardBody>Body</CardBody>
-        <CardFooter>Footer</CardFooter>
-      </Card>
-      <div style={{ marginTop: '20px' }}>
-        <Checkbox
-          label="actions hasNoOffset"
-          isChecked={hasNoOffset}
-          onChange={(_event, checked) => toggleOffset(checked)}
-          aria-label="remove actions offset"
-          id="toggle-actions-offset"
-          name="toggle-actions-offset"
-        />
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Card>
+          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
+          </CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
       </div>
     </>
   );

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (

package/src/components/Checkbox/Checkbox.tsx

@@ -8,10 +8,14 @@ import { ASTERISK } from '../../helpers/htmlConstants';
 export interface CheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
     OUIAProps {
-  /** Additional classes added to the checkbox. */
+  /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
+   */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the checkbox input. */
   inputClassName?: string;
+  /** Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
+  isLabelWrapped?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -25,6 +29,8 @@ export interface CheckboxProps
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
+  /** Sets the position of the label. Defaults to 'end' (after the checkbox input). */
+  labelPosition?: 'start' | 'end';
   /** Id of the checkbox. */
   id: string;
   /** Aria-label of the checkbox. */
@@ -33,7 +39,7 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
-  /** Sets the input wrapper component to render. Defaults to <div> */
+  /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -52,13 +58,13 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
+    isLabelWrapped: false,
     isValid: true,
     isDisabled: false,
     isRequired: false,
     isChecked: false,
     onChange: defaultOnChange,
-    ouiaSafe: true,
-    component: 'div'
+    ouiaSafe: true
   };
 
   constructor(props: any) {
@@ -78,6 +84,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       className,
       inputClassName,
       onChange,
+      isLabelWrapped,
+      labelPosition = 'end',
       isValid,
       isDisabled,
       isRequired,
@@ -89,7 +97,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       body,
       ouiaId,
       ouiaSafe,
-      component: Component,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -107,31 +115,57 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    const inputRendered = (
+      <input
+        {...props}
+        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)}
+        {...checkedProps}
+        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+      />
+    );
+
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel ? props.id : undefined}
+      >
+        {label}
+        {isRequired && (
+          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+            {ASTERISK}
+          </span>
+        )}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
     return (
-      <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
-        <input
-          {...props}
-          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)}
-          {...checkedProps}
-          {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        />
-        {label && (
-          <label className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-            {label}
-            {isRequired && (
-              <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-                {ASTERISK}
-              </span>
-            )}
-          </label>
+      <Component
+        className={css(styles.check, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel ? props.id : undefined}
+      >
+        {labelPosition === 'start' ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}