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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.9",
   "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": "81e9bbe05401ce5c3a1acf80765ed713ec5402a0"
 }

package/src/components/BackToTop/BackToTop.tsx

@@ -10,7 +10,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   className?: string;
   /** Title to appear in back to top button. */
   title?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;

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

package/src/components/CodeBlock/CodeBlock.tsx

@@ -18,9 +18,11 @@ export const CodeBlock: React.FunctionComponent<CodeBlockProps> = ({
   ...props
 }: CodeBlockProps) => (
   <div className={css(styles.codeBlock, className)} {...props}>
-    <div className={css(styles.codeBlockHeader)}>
-      <div className={css(styles.codeBlockActions)}>{actions && actions}</div>
-    </div>
+    {actions && (
+      <div className={css(styles.codeBlockHeader)}>
+        <div className={css(styles.codeBlockActions)}>{actions}</div>
+      </div>
+    )}
     <div className={css(styles.codeBlockContent)}>{children}</div>
   </div>
 );

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

@@ -5,13 +5,6 @@ exports[`CodeBlock renders successfully 1`] = `
   <div
     class="pf-c-code-block"
   >
-    <div
-      class="pf-c-code-block__header"
-    >
-      <div
-        class="pf-c-code-block__actions"
-      />
-    </div>
     <div
       class="pf-c-code-block__content"
     >

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -91,7 +91,6 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
     const spinner = (
       <Spinner
         diameter="1em"
-        isSVG
         aria-valuetext={defaultProgressAriaValueText}
         aria-live="polite"
         aria-label={defaultProgressAriaLabel}

package/src/components/Icon/Icon.tsx

@@ -39,11 +39,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   defaultProgressArialabel = 'Loading...',
   ...props
 }: IconComponentProps) => {
-  const _progressIcon = progressIcon ? (
-    progressIcon
-  ) : (
-    <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />
-  );
+  const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
 
   return (
     <span

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -16,7 +16,7 @@ export const IconProgress: React.FunctionComponent = () => {
           name="toggle-icon-progress-custom"
         />
       </div>
-      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" isSVG aria-label="Loading..." />}>
+      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
         <CheckCircleIcon />
       </Icon>
     </React.Fragment>

package/src/components/Menu/MenuGroup.tsx

@@ -11,7 +11,7 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   label?: React.ReactNode;
   /** ID for title label */
   titleId?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Group label heading level. Default is h1. */
   labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/Menu/MenuInput.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 export interface MenuInputProps extends React.HTMLProps<HTMLElement> {
   /** Items within input */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/Menu/MenuItemAction.tsx

@@ -19,7 +19,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
   isDisabled?: boolean;
   /** Identifies the action item in the onActionClick on the Menu */
   actionId?: any;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/MenuToggle/MenuToggle.tsx

@@ -41,7 +41,7 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
 }
 

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -28,16 +28,13 @@ export interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {
    * notification badge.
    */
   isExpanded?: boolean;
-  /** @deprecated Use the variant prop instead - Adds styling to the notification badge to indicate it has been read. */
-  isRead?: boolean;
   /** Determines the variant of the notification badge. */
   variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
 }
 
 export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
-  isRead,
   children,
-  variant = isRead ? 'read' : 'unread',
+  variant = NotificationBadgeVariant.read,
   count = 0,
   attentionIcon = <AttentionBellIcon />,
   icon = <BellIcon />,

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

@@ -2,13 +2,6 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(isRead => {
-  test(`${isRead} NotificationBadge`, () => {
-    const { asFragment } = render(<NotificationBadge isRead={isRead} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
 Object.values([true, false]).forEach(attentionVariant => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(

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

@@ -6,7 +6,7 @@ exports[`NotificationBadge count 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-5"
+    data-ouia-component-id="OUIA-Generated-Button-plain-3"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -37,45 +37,13 @@ exports[`NotificationBadge count 1`] = `
 </DocumentFragment>
 `;
 
-exports[`false NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-unread"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`false NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-4"
+    data-ouia-component-id="OUIA-Generated-Button-plain-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -89,45 +57,13 @@ exports[`false NotificationBadge needs attention 1`] = `
 </DocumentFragment>
 `;
 
-exports[`true NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-read"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`true NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+    data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Select/SelectMenu.tsx

@@ -40,6 +40,7 @@ export interface SelectMenuProps extends Omit<React.HTMLProps<HTMLElement>, 'che
   keyHandler?: (index: number, innerIndex: number, position: string) => void;
   /** Flag indicating select has an inline text input for filtering */
   hasInlineFilter?: boolean;
+  /** @hide forwarded ref */
   innerRef?: any;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;

package/src/components/Spinner/Spinner.tsx

@@ -9,15 +9,13 @@ export enum spinnerSize {
   xl = 'xl'
 }
 
-export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   /** Additional classes added to the Spinner. */
   className?: string;
   /** Size variant of progress. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Text describing that current loading status or progress */
   'aria-valuetext'?: string;
-  /** Whether to use an SVG (new) rather than a span (old) */
-  isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
   /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
@@ -33,37 +31,24 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',
-  isSVG = true,
   diameter,
   isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
-}: SpinnerProps) => {
-  const Component = isSVG ? 'svg' : ('span' as any);
-
-  return (
-    <Component
-      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
-      role="progressbar"
-      aria-valuetext={ariaValueText}
-      {...(isSVG && { viewBox: '0 0 100 100' })}
-      {...(diameter && { style: { '--pf-c-spinner--diameter': diameter } })}
-      {...(ariaLabel && { 'aria-label': ariaLabel })}
-      {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
-      {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
-      {...props}
-    >
-      {isSVG ? (
-        <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
-      ) : (
-        <React.Fragment>
-          <span className={css(styles.spinnerClipper)} />
-          <span className={css(styles.spinnerLeadBall)} />
-          <span className={css(styles.spinnerTailBall)} />
-        </React.Fragment>
-      )}
-    </Component>
-  );
-};
+}: SpinnerProps) => (
+  <svg
+    className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
+    role="progressbar"
+    aria-valuetext={ariaValueText}
+    viewBox="0 0 100 100"
+    {...(diameter && { style: { ['--pf-c-spinner--diameter']: diameter } as React.CSSProperties })}
+    {...(ariaLabel && { 'aria-label': ariaLabel })}
+    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
+    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
+    {...props}
+  >
+    <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
+  </svg>
+);
 Spinner.displayName = 'Spinner';

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

@@ -25,10 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
-
-test('non-SVG spinner', () => {
-  const { asFragment } = render(<Spinner isSVG={false} />)
-
-  expect(asFragment()).toMatchSnapshot();
-})
+});

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

@@ -60,27 +60,6 @@ exports[`medium spinner 1`] = `
 </DocumentFragment>
 `;
 
-exports[`non-SVG spinner 1`] = `
-<DocumentFragment>
-  <span
-    aria-label="Contents"
-    aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-xl"
-    role="progressbar"
-  >
-    <span
-      class="pf-c-spinner__clipper"
-    />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
-</DocumentFragment>
-`;
-
 exports[`simple spinner 1`] = `
 <DocumentFragment>
   <svg

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
-export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner aria-label="Contents of the basic example" />;

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerCustomSize: React.FunctionComponent = () => (
-  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+  <Spinner diameter="80px" aria-label="Contents of the custom size example" />
 );

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -6,23 +6,23 @@ export const SpinnerInline: React.FunctionComponent = () => (
     <TextContent>
       <Text component="h1">
         Heading
-        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+        <Spinner isInline aria-label="Spinner in a heading" />
       </Text>
       <Text component="p">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
       </Text>
       <Text component="h2">
         Second level
-        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+        <Spinner isInline aria-label="spinner in a subheading" />
       </Text>
       <Text component="p">
         Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
-        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
-        urna vel cursus venenatis. Suspendisse potenti.
+        <Spinner isInline aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium urna vel
+        cursus venenatis. Suspendisse potenti.
       </Text>
       <small>
         Sometimes you need small text
-        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+        <Spinner isInline aria-label="Spinner in a small element" />
       </small>
     </TextContent>
   </React.Fragment>

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -3,9 +3,9 @@ import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerSizeVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
-    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
-    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
-    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+    <Spinner size="sm" aria-label="Contents of the small example" />
+    <Spinner size="md" aria-label="Contents of the medium example" />
+    <Spinner size="lg" aria-label="Contents of the large example" />
+    <Spinner size="xl" aria-label="Contents of the extra large example" />
   </React.Fragment>
 );