Merge pull request #263 from eccenca/feature/align-intent-property-CMEM-6544

Add intent property to components that still use similar other ones to do the same (CMEM-6544)

Author: haschek

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `intent` property to `Button`, `FieldItem`, `FieldSet`, `Notification`, and `Spinner`
+
 ## [24.1.0] - 2025-04-16
 
 ### Added

src/components/Button/Button.stories.tsx

@@ -18,6 +18,10 @@ export default {
         onClick: {
             action: "clicked",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
     },
 } as Meta<typeof Button>;
 
@@ -67,17 +71,17 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
 export const ButtonSemantics = TemplateSemantic.bind({});
 ButtonSemantics.args = FullExample.args;
 
-const TemplateState: StoryFn<typeof Button> = (args) => (
+const TemplateIntent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>
-        <Button {...args} text="Success" hasStateSuccess />
+        <Button {...args} text="Success" intent="success" />
         <Spacing vertical />
-        <Button {...args} text="Warning" hasStateWarning />
+        <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
-        <Button {...args} text="Danger" hasStateDanger />
+        <Button {...args} text="Danger" intent="danger" />
     </OverlaysProvider>
 );
-export const ButtonStates = TemplateState.bind({});
-ButtonStates.args = FullExample.args;
+export const ButtonIntent = TemplateIntent.bind({});
+ButtonIntent.args = FullExample.args;
 
 const TemplateContent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>

src/components/Button/Button.tsx

@@ -32,18 +32,22 @@ interface AdditionalButtonProps {
     elevated?: boolean;
     /**
      * The button is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The button is displayed with success (some type of green) color scheme.
+     *  @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The button is displayed with warning (some type of orange) color scheme.
+     *  @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The button is displayed with danger (some type of red) color scheme.
+     *  @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -100,6 +104,7 @@ export const Button = ({
     tooltipProps,
     badge,
     badgeProps = { size: "small", position: "top-right", maxLength: 2 },
+    intent,
     ...restProps
 }: ButtonProps) => {
     let intention;
@@ -120,13 +125,13 @@ export const Button = ({
             break;
     }
 
-    const ButtonType: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+    const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={intention}
+            intent={(intent || intention) as BlueprintIntent}
             icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >

src/components/Form/FieldItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ClassNames as IntentClassNames } from "../../common/Intent";
+import { ClassNames as IntentClassNames, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
@@ -18,23 +18,31 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
     /**
      * Set primary state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * Set success state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * Set warning state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * Set danger state.
      * This is not routed through automatically.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: IntentTypes;
     /**
      * Is disabled.
      * The included inout element nedd to set disabled directly itself.
@@ -71,6 +79,7 @@ export const FieldItem = ({
     labelProps,
     helperText,
     messageText,
+    intent,
     ...otherProps
 }: FieldItemProps) => {
     let classIntent = "";
@@ -91,6 +100,8 @@ export const FieldItem = ({
             break;
     }
 
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+
     const label = <Label {...labelProps} disabled={disabled} />;
 
     const userhelp =
@@ -106,9 +117,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
         ));
 
     return (

src/components/Form/FieldSet.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ClassNames as IntentClassNames } from "../../common/Intent";
+import { ClassNames as IntentClassNames, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
@@ -11,20 +11,28 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     boxed?: boolean;
     /**
      * The fieldsetsection is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The fieldset section is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The fieldset section is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The fieldsetsection is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: IntentTypes;
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
@@ -52,6 +60,7 @@ export const FieldSet = ({
     hasStateSuccess = false,
     hasStateWarning = false,
     hasStateDanger = false,
+    intent,
     helperText,
     messageText,
     title,
@@ -75,6 +84,8 @@ export const FieldSet = ({
             break;
     }
 
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -98,7 +109,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                classIntent +
+                (intentClass || classIntent) +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

src/components/Form/Stories/FieldItem.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { FieldItem, TextField } from "../../../../index";
 
 export default {
@@ -11,6 +12,9 @@ export default {
         children: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof FieldItem>;
 

src/components/Form/Stories/FieldSet.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index";
 
 import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
@@ -14,6 +15,9 @@ export default {
         children: {
             control: "none",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof FieldSet>;
 

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.stories.tsx

@@ -15,6 +15,10 @@ export default {
         icon: {
             ...helpersArgTypes.exampleIcon,
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "success", "warning", "danger", "neutral", "info"],
+        },
     },
 } as Meta<typeof Notification>;