chore(Spinner): update isSVG prop default value

Author: wise-king-sullyman

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

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,

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();
+})

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