Merge pull request #154 from hypothesis/update-spinner-design

Make spinner visual treatment work better in various sizes
hypothesis · Jul 26, 2021 · 20f9a46 · 20f9a46
2 parents 042f862 + 645bbbe
commit 20f9a46
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 55 deletions.
diff --git a/images/icons/spinner.svg → images/icons/spinner--circle.svg b/images/icons/spinner.svg → images/icons/spinner--circle.svg
diff --git a/images/icons/spinner--spokes.svg b/images/icons/spinner--spokes.svg
diff --git a/src/components/Spinner.js b/src/components/Spinner.js
@@ -5,7 +5,7 @@ import { registerIcons, SvgIcon } from './SvgIcon';
 // Register the spinner icon for use
 registerIcons({
   /** @ts-ignore - TS doesn't understand require here */
-  'hyp-spinner': require('../../images/icons/spinner.svg'),
+  'hyp-spinner': require('../../images/icons/spinner--spokes.svg'),
 });
 
 /**

diff --git a/src/icons.js b/src/icons.js
@@ -10,6 +10,6 @@ export default {
   edit: require('../images/icons/edit.svg'),
   logo: require('../images/icons/logo.svg'),
   profile: require('../images/icons/profile.svg'),
-  spinner: require('../images/icons/spinner.svg'),
+  'hyp-spinner': require('../images/icons/spinner--spokes.svg'),
   trash: require('../images/icons/trash.svg'),
 };
diff --git a/src/pattern-library/components/patterns/SpinnerComponents.js b/src/pattern-library/components/patterns/SpinnerComponents.js
@@ -1,28 +1,31 @@
-import { Spinner } from '../../..';
+import Library from '../Library';
 
-import {
-  PatternPage,
-  Pattern,
-  PatternExamples,
-  PatternExample,
-} from '../PatternPage';
+import { Spinner } from '../../..';
 
 export default function SpinnerComponents() {
   return (
-    <PatternPage title="Spinner">
-      <Pattern title="Spinner">
-        <PatternExamples>
-          <PatternExample details="basic loading spinner">
+    <Library.Page title="Spinner">
+      <p>
+        The <code>Spinner</code> component is based on the <code>spinner</code>{' '}
+        pattern and renders an animated SVG.
+      </p>
+      <Library.Pattern title="Spinner">
+        <Library.Example title="Basic usage">
+          <Library.Demo withSource>
             <Spinner />
-          </PatternExample>
-          <PatternExample details="loading spinner, large">
-            <Spinner size="large" />
-          </PatternExample>
-          <PatternExample details="loading spinner, small">
+          </Library.Demo>
+        </Library.Example>
+        <Library.Example title="Small size">
+          <Library.Demo withSource>
             <Spinner size="small" />
-          </PatternExample>
-        </PatternExamples>
-      </Pattern>
-    </PatternPage>
+          </Library.Demo>
+        </Library.Example>
+        <Library.Example title="Large size">
+          <Library.Demo withSource>
+            <Spinner size="large" />
+          </Library.Demo>
+        </Library.Example>
+      </Library.Pattern>
+    </Library.Page>
   );
 }
diff --git a/src/pattern-library/components/patterns/SpinnerPatterns.js b/src/pattern-library/components/patterns/SpinnerPatterns.js
@@ -1,37 +1,59 @@
-import {
-  PatternExample,
-  PatternExamples,
-  PatternPage,
-  Pattern,
-} from '../PatternPage';
+import Library from '../Library';
 
 import { SvgIcon } from '../../..';
 
 export default function SpinnerPatterns() {
   return (
-    <PatternPage title="Spinners">
+    <Library.Page title="Spinners">
       <p>
         The <code>spinner</code> pattern can be used to show loading states. It
         is an animated SVG.
       </p>
-      <Pattern title="Spinner">
+      <Library.Pattern title="Spinner">
         <p>
           The spinner is <code>em-sized</code>; it renders at <code>1em</code>{' '}
-          square, by default. Other relative sizes are available as follows. For
+          square, by default. Other relative sizes are available as shown. For
           manual sizing control, adjust the font-size of a parent element.
+          Spinners have a default foreground color, which may be overridden with
+          utility classes.
         </p>
-        <PatternExamples>
-          <PatternExample details="basic spinner">
-            <SvgIcon name="spinner" className="hyp-spinner" />
-          </PatternExample>
-          <PatternExample details="spinner, large size">
-            <SvgIcon name="spinner" className="hyp-spinner--large" />
-          </PatternExample>
-          <PatternExample details="spinner, small size">
-            <SvgIcon name="spinner" className="hyp-spinner--small" />
-          </PatternExample>
-        </PatternExamples>
-      </Pattern>
-    </PatternPage>
+        <Library.Example title="Default size">
+          <p>
+            At its default size, the spinner is <code>2em</code> square.
+          </p>
+          <Library.Demo withSource>
+            <SvgIcon name="hyp-spinner" className="hyp-spinner" />
+          </Library.Demo>
+        </Library.Example>
+        <Library.Example title="Small size">
+          <p>
+            Small spinners are <code>1em</code> square and can be used inline.
+          </p>
+          <Library.Demo withSource>
+            <SvgIcon name="hyp-spinner" className="hyp-spinner--small" />
+          </Library.Demo>
+        </Library.Example>
+        <Library.Example title="Large size">
+          <p>
+            Large spinners are <code>4em</code> square.
+          </p>
+          <Library.Demo withSource>
+            <SvgIcon name="hyp-spinner" className="hyp-spinner--large" />
+          </Library.Demo>
+        </Library.Example>
+
+        <Library.Example title="Changing color">
+          <p>
+            The color of the spinner may be changed by use of utility classes.
+          </p>
+          <Library.Demo withSource>
+            <SvgIcon
+              name="hyp-spinner"
+              className="hyp-spinner hyp-u-color--brand"
+            />
+          </Library.Demo>
+        </Library.Example>
+      </Library.Pattern>
+    </Library.Page>
   );
 }
diff --git a/styles/components/Spinner.scss b/styles/components/Spinner.scss
@@ -1,14 +1,14 @@
 @use '../mixins/patterns/spinners';
 
 .Hyp-Spinner--small {
-  @include spinners.spinner($size: 1em);
+  @include spinners.spinner($size: 'small');
 }
 
 .Hyp-Spinner,
 .Hyp-Spinner--medium {
-  @include spinners.spinner($size: 2em);
+  @include spinners.spinner;
 }
 
 .Hyp-Spinner--large {
-  @include spinners.spinner($size: 3em);
+  @include spinners.spinner($size: 'large');
 }
diff --git a/styles/mixins/patterns/_spinners.scss b/styles/mixins/patterns/_spinners.scss
@@ -1,9 +1,20 @@
 @use '../../variables' as var;
 
-// Style an SVG as a loading spinner
-@mixin spinner($size: 2em) {
-  color: var.$color-grey-5;
+/**
+ * Style an SVG as a loading spinner
+ *
+ * @param {'small'|'medium'|'large'} [$size='medium'] - Relative size of
+ *   spinner image
+ */
+@mixin spinner($size: 'medium') {
+  $-size: 2em;
+  @if ($size == 'large') {
+    $-size: 4em;
+  } @else if ($size == 'small') {
+    $-size: 1em;
+  }
+  color: var.$color-grey-6;
   // Assure that the spinner SVG is sized proportinally to local font-size
-  width: $size;
-  height: $size;
+  width: $-size;
+  height: $-size;
 }
diff --git a/styles/patterns/_spinners.scss b/styles/patterns/_spinners.scss
@@ -1,14 +1,14 @@
 @use '../mixins/patterns/spinners';
 
 .hyp-spinner--small {
-  @include spinners.spinner($size: 1em);
+  @include spinners.spinner($size: 'small');
 }
 
 .hyp-spinner,
 .hyp-spinner--medium {
-  @include spinners.spinner($size: 2em);
+  @include spinners.spinner;
 }
 
 .hyp-spinner--large {
-  @include spinners.spinner($size: 3em);
+  @include spinners.spinner($size: 'large');
 }