@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Button/Button.tsx

@@ -22,6 +22,12 @@ export enum ButtonType {
   reset = 'reset'
 }
 
+export enum ButtonSize {
+  default = 'default',
+  sm = 'sm',
+  lg = 'lg'
+}
+
 export interface BadgeCountObject {
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
@@ -31,7 +37,7 @@ export interface BadgeCountObject {
   className?: string;
 }
 
-export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>, OUIAProps {
+export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
   /** Additional classes added to the button */
@@ -58,6 +64,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   inoperableEvents?: string[];
   /** Adds inline styling to a link button */
   isInline?: boolean;
+  /** Adds styling which affects the size of the button */
+  size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
@@ -70,13 +78,9 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   icon?: React.ReactNode | null;
   /** Sets the button tabindex. */
   tabIndex?: number;
-  /** Adds small styling to the button */
-  isSmall?: boolean;
-  /** Adds large styling to the button */
-  isLarge?: boolean;
   /** 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;
@@ -99,8 +103,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
-  isSmall = false,
-  isLarge = false,
+  size = ButtonSize.default,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
   type = ButtonType.button,
@@ -157,8 +160,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && children !== null && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
-        isSmall && styles.modifiers.small,
-        isLarge && styles.modifiers.displayLg,
+        size === ButtonSize.sm && styles.modifiers.small,
+        size === ButtonSize.lg && styles.modifiers.displayLg,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -84,13 +84,13 @@ describe('Button', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('isSmall', () => {
-    const { asFragment } = render(<Button isSmall>Small Button</Button>);
+  test('size small', () => {
+    const { asFragment } = render(<Button size="sm">Small Button</Button>);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('isLarge', () => {
-    const { asFragment } = render(<Button isLarge>Large Button</Button>);
+  test('size large', () => {
+    const { asFragment } = render(<Button size="lg">Large Button</Button>);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -152,21 +152,6 @@ exports[`Button isInline 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button isLarge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-display-lg"
-    data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Large Button
-  </button>
-</DocumentFragment>
-`;
-
 exports[`Button isLoading 1`] = `
 <DocumentFragment>
   <button
@@ -180,22 +165,21 @@ exports[`Button isLoading 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-md"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
-        />
-        <span
-          class="pf-c-spinner__tail-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-      </span>
+      </svg>
     </span>
     Loading Button
   </button>
@@ -216,22 +200,21 @@ exports[`Button isLoading icon only 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-md"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-        <span
-          class="pf-c-spinner__tail-ball"
-        />
-      </span>
+      </svg>
     </span>
     <div>
       ICON
@@ -254,43 +237,27 @@ exports[`Button isLoading inline link 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-inline"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-        <span
-          class="pf-c-spinner__tail-ball"
-        />
-      </span>
+      </svg>
     </span>
     Loading Button
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button isSmall 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-small"
-    data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Small Button
-  </button>
-</DocumentFragment>
-`;
-
 exports[`Button link button 1`] = `
 <DocumentFragment>
   <button
@@ -387,6 +354,36 @@ exports[`Button secondary button 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Button size large 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    class="pf-c-button pf-m-primary pf-m-display-lg"
+    data-ouia-component-id="OUIA-Generated-Button-primary-8"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    Large Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button size small 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    class="pf-c-button pf-m-primary pf-m-small"
+    data-ouia-component-id="OUIA-Generated-Button-primary-7"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    Small Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button tertiary button 1`] = `
 <DocumentFragment>
   <button

package/src/components/Button/examples/Button.md

@@ -43,14 +43,14 @@ To indicate that an action is currently unavailable, all button variations can b
 
 ### Small buttons
 
-To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property.
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `"sm"` value for the `size` property.
 
 ```ts file="./ButtonSmall.tsx"
 ```
 
 ### Call to action (CTA) buttons
 
-CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. 
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property. 
 
 ```ts file="./ButtonCallToAction.tsx"
 ```

package/src/components/Button/examples/ButtonCallToAction.tsx

@@ -4,16 +4,16 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 export const ButtonCallToAction: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" isLarge>
+    <Button variant="primary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="secondary" isLarge>
+    <Button variant="secondary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="tertiary" isLarge>
+    <Button variant="tertiary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="link" isLarge>
+    <Button variant="link" size="lg">
       Call to action <ArrowRightIcon />
     </Button>
     <br />

package/src/components/Button/examples/ButtonSmall.tsx

@@ -3,19 +3,19 @@ import { Button } from '@patternfly/react-core';
 
 export const ButtonSmall: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" isSmall>
+    <Button variant="primary" size="sm">
       Primary
     </Button>{' '}
-    <Button variant="secondary" isSmall>
+    <Button variant="secondary" size="sm">
       Secondary
     </Button>{' '}
-    <Button variant="tertiary" isSmall>
+    <Button variant="tertiary" size="sm">
       Tertiary
     </Button>{' '}
-    <Button variant="danger" isSmall>
+    <Button variant="danger" size="sm">
       Danger
     </Button>{' '}
-    <Button variant="warning" isSmall>
+    <Button variant="warning" size="sm">
       Warning
     </Button>
     <br />

package/src/components/Card/Card.tsx

@@ -10,10 +10,8 @@ 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;
-  /** @deprecated to make a card hoverable, use isSelectable or isSelectableRaised. */
-  isHoverable?: boolean;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
@@ -69,8 +67,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   children = null,
   id = '',
   className = '',
-  component = 'article',
-  isHoverable = false,
+  component = 'div',
   isCompact = false,
   isSelectable = false,
   isSelectableRaised = false,
@@ -107,7 +104,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     if (isSelectableRaised) {
       return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
     }
-    if (isSelectable || isHoverable) {
+    if (isSelectable) {
       return css(styles.modifiers.selectable, isSelected && styles.modifiers.selected);
     }
     return '';

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', () => {
@@ -37,81 +37,76 @@ describe('Card', () => {
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 
-  test('card with isHoverable applied ', () => {
-    const { asFragment } = render(<Card isHoverable />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('card with isCompact applied ', () => {
     const { asFragment } = render(<Card isCompact />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   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,20 +2,8 @@
 
 exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
-  <article
+  <div
     class="pf-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-7"
-    data-ouia-component-type="PF4/Card"
-    data-ouia-safe="true"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`Card card with isHoverable applied  1`] = `
-<DocumentFragment>
-  <article
-    class="pf-c-card pf-m-selectable"
     data-ouia-component-id="OUIA-Generated-Card-6"
     data-ouia-component-type="PF4/Card"
     data-ouia-safe="true"
@@ -26,7 +14,7 @@ exports[`Card card with isHoverable 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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { PopoverPosition } from '../Popover';
 import { TooltipPosition } from '../Tooltip';
 import { TextInput } from '../TextInput';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -48,9 +47,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   isBlock?: boolean;
   /** Adds Clipboard Copy variant styles. */
   variant?: typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact';
-  /** Copy button popover position. */
+  /** Copy button tooltip position. */
   position?:
-    | PopoverPosition
     | TooltipPosition
     | 'auto'
     | 'top'
@@ -65,16 +63,12 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** Maximum width of the tooltip (default 150px). */
   maxWidth?: string;
   /** Delay in ms before the tooltip disappears. */
   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. */
@@ -101,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> = {
@@ -118,7 +104,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     isExpanded: false,
     isCode: false,
     variant: 'inline',
-    position: PopoverPosition.top,
+    position: TooltipPosition.top,
     maxWidth: '150px',
     exitDelay: 1500,
     entryDelay: 300,
@@ -127,8 +113,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
-    ouiaSafe: true,
-    removeFindDomNode: false
+    ouiaSafe: true
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -161,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,
@@ -180,7 +164,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       additionalActions,
       ouiaId,
       ouiaSafe,
-      removeFindDomNode,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -273,7 +256,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
-                    removeFindDomNode={removeFindDomNode}
                   >
                     {this.state.copied ? clickTip : hoverTip}
                   </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import { PopoverPosition } from '../Popover';
 
 export interface ClipboardCopyButtonProps
   extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
@@ -25,7 +24,6 @@ export interface ClipboardCopyButtonProps
   /** Position of the copy button tooltip */
   position?:
     | TooltipPosition
-    | PopoverPosition
     | 'auto'
     | 'top'
     | 'bottom'
@@ -39,8 +37,6 @@ export interface ClipboardCopyButtonProps
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** Aria-label for the copy button */
   'aria-label'?: string;
   /** Variant of the copy button */
@@ -61,7 +57,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
-  removeFindDomNode = false,
   ...props
 }: ClipboardCopyButtonProps) => (
   <Tooltip
@@ -74,7 +69,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
     aria="none"
     content={<div>{children}</div>}
     onTooltipHidden={onTooltipHidden}
-    removeFindDomNode={removeFindDomNode}
   >
     <Button
       type="button"

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');