@patternfly/react-core 5.0.0-alpha.8 → 5.0.0-alpha.81

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithBodySectionFills: React.FunctionComponent = () => (
   <Card style={{ minHeight: '30em' }}>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody>Body</CardBody>

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithHeadingElement: React.FunctionComponent = () => (
   <Card>
-    <CardTitle component="h4">Header within an {'<h4>'} element</CardTitle>
+    <CardTitle component="h4">Title within an {'<h4>'} element</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>

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

@@ -1,19 +1,11 @@
 import React from 'react';
+import { Brand, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Brand,
-  Card,
-  CardHeader,
-  CardHeaderMain,
-  CardActions,
-  CardTitle,
-  CardBody,
-  CardFooter,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import pfLogo from './pfLogo.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -32,49 +24,50 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
+  const headerActions = (
+    <>
+      <DropdownDeprecated
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-1"
+        name="check1"
+      />
+    </>
+  );
+
   return (
     <>
       <Card>
-        <CardHeader>
-          <CardHeaderMain>
-            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-          </CardHeaderMain>
-          <CardActions hasNoOffset={hasNoOffset}>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={setIsOpen} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={isChecked}
-              onChange={onClick}
-              aria-label="card checkbox example"
-              id="check-1"
-              name="check1"
-            />
-          </CardActions>
+        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
         </CardHeader>
-        <CardTitle>Header</CardTitle>
+        <CardTitle>Title</CardTitle>
         <CardBody>Body</CardBody>
         <CardFooter>Footer</CardFooter>
       </Card>
@@ -82,7 +75,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
         <Checkbox
           label="actions hasNoOffset"
           isChecked={hasNoOffset}
-          onChange={toggleOffset}
+          onChange={(_event, checked) => toggleOffset(checked)}
           aria-label="remove actions offset"
           id="toggle-actions-offset"
           name="toggle-actions-offset"

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

@@ -14,7 +14,7 @@ export const CardWithModifiers: React.FunctionComponent = () => {
             key={mod}
             label={mod}
             isChecked={modifiers[mod]}
-            onChange={checked => {
+            onChange={(_event, checked) =>  {
               modifiers[mod] = checked;
               setModifiers({ ...modifiers });
             }}
@@ -23,7 +23,7 @@ export const CardWithModifiers: React.FunctionComponent = () => {
       </div>
       <div style={{ height: '15rem' }}>
         <Card {...modifiers}>
-          <CardTitle>Header</CardTitle>
+          <CardTitle>Title</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>
         </Card>

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithMultipleBodySections: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardBody>Body</CardBody>
     <CardBody>Body</CardBody>

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
 export const CardWithNoFooter: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>This card has no footer</CardBody>
   </Card>
 );

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

@@ -3,7 +3,7 @@ import { Card, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithNoHeader: React.FunctionComponent = () => (
   <Card>
-    <CardBody>This card has no header</CardBody>
+    <CardBody>This card has no title </CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>
 );

package/src/components/Card/index.ts

@@ -1,8 +1,6 @@
 export * from './Card';
-export * from './CardActions';
 export * from './CardBody';
 export * from './CardExpandableContent';
 export * from './CardFooter';
 export * from './CardTitle';
 export * from './CardHeader';
-export * from './CardHeaderMain';

package/src/components/Checkbox/Checkbox.tsx

@@ -20,7 +20,7 @@ export interface CheckboxProps
   isChecked?: boolean | null;
   checked?: boolean;
   /** A callback for when the checkbox selection changes. */
-  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
   /** Id of the checkbox. */
@@ -67,7 +67,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   }
 
   private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
-    this.props.onChange(event.currentTarget.checked, event);
+    this.props.onChange(event, event.currentTarget.checked);
   };
 
   render() {

package/src/components/Checkbox/examples/Checkbox.md

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

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -7,7 +7,7 @@ export const CheckboxControlled: React.FunctionComponent = () => {
   const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
   const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
 
-  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     const target = event.currentTarget;
     const name = target.name;
 

package/src/components/Chip/Chip.tsx

@@ -114,7 +114,9 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
         {...props}
       >
-        <span className={css(styles.chipText)}>{children}</span>
+        <span className={css(styles.chipContent)}>
+          <span className={css(styles.chipText)}>{children}</span>
+        </span>
       </Component>
     );
   };
@@ -145,20 +147,24 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
         {...props}
       >
-        <span ref={this.span} className={css(styles.chipText)} id={id}>
-          {children}
+        <span className={css(styles.chipContent)}>
+          <span ref={this.span} className={css(styles.chipText)} id={id}>
+            {children}
+          </span>
         </span>
         {!isReadOnly && (
-          <Button
-            onClick={onClick}
-            variant="plain"
-            aria-label={closeBtnAriaLabel}
-            id={`remove_${id}`}
-            aria-labelledby={`remove_${id} ${id}`}
-            ouiaId={ouiaId || closeBtnAriaLabel}
-          >
-            <TimesIcon aria-hidden="true" />
-          </Button>
+          <span className={css(styles.chipActions)}>
+            <Button
+              onClick={onClick}
+              variant="plain"
+              aria-label={closeBtnAriaLabel}  
+              id={`remove_${id}`}
+              aria-labelledby={`remove_${id} ${id}`}
+              ouiaId={ouiaId || closeBtnAriaLabel}
+            >
+              <TimesIcon aria-hidden="true" />
+            </Button>
+          </span>
         )}
       </Component>
     );

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

@@ -10,36 +10,42 @@ exports[`Chip closable 1`] = `
     id="chip_one"
   >
     <span
-      class="pf-c-chip__text"
-      id="chip_one"
+      class="pf-c-chip__content"
     >
-      Chip
+      <span
+        class="pf-c-chip__text"
+        id="chip_one"
+      >
+        Chip
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="close"
-      aria-labelledby="remove_chip_one chip_one"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="close"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      id="remove_chip_one"
-      type="button"
+    <span
+      class="pf-c-chip__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="close"
+        aria-labelledby="remove_chip_one chip_one"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="close"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        id="remove_chip_one"
+        type="button"
       >
-        <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"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 352 512"
+        >
+          <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"
+          />
+        </svg>
+      </button>
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -54,36 +60,42 @@ exports[`Chip closable with tooltip 1`] = `
     id="chip_one"
   >
     <span
-      class="pf-c-chip__text"
-      id="chip_one"
+      class="pf-c-chip__content"
     >
-      1234567890123456789
+      <span
+        class="pf-c-chip__text"
+        id="chip_one"
+      >
+        1234567890123456789
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="close"
-      aria-labelledby="remove_chip_one chip_one"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="close"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      id="remove_chip_one"
-      type="button"
+    <span
+      class="pf-c-chip__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="close"
+        aria-labelledby="remove_chip_one chip_one"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="close"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        id="remove_chip_one"
+        type="button"
       >
-        <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"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 352 512"
+        >
+          <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"
+          />
+        </svg>
+      </button>
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -99,36 +111,42 @@ exports[`Chip custom max-width text 1`] = `
     textmaxwidth="100px"
   >
     <span
-      class="pf-c-chip__text"
-      id="pf-random-id-4"
+      class="pf-c-chip__content"
     >
-      4 more
+      <span
+        class="pf-c-chip__text"
+        id="pf-random-id-4"
+      >
+        4 more
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="close"
-      aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="close"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      id="remove_pf-random-id-4"
-      type="button"
+    <span
+      class="pf-c-chip__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="close"
+        aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="close"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        id="remove_pf-random-id-4"
+        type="button"
       >
-        <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"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 352 512"
+        >
+          <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"
+          />
+        </svg>
+      </button>
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -142,9 +160,13 @@ exports[`Chip overflow 1`] = `
     data-ouia-safe="true"
   >
     <span
-      class="pf-c-chip__text"
+      class="pf-c-chip__content"
     >
-      4 more
+      <span
+        class="pf-c-chip__text"
+      >
+        4 more
+      </span>
     </span>
   </div>
 </DocumentFragment>
@@ -159,10 +181,14 @@ exports[`Chip readonly 1`] = `
     data-ouia-safe="true"
   >
     <span
-      class="pf-c-chip__text"
-      id="pf-random-id-3"
+      class="pf-c-chip__content"
     >
-      4 more
+      <span
+        class="pf-c-chip__text"
+        id="pf-random-id-3"
+      >
+        4 more
+      </span>
     </span>
   </div>
 </DocumentFragment>
@@ -178,36 +204,42 @@ exports[`Chip with role='gridcell' 1`] = `
     role="gridcell"
   >
     <span
-      class="pf-c-chip__text"
-      id="pf-random-id-5"
+      class="pf-c-chip__content"
     >
-      I'm a roled chip
+      <span
+        class="pf-c-chip__text"
+        id="pf-random-id-5"
+      >
+        I'm a roled chip
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="close"
-      aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="close"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      id="remove_pf-random-id-5"
-      type="button"
+    <span
+      class="pf-c-chip__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="close"
+        aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="close"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        id="remove_pf-random-id-5"
+        type="button"
       >
-        <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"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 352 512"
+        >
+          <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"
+          />
+        </svg>
+      </button>
+    </span>
   </div>
 </DocumentFragment>
 `;