chore(Spinner): updated isSVG prop default value (patternfly#8183)

* chore(Spinner): updated isSVG prop default value * updated prop in example to meet a11y requirements * updated react-console snapshots
tlabaj · Oct 13, 2022 · 4542bff · 4542bff
1 parent 34558d8
commit 4542bff
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 94 deletions.
diff --git a/...onsole/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsoles.test.tsx.snap b/...onsole/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/...-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsole.test.tsx.snap b/...-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/.../react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 `;