reintroduced spinner color and fixed notification intent behaviour, added intent to MultiSelect, fixed fieldItem and fieldSet, added changelog

Author: anda2002

CHANGELOG.md

@@ -48,6 +48,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `operation-format-list-bullet`
     -   `operation-format-list-checked`
     -   `operation-format-list-numbered`
+-   `intent` property to `Button`, `FieldItem`, `FieldSet`, `Notification`, and `Spinner`
 
 ### Fixed
 

src/components/Form/FieldItem.tsx

@@ -117,9 +117,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + intentClass || classIntent}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + intentClass || classIntent}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
         ));
 
     return (

src/components/Form/FieldSet.tsx

@@ -107,8 +107,10 @@ export const FieldSet = ({
     return (
         <fieldset
             className={
-                `${eccgui}-fieldset` + (className ? " " + className : "") + intentClass ||
-                classIntent + (boxed ? ` ${eccgui}-fieldset--boxed` : "")
+                `${eccgui}-fieldset` +
+                (className ? " " + className : "") +
+                (intentClass || classIntent) +
+                (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}
         >

src/components/MultiSelect/MultiSelect.tsx

@@ -78,20 +78,28 @@ interface MultiSelectCommonProps<T>
      * Items that were newly created and not taken from the list will be post-fixed with this string.
      */
     newItemPostfix?: string;
+    /**
+     * Intent state of the multi select.
+     */
+    intent?: BlueprintIntent;
     /**
      * The input element is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The input element is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
-     * The input element is displayed with success (some type of orange) color scheme.
+     * The input element is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
-     * The input element is displayed with success (some type of red) color scheme.
+     * The input element is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -179,6 +187,7 @@ function MultiSelect<T>({
     wrapperProps,
     searchPredicate,
     limitHeightOpened,
+    intent,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
     // Options created by a user
@@ -203,19 +212,19 @@ function MultiSelect<T>({
         timeoutId?: number;
     }>({});
 
-    let intent;
+    let stateIntent;
     switch (true) {
         case hasStatePrimary:
-            intent = BlueprintIntent.PRIMARY;
+            stateIntent = BlueprintIntent.PRIMARY;
             break;
         case hasStateSuccess:
-            intent = BlueprintIntent.SUCCESS;
+            stateIntent = BlueprintIntent.SUCCESS;
             break;
         case hasStateWarning:
-            intent = BlueprintIntent.WARNING;
+            stateIntent = BlueprintIntent.WARNING;
             break;
         case hasStateDanger:
-            intent = BlueprintIntent.DANGER;
+            stateIntent = BlueprintIntent.DANGER;
             break;
         default:
             break;
@@ -230,12 +239,11 @@ function MultiSelect<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        onSelection &&
-            onSelection({
-                newlySelected: selectedItems.slice(-1)[0],
-                createdItems: createdItems.current,
-                selectedItems,
-            });
+        onSelection?.({
+            newlySelected: selectedItems.slice(-1)[0],
+            createdItems: createdItems.current,
+            selectedItems,
+        });
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
@@ -430,7 +438,11 @@ function MultiSelect<T>({
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
         if (event.key === "Tab" && !!requestState.current.query) {
             event.preventDefault();
-            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(requestState.current.query));
+            if (focusedItem) {
+                onItemSelect(focusedItem);
+            } else {
+                onItemSelect(createNewItem(requestState.current.query));
+            }
             requestState.current.query = "";
             setTimeout(() => inputRef.current?.focus());
         }
@@ -511,7 +523,7 @@ function MultiSelect<T>({
                 className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent,
+                intent: intent || stateIntent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,

src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -4,6 +4,8 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
@@ -29,6 +31,10 @@ export default {
         items: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
     },
     args: {
         onSelection: fn(),

src/components/Notification/Notification.tsx

@@ -89,7 +89,7 @@ export const Notification = ({
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
-    intent = "info",
+    intent,
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
@@ -112,7 +112,7 @@ export const Notification = ({
             break;
     }
 
-    const intents: Array<NotificationProps["intent"]> = ["success", "warning", "danger"];
+    const intents: Array<NotificationProps["intent"]> = ["info", "success", "warning", "danger"];
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
     const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : "state-info";
 

src/components/Spinner/Spinner.tsx

@@ -17,7 +17,7 @@ type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
 export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
     /**
      * intent value or a valid css color definition
-     * @deprecated (v25) use `intent` instead.
+     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
      */
     color?: Intent | string;
     /**
@@ -98,9 +98,9 @@ export const Spinner = ({
     };
 
     const spinnerElement = position === "inline" ? "span" : "div";
-    const computedColor = intent || color;
-    const spinnerColor = availableIntent.indexOf(computedColor) < 0 ? computedColor : null;
-    const spinnerIntent = availableIntent.indexOf(computedColor) < 0 ? "usercolor" : computedColor;
+
+    const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
+    const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
 
     let spinnerSize;
     let spinnerStroke;
@@ -138,7 +138,7 @@ export const Spinner = ({
         />
     );
 
-    if (spinnerColor) {
+    if (spinnerColor && spinnerIntent === "usercolor") {
         spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
     }
 

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

@@ -1,13 +1,14 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import Spinner from "../Spinner";
 export default {
     title: "Components/Spinner",
     component: Spinner,
     argTypes: {
-        color: { control: "radio", options: ["inherit", "primary", "success", "warning", "danger"] },
-        intent: { control: "radio", options: ["inherit", "primary", "success", "warning", "danger"] },
+        color: { control: "color" },
+        intent: { ...helpersArgTypes.exampleIntent, options: ["UNDEFINED", "primary", "success", "warning", "danger"] },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },
         stroke: { control: "radio", options: ["thin", "medium", "bold"] },