align Spinner intent display with other components

Author: haschek

CHANGELOG.md

@@ -40,7 +40,10 @@ This is a major release, and it might be not compatible with your current usage
     -   managed via CSS custom properties
     -   see `README.md` for inf about usage
 -   `<Button />`
-    -   value `accent` was added for `intent` to align it with intent states of other components
+    -   `accent` value for `intent` was added to align property with other components
+-   `<Spinner />`
+    -   `accent` value for `intent` was added to align property with other components
+    -   `elevated` property can be used to highlight the spinner, currently the `intent="accent"` display is used
 -   SCSS color functions
     -   `eccgui-color-var`: returns a var of a custom property used for palette color
     -   `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
@@ -105,7 +108,9 @@ This is a major release, and it might be not compatible with your current usage
 -   property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
     -   e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
 -   `<Button />` and `<IconButton />`
-    -   we aligned the `intent` display with other components, `intent="primary"` is now `intent="accent"`, in most cases it may better to use `affirmative={true}` or `elevated={true}` instead of primary/accent intent
+    -   `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `affirmative={true}` or `elevated={true}` instead of primary/accent intent
+-   `<Spinner />`
+    -   `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `elevated={true}` instead of using intent
 
 ### Deprecated
 

src/components/Spinner/Spinner.tsx

@@ -9,10 +9,11 @@ import Color from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ButtonProps } from "./../Button/Button";
+
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */
 export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
@@ -22,9 +23,16 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      */
     color?: Color | string | "inherit";
     /**
-     * Intent state of the field item.
+     * Intent state of the spinner.
+     * When used the spinner is colored.
+     * Property overwrites `elevated` setting.
+     */
+    intent?: ButtonProps["intent"];
+    /**
+     * Highlight the spinner.
+     * It is displayed with accent color intent.
      */
-    intent?: Intent;
+    elevated?: boolean;
     /**
      * Additional CSS class names.
      */
@@ -67,6 +75,7 @@ export const Spinner = ({
     className = "",
     color = "inherit",
     intent,
+    elevated,
     position = "local",
     size,
     stroke,
@@ -119,6 +128,7 @@ export const Spinner = ({
             className={
                 `${eccgui}-spinner` +
                 ` ${eccgui}-spinner--position-${position}` +
+                (elevated ? ` ${eccgui}-spinner--intent-accent` : "") +
                 (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +

src/components/Spinner/Stories/spinner.stories.tsx

@@ -10,7 +10,7 @@ export default {
         color: { control: "color" },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger", "none"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger", "none"],
         },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },

src/components/Spinner/spinner.scss

@@ -29,10 +29,14 @@ span.#{$eccgui}-spinner {
     color: inherit;
 }
 
-.#{$eccgui}-spinner--intent-primary {
+.#{$eccgui}-spinner--intent-accent {
     color: $eccgui-color-accent;
 }
 
+.#{$eccgui}-spinner--intent-primary {
+    color: $eccgui-color-primary;
+}
+
 .#{$eccgui}-spinner--intent-success {
     color: $eccgui-color-success-text;
 }