@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.60

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -6,6 +6,11 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+BadgeToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 ## Examples
@@ -13,19 +18,23 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ### Basic
 
 ```ts file="./BreadcrumbBasic.tsx"
+
 ```
 
 ### Without home link
 
 ```ts file="./BreadcrumbWithoutHomeLink.tsx"
+
 ```
 
 ### With heading
 
 ```ts file="./BreadcrumbWithHeading.tsx"
+
 ```
 
 ### With dropdown
 
 ```ts file="./BreadcrumbDropdown.tsx"
+
 ```

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -1,42 +1,40 @@
 import React from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   BadgeToggle,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 const dropdownItems: JSX.Element[] = [
-  <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
     Edit
-  </DropdownItem>,
-  <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
     Deployment
-  </DropdownItem>,
-  <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
     Applications
-  </DropdownItem>
+  </DropdownItemDeprecated>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
 
   const onSelect = () => {
     setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
-    badgeToggleRef.current.focus();
+    badgeToggleRef?.current?.focus();
   };
 
   return (
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>

package/src/components/Button/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;

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

@@ -289,12 +289,10 @@ exports[`Button link with icon 1`] = `
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 576 512"
-        width="1em"
       >
         <path
           d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -70,11 +70,11 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   /** Flag to set browser focus on the passed date. **/
   isDateFocused?: boolean;
   /** Callback when date is selected. */
-  onChange?: (date: Date) => void;
+  onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void;
   /** Callback when month or year is changed. */
   onMonthChange?: (
-    newDate?: Date,
-    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
+    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>,
+    newDate?: Date
   ) => void;
   /** @hide Internal prop to allow pressing escape in select menu to not close popover. */
   onSelectToggle?: (open: boolean) => void;
@@ -187,11 +187,11 @@ export const CalendarMonth = ({
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
-  const onMonthClick = (newDate: Date, ev: React.MouseEvent) => {
+  const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
     setHoveredDate(newDate);
     setShouldFocus(false);
-    onMonthChange(newDate, ev);
+    onMonthChange(ev, newDate);
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -252,7 +252,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(prevMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
           >
             <AngleLeftIcon aria-hidden={true} />
           </Button>
@@ -282,7 +282,7 @@ export const CalendarMonth = ({
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
-                  onMonthChange(newDate, ev);
+                  onMonthChange(ev, newDate);
                 }, 0);
               }}
               variant="single"
@@ -306,7 +306,7 @@ export const CalendarMonth = ({
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
-                onMonthChange(newDate, ev);
+                onMonthChange(ev, newDate);
               }}
             />
           </div>
@@ -315,7 +315,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(nextMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
           >
             <AngleRightIcon aria-hidden={true} />
           </Button>
@@ -377,7 +377,7 @@ export const CalendarMonth = ({
                         !isValid && styles.modifiers.disabled
                       )}
                       type="button"
-                      onClick={() => onChange(date)}
+                      onClick={(event) => onChange(event, date)}
                       onMouseOver={() => setHoveredDate(date)}
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -1,6 +1,7 @@
 ---
 id: Calendar month
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---

package/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx

@@ -4,7 +4,10 @@ import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/reac
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
 
-  const onMonthChange = (newDate: Date) => {
+  const onMonthChange = (
+    _event: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement> | undefined,
+    newDate: Date
+  ) => {
     // eslint-disable-next-line no-console
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
@@ -21,7 +24,12 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
 
   return (
     <>
-      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} inlineProps={inlineProps} />
+      <CalendarMonth
+        date={date}
+        onChange={(_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => setDate(date)}
+        onMonthChange={onMonthChange}
+        inlineProps={inlineProps}
+      />
       <pre>Selected date: {date.toString()}</pre>
     </>
   );

package/src/components/Card/Card.tsx

@@ -10,7 +10,7 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   id?: string;
   /** Additional classes added to the Card */
   className?: string;
-  /** Sets the base component to render. defaults to article */
+  /** Sets the base component to render. defaults to div */
   component?: keyof JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
@@ -39,7 +39,7 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Aria label to apply to the selectable input if one is rendered */
   selectableInputAriaLabel?: string;
   /** Callback that executes when the selectable input is changed */
-  onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -64,10 +64,10 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
 });
 
 export const Card: React.FunctionComponent<CardProps> = ({
-  children = null,
+  children,
   id = '',
-  className = '',
-  component = 'article',
+  className,
+  component = 'div',
   isCompact = false,
   isSelectable = false,
   isSelectableRaised = false,
@@ -146,7 +146,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
           {...ariaProps}
           type="checkbox"
           checked={isSelected}
-          onChange={event => onSelectableInputChange(id, event)}
+          onChange={event => onSelectableInputChange(event, id)}
           disabled={isDisabledRaised}
           tabIndex={-1}
         />

package/src/components/Card/CardActions.tsx

@@ -3,17 +3,17 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Action */
+  /** Content rendered inside the card action */
   children?: React.ReactNode;
-  /** Additional classes added to the Action */
+  /** Additional classes added to the action */
   className?: string;
   /** Flag indicating that the actions have no offset */
   hasNoOffset?: boolean;
 }
 
 export const CardActions: React.FunctionComponent<CardActionsProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   hasNoOffset = false,
   ...props
 }: CardActionsProps) => (

package/src/components/Card/CardBody.tsx

@@ -14,8 +14,8 @@ export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardBody: React.FunctionComponent<CardBodyProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   isFilled = true,
   ...props

package/src/components/Card/CardExpandableContent.tsx

@@ -11,8 +11,8 @@ export interface CardExpandableContentProps extends React.HTMLProps<HTMLDivEleme
 }
 
 export const CardExpandableContent: React.FunctionComponent<CardExpandableContentProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardExpandableContentProps) => (
   <CardContext.Consumer>

package/src/components/Card/CardFooter.tsx

@@ -12,8 +12,8 @@ export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardFooter: React.FunctionComponent<CardFooterProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardFooterProps) => {

package/src/components/Card/CardHeader.tsx

@@ -2,14 +2,27 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardHeaderMain } from './CardHeaderMain';
+import { CardActions } from './CardActions';
 import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+export interface CardHeaderActionsObject {
+  /** Actions of the card header */
+  actions: React.ReactNode;
+  /** Flag indicating that the actions have no offset */
+  hasNoOffset?: boolean;
+  /** Additional classes added to the actions wrapper */
+  className?: string;
+}
+
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the CardHeader */
+  /** Content rendered inside the card header */
   children?: React.ReactNode;
-  /** Additional classes added to the CardHeader */
+  /** Additional classes added to the card header */
   className?: string;
+  /** Actions of the card header */
+  actions?: CardHeaderActionsObject;
   /** ID of the card header. */
   id?: string;
   /** Callback expandable card */
@@ -21,8 +34,9 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
+  actions,
   id,
   onExpand,
   toggleButtonProps,
@@ -36,7 +50,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           <Button
             variant="plain"
             type="button"
-            onClick={evt => {
+            onClick={(evt) => {
               onExpand(evt, cardId);
             }}
             {...toggleButtonProps}
@@ -55,7 +69,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           {...props}
         >
           {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {children}
+          {actions && <CardActions className={actions?.className} hasNoOffset={actions?.hasNoOffset}> {actions.actions} </CardActions>}
+          {children && <CardHeaderMain>{children}</CardHeaderMain>}
           {onExpand && isToggleRightAligned && cardHeaderToggle}
         </div>
       );

package/src/components/Card/CardHeaderMain.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Head Main */
@@ -8,11 +10,11 @@ export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={className} {...props}>
+  <div className={css(styles.cardHeaderMain ,className)} {...props}>
     {children}
   </div>
 );

package/src/components/Card/CardTitle.tsx

@@ -13,8 +13,8 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardTitleProps) => {

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

@@ -12,8 +12,8 @@ describe('Card', () => {
   });
 
   test('className is added to the root element', () => {
-    render(<Card className="extra-class" />);
-    expect(screen.getByRole('article')).toHaveClass('extra-class');
+    render(<Card className="extra-class">card</Card>);
+    expect(screen.getByText('card')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {
@@ -43,70 +43,70 @@ describe('Card', () => {
   });
 
   test('card with isSelectable applied ', () => {
-    render(<Card isSelectable />);
+    render(<Card isSelectable>selectable card</Card>);
 
-    const card = screen.getByRole('article');
+    const card = screen.getByText('selectable card');
     expect(card).toHaveClass('pf-m-selectable');
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isSelectable and isSelected applied ', () => {
-    render(<Card isSelectable isSelected />);
+    render(<Card isSelectable isSelected>selected and selectable card</Card>);
 
-    const card = screen.getByRole('article');
+    const card = screen.getByText('selected and selectable card');
     expect(card).toHaveClass('pf-m-selectable');
     expect(card).toHaveClass('pf-m-selected');
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with only isSelected applied - not change', () => {
-    render(<Card isSelected />);
+    render(<Card isSelected>selected card</Card>);
 
-    const card = screen.getByRole('article');
+    const card = screen.getByText('selected card');
     expect(card).not.toHaveClass('pf-m-selected');
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
   test('card with isDisabledRaised applied', () => {
-    render(<Card isDisabledRaised />);
-    expect(screen.getByRole('article')).toHaveClass('pf-m-non-selectable-raised');
+    render(<Card isDisabledRaised>disabled raised card</Card>);
+    expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
   });
 
   test('card with isSelectableRaised applied - not change', () => {
-    render(<Card isSelectableRaised />);
+    render(<Card isSelectableRaised>raised selectable card</Card>);
 
-    const card = screen.getByRole('article');
+    const card = screen.getByText('raised selectable card');
     expect(card).toHaveClass('pf-m-selectable-raised');
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isSelectableRaised and isSelected applied ', () => {
-    render(<Card isSelected isSelectableRaised />);
+    render(<Card isSelected isSelectableRaised>raised selected card</Card>);
 
-    const card = screen.getByRole('article');
+    const card = screen.getByText('raised selected card');
     expect(card).toHaveClass('pf-m-selectable-raised');
     expect(card).toHaveClass('pf-m-selected-raised');
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isFlat applied', () => {
-    render(<Card isFlat />);
-    expect(screen.getByRole('article')).toHaveClass('pf-m-flat');
+    render(<Card isFlat>flat card</Card>);
+    expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
   });
 
   test('card with isExpanded applied', () => {
-    render(<Card isExpanded />);
-    expect(screen.getByRole('article')).toHaveClass('pf-m-expanded');
+    render(<Card isExpanded>expanded card</Card>);
+    expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
   test('card with isRounded applied', () => {
-    render(<Card isRounded />);
-    expect(screen.getByRole('article')).toHaveClass('pf-m-rounded');
+    render(<Card isRounded>rounded card</Card>);
+    expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
   });
 
   test('card with isLarge applied', () => {
-    render(<Card isLarge />);
-    expect(screen.getByRole('article')).toHaveClass('pf-m-display-lg');
+    render(<Card isLarge>large card</Card>);
+    expect(screen.getByText('large card')).toHaveClass('pf-m-display-lg');
   });
 
   test('card warns when isLarge and isCompact', () => {

package/src/components/Card/__tests__/CardHeader.test.tsx

@@ -7,4 +7,9 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader onExpand={jest.fn()} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('actions are rendered', () => {
+    const { asFragment } = render(<CardHeader actions="test" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -2,7 +2,7 @@
 
 exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
-  <article
+  <div
     class="pf-c-card pf-m-compact"
     data-ouia-component-id="OUIA-Generated-Card-6"
     data-ouia-component-type="PF4/Card"
@@ -14,7 +14,7 @@ exports[`Card card with isCompact applied  1`] = `
 
 exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <article
+  <div
     class="pf-c-card"
     data-ouia-component-id="OUIA-Generated-Card-1"
     data-ouia-component-type="PF4/Card"

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CardHeader actions are rendered 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__header"
+  >
+    <div
+      class="pf-c-card__actions"
+    >
+        
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div
@@ -21,12 +35,10 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"

package/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="pf-c-card__header-main"
   >
     text
   </div>