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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "dd91c73c726d471205cc7ce2cf463fa8c1a6e593"
+  "gitHead": "1c5b0a362bcd0d6cf448b11f4af9ca641ca398d6"
 }

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;
@@ -67,7 +67,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   children = null,
   id = '',
   className = '',
-  component = 'article',
+  component = 'div',
   isCompact = false,
   isSelectable = false,
   isSelectableRaised = false,

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__/__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/ClipboardCopy/ClipboardCopy.tsx

@@ -69,8 +69,6 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
-  /** @deprecated Delay in ms before the tooltip message switch to hover tip. */
-  switchDelay?: number;
   /** A function that is triggered on clicking the copy button. */
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
@@ -97,14 +95,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       expanded: this.props.isExpanded,
       copied: false
     };
-
-    if (this.props.switchDelay !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'ClipboardCopy: switchDelay prop has been deprecated. ' +
-          'The tooltip message will switch back to the hover tip as soon as the tooltip is hidden.'
-      );
-    }
   }
 
   static defaultProps: PickOptional<ClipboardCopyProps> = {
@@ -156,7 +146,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       /* eslint-disable @typescript-eslint/no-unused-vars */
       isExpanded,
       onChange, // Don't pass to <div>
-      switchDelay,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
       isCode,

package/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx

@@ -23,7 +23,6 @@ it('ClipboardCopy should match snapshot (auto-generated)', () => {
       maxWidth={"'150px'"}
       exitDelay={1600}
       entryDelay={100}
-      switchDelay={2000}
       onCopy={(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
         const clipboard = event.currentTarget.parentElement;
         const el = document.createElement('input');