From 4542bffc7d1d00c39fe6a2c8169ccf80302158d9 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Mon, 10 Oct 2022 11:05:28 -0400
Subject: [PATCH] chore(Spinner): updated isSVG prop default value (#8183)

* chore(Spinner): updated isSVG prop default value

* updated prop in example to meet a11y requirements

* updated react-console snapshots
---
 .../AccessConsoles.test.tsx.snap              | 19 ++--
 .../__snapshots__/SerialConsole.test.tsx.snap | 21 ++--
 .../__snapshots__/VncConsole.test.tsx.snap    | 19 ++--
 .../Backdrop/examples/BackdropSpinner.tsx     |  2 +-
 .../__snapshots__/Button.test.tsx.snap        | 38 ++++---
 .../src/components/Spinner/Spinner.tsx        |  2 +-
 .../Spinner/__tests__/Spinner.test.tsx        |  6 ++
 .../__snapshots__/Spinner.test.tsx.snap       | 98 +++++++++++--------
 8 files changed, 111 insertions(+), 94 deletions(-)

diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsoles.test.tsx.snap b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsoles.test.tsx.snap
index 15c7a43efe1..e02c3e99649 100644
--- a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsoles.test.tsx.snap
+++ b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsoles.test.tsx.snap
@@ -129,22 +129,21 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
           <div
             class="pf-c-empty-state__icon"
           >
-            <span
+            <svg
               aria-label="Contents"
               aria-valuetext="Loading..."
               class="pf-c-spinner pf-m-xl"
               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>
           </div>
           <div
             class="pf-c-empty-state__body"
diff --git a/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsole.test.tsx.snap b/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsole.test.tsx.snap
index 1cd2ff3ade0..79608248608 100644
--- a/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsole.test.tsx.snap
+++ b/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsole.test.tsx.snap
@@ -70,22 +70,21 @@ exports[`SerialConsole in the LOADING state 1`] = `
         <div
           class="pf-c-empty-state__icon"
         >
-          <span
+          <svg
             aria-label="Contents"
             aria-valuetext="Loading..."
             class="pf-c-spinner pf-m-xl"
             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"
-            />
-          </span>
+            <circle
+              class="pf-c-spinner__path"
+              cx="50"
+              cy="50"
+              fill="none"
+              r="45"
+            />
+          </svg>
         </div>
         <div
           class="pf-c-empty-state__body"
diff --git a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap
index 2334ecb85f3..ab3c37e8b38 100644
--- a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap
+++ b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap
@@ -15,22 +15,21 @@ exports[`placeholder render test 1`] = `
           <div
             class="pf-c-empty-state__icon"
           >
-            <span
+            <svg
               aria-label="Contents"
               aria-valuetext="Loading..."
               class="pf-c-spinner pf-m-xl"
               role="progressbar"
+              viewBox="0 0 100 100"
             >
-              <span
-                class="pf-c-spinner__clipper"
+              <circle
+                class="pf-c-spinner__path"
+                cx="50"
+                cy="50"
+                fill="none"
+                r="45"
               />
-              <span
-                class="pf-c-spinner__lead-ball"
-              />
-              <span
-                class="pf-c-spinner__tail-ball"
-              />
-            </span>
+            </svg>
           </div>
           <div
             class="pf-c-empty-state__body"
diff --git a/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
index 9c395c1fe6e..65a0e67a584 100644
--- a/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
+++ b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
@@ -4,7 +4,7 @@ import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
 export const BackdropSpinner: React.FunctionComponent = () => (
   <Backdrop>
     <Bullseye>
-      <Spinner aria-label="Backdrop content" aria-valueText="Loading..." />
+      <Spinner aria-label="Backdrop content" aria-valuetext="Loading..." />
     </Bullseye>
   </Backdrop>
 );
diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 29332d1d569..c7db012dc9c 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -180,22 +180,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"
+        <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>
@@ -216,22 +215,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
diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx
index bf1b9a80e4a..61932f3c393 100644
--- a/packages/react-core/src/components/Spinner/Spinner.tsx
+++ b/packages/react-core/src/components/Spinner/Spinner.tsx
@@ -31,7 +31,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',
-  isSVG = false,
+  isSVG = true,
   diameter,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
diff --git a/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx b/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx
index eb1402d7004..81b8eb78cf9 100644
--- a/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx
+++ b/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx
@@ -26,3 +26,9 @@ 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();
+})
diff --git a/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap b/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap
index b7d35ca8adb..66ca1910fda 100644
--- a/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap
+++ b/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap
@@ -2,68 +2,65 @@
 
 exports[`extra large spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-xl"
     role="progressbar"
+    viewBox="0 0 100 100"
   >
-    <span
-      class="pf-c-spinner__clipper"
+    <circle
+      class="pf-c-spinner__path"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="45"
     />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
+  </svg>
 </DocumentFragment>
 `;
 
 exports[`large spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-lg"
     role="progressbar"
+    viewBox="0 0 100 100"
   >
-    <span
-      class="pf-c-spinner__clipper"
+    <circle
+      class="pf-c-spinner__path"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="45"
     />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
+  </svg>
 </DocumentFragment>
 `;
 
 exports[`medium spinner 1`] = `
 <DocumentFragment>
-  <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>
 </DocumentFragment>
 `;
 
-exports[`simple spinner 1`] = `
+exports[`non-SVG spinner 1`] = `
 <DocumentFragment>
   <span
     aria-label="Contents"
@@ -84,23 +81,42 @@ exports[`simple spinner 1`] = `
 </DocumentFragment>
 `;
 
+exports[`simple spinner 1`] = `
+<DocumentFragment>
+  <svg
+    aria-label="Contents"
+    aria-valuetext="Loading..."
+    class="pf-c-spinner pf-m-xl"
+    role="progressbar"
+    viewBox="0 0 100 100"
+  >
+    <circle
+      class="pf-c-spinner__path"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="45"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
 exports[`small spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-sm"
     role="progressbar"
+    viewBox="0 0 100 100"
   >
-    <span
-      class="pf-c-spinner__clipper"
+    <circle
+      class="pf-c-spinner__path"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="45"
     />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
+  </svg>
 </DocumentFragment>
 `;