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

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

@@ -36,6 +36,11 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-no-background');
 });
 
+test('Renders with class name pf-m-border when hasBorder prop is passed', () => {
+  render(<Sidebar hasBorder>Test</Sidebar>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-border');
+});
+
 test('Renders with class name pf-m-stack when "stack" is passed to orientation prop', () => {
   render(<Sidebar orientation="stack">Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-stack');

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -27,6 +27,11 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
 });
 
+test('Renders with class name pf-m-padding when hasPadding prop is passed', () => {
+  render(<SidebarContent hasPadding>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-padding');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<SidebarContent aria-label="Test label">Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -37,7 +37,12 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
 });
 
-['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach(widthType => {
+test('Renders with class name pf-m-padding when hasPadding prop is passed', () => {
+  render(<SidebarPanel hasPadding>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-padding');
+});
+
+['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach((widthType) => {
   test(`Renders with appropriate class names when ${widthType} is passed to each breakpoint of width prop`, () => {
     render(
       <SidebarPanel

package/src/components/Sidebar/examples/Sidebar.md

@@ -32,3 +32,15 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
 ```ts file="./SidebarResponsivePanel.tsx"
 ```
+
+### Border
+```ts file="./SidebarBorder.tsx"
+```
+
+### Padding on panel
+```ts file="./SidebarPaddingPanel.tsx"
+```
+
+### Padding on content
+```ts file="./SidebarPaddingContent.tsx"
+```

package/src/components/Sidebar/examples/SidebarBorder.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarBorder: React.FunctionComponent = () => (
+  <Sidebar hasBorder hasGutter>
+    <SidebarPanel>Sidebar panel</SidebarPanel>
+    <SidebarContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarPaddingContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarPaddingContent: React.FunctionComponent = () => (
+  <Sidebar>
+    <SidebarPanel>Sidebar panel</SidebarPanel>
+    <SidebarContent hasPadding>
+      <p>Sidebar content, with padding.</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarPaddingPanel.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarPaddingPanel: React.FunctionComponent = () => (
+  <Sidebar>
+    <SidebarPanel hasPadding>Sidebar panel, with padding</SidebarPanel>
+    <SidebarContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/SimpleList/SimpleList.tsx

@@ -76,7 +76,11 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
+          {!isGrouped && (
+            <ul role="list" aria-label={ariaLabel}>
+              {children}
+            </ul>
+          )}
         </div>
       </SimpleListContext.Provider>
     );

package/src/components/SimpleList/SimpleListGroup.tsx

@@ -27,7 +27,7 @@ export const SimpleListGroup: React.FunctionComponent<SimpleListGroupProps> = ({
     <h2 id={id} className={css(styles.simpleListTitle, titleClassName)} aria-hidden="true">
       {title}
     </h2>
-    <ul className={css(className)} aria-labelledby={id}>
+    <ul className={css(className)} role="list" aria-labelledby={id}>
       {children}
     </ul>
   </section>

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
     <ul
       aria-labelledby="''"
       class="''"
+      role="list"
     >
       ReactNode
     </ul>

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

@@ -7,6 +7,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
   >
     <ul
       aria-label="This is a simple list"
+      role="list"
     >
       <li
         class=""
@@ -48,7 +49,9 @@ exports[`SimpleList renders content 1`] = `
   <div
     class="pf-c-simple-list"
   >
-    <ul>
+    <ul
+      role="list"
+    >
       <li
         class=""
       >
@@ -102,6 +105,7 @@ exports[`SimpleList renders grouped content 1`] = `
       <ul
         aria-labelledby=""
         class=""
+        role="list"
       >
         <li
           class=""

package/src/components/SkipToContent/SkipToContent.tsx

@@ -1,45 +1,28 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/SkipToContent/skip-to-content';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../helpers/typeUtils';
+import { Button, ButtonVariant } from '../Button';
 
-export interface SkipToContentProps extends React.HTMLProps<HTMLAnchorElement> {
+export interface SkipToContentProps extends React.HTMLProps<HTMLDivElement> {
   /** The skip to content link. */
   href: string;
   /** Content to display within the skip to content component, typically a string. */
   children?: React.ReactNode;
   /** Additional styles to apply to the skip to content component. */
   className?: string;
-  /** Forces the skip to content to display. This is primarily for demonstration purposes and would not normally be used. */
-  show?: boolean;
 }
 
-export class SkipToContent extends React.Component<SkipToContentProps> {
-  static displayName = 'SkipToContent';
-  static defaultProps: PickOptional<SkipToContentProps> = {
-    show: false
-  };
-  componentRef = React.createRef<HTMLAnchorElement>();
+export const SkipToContent: React.FunctionComponent<SkipToContentProps> = ({
+  children = null,
+  className = '',
+  href,
+  ...props
+}: SkipToContentProps) => (
+  <div className={css(styles.skipToContent, className)} {...props}>
+    <Button variant={ButtonVariant.primary} component="a" href={href}>
+      {children}
+    </Button>
+  </div>
+);
 
-  componentDidMount() {
-    if (this.props.show && this.componentRef.current) {
-      this.componentRef.current.focus();
-    }
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, href, show, type, ...rest } = this.props;
-    return (
-      <a
-        {...rest}
-        className={css(buttonStyles.button, buttonStyles.modifiers.primary, styles.skipToContent, className)}
-        ref={this.componentRef}
-        href={href}
-      >
-        {children}
-      </a>
-    );
-  }
-}
+SkipToContent.displayName = 'SkipToContent';

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

@@ -10,8 +10,3 @@ test('Verify Skip To Content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify Skip To Content if forced to display', () => {
-  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
-  // Add a useful assertion here.
-  expect(asFragment()).toMatchSnapshot();
-});

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

@@ -2,18 +2,17 @@
 
 exports[`Verify Skip To Content 1`] = `
 <DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
-</DocumentFragment>
-`;
-
-exports[`Verify Skip To Content if forced to display 1`] = `
-<DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
+  <div
+    class="pf-c-skip-to-content"
+  >
+    <a
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      href="#main-content"
+    />
+  </div>
 </DocumentFragment>
 `;

package/src/components/Slider/Slider.tsx

@@ -152,7 +152,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
   const findAriaTextValue = () => {
     if (!areCustomStepsContinuous && customSteps) {
-      const matchingStep = customSteps.find(stepObj => stepObj.value === localValue);
+      const matchingStep = customSteps.find((stepObj) => stepObj.value === localValue);
       if (matchingStep) {
         return matchingStep.label;
       }
@@ -243,7 +243,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       if (customSteps[customSteps.length - 1].value !== 100) {
         percentage = (newPercentage * (max - min)) / 100 + min;
       }
-      const stepIndex = customSteps.findIndex(stepObj => stepObj.value >= percentage);
+      const stepIndex = customSteps.findIndex((stepObj) => stepObj.value >= percentage);
       if (customSteps[stepIndex].value === percentage) {
         snapValue = customSteps[stepIndex].value;
       } else {
@@ -278,7 +278,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     e.preventDefault();
     let newValue: number = localValue;
     if (!areCustomStepsContinuous && customSteps) {
-      const stepIndex = customSteps.findIndex(stepObj => stepObj.value === localValue);
+      const stepIndex = customSteps.findIndex((stepObj) => stepObj.value === localValue);
       if (key === 'ArrowRight') {
         if (stepIndex + 1 < customSteps.length) {
           {
@@ -397,7 +397,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         </div>
         {customSteps && (
           <div className={css(styles.sliderSteps)} aria-hidden="true">
-            {customSteps.map(stepObj => {
+            {customSteps.map((stepObj) => {
               const minValue = customSteps[0].value;
               const maxValue = customSteps[customSteps.length - 1].value;
               const stepValue = getStepValue(stepObj.value, minValue, maxValue);
@@ -423,7 +423,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
         )}
         {hasTooltipOverThumb ? (
-          <Tooltip entryDelay={0} content={findAriaTextValue()}>
+          <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
           </Tooltip>
         ) : (

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -639,20 +639,16 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
       </div>
       <div
-        style="display: contents;"
-      >
-        <div
-          aria-disabled="false"
-          aria-label="Value"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="50"
-          aria-valuetext="50"
-          class="pf-c-slider__thumb"
-          role="slider"
-          tabindex="0"
-        />
-      </div>
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
     </div>
   </div>
 </DocumentFragment>

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -12,7 +12,7 @@ export const SliderContinuous: React.FunctionComponent = () => {
         id="thumb-has-tooltip"
         label="hasTooltipOverThumb"
         isChecked={hasTooltipOverThumb}
-        onChange={setHasTooltipOverThumb}
+        onChange={(_event, checked) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
       <Text component={TextVariants.h3}>Slider Value is: {value}</Text>

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

package/src/components/Switch/Switch.tsx

@@ -105,7 +105,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             <span className={css(styles.switchToggle)}>
               {hasCheckIcon && (
                 <span className={css(styles.switchToggleIcon)} aria-hidden="true">
-                  <CheckIcon noVerticalAlign />
+                  <CheckIcon />
                 </span>
               )}
             </span>
@@ -127,7 +127,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
         ) : (
           <span className={css(styles.switchToggle)}>
             <div className={css(styles.switchToggleIcon)} aria-hidden="true">
-              <CheckIcon noVerticalAlign />
+              <CheckIcon />
             </div>
           </span>
         )}

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

@@ -25,11 +25,10 @@ exports[`Switch no label switch is checked 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -65,11 +64,10 @@ exports[`Switch no label switch is not checked 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -142,11 +140,10 @@ exports[`Switch switch is checked and disabled 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
@@ -217,11 +214,10 @@ exports[`Switch switch is not checked and disabled 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -15,6 +15,7 @@ export const SwitchBasic: React.FunctionComponent = () => {
       labelOff="Message when off"
       isChecked={isChecked}
       onChange={handleChange}
+      ouiaId="BasicSwitch"
     />
   );
 };