added intent property to replace deprecated ones (hasState, color, or others)

anda2002 · anda2002 · commit 7d1f1ee8cf0e · 2025-04-21T13:14:55.000+03:00
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -18,6 +18,9 @@ export default {
         onClick: {
             action: "clicked",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof Button>;
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -6,6 +6,7 @@ import {
     ButtonProps as BlueprintButtonProps,
     Intent as BlueprintIntent,
 } from "@blueprintjs/core";
+import { IntentTypes } from "common/Intent";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
@@ -15,6 +16,10 @@ import Badge, { BadgeProps } from "./../Badge/Badge";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 
 interface AdditionalButtonProps {
+    /**
+     * Intent state of the button.
+     */
+    intent?: IntentTypes;
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.
      * The button is displayed with primary color scheme.
@@ -23,27 +28,33 @@ interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an disruptive action, e.g. delete or remove.
      * The button is displayed with primary color scheme.
+     *  @deprecated use `intent` instead.
      */
     disruptive?: boolean;
     /**
      * Use this when a button is important enough to highlight it in a set of other buttons.
      * The button is displayed with primary color scheme.
+     *  @deprecated use `intent` instead.
      */
     elevated?: boolean;
     /**
      * The button is displayed with primary color scheme.
+     * @deprecated use `intent` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The button is displayed with success (some type of green) color scheme.
+     *  @deprecated use `intent` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The button is displayed with warning (some type of orange) color scheme.
+     *  @deprecated use `intent` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The button is displayed with danger (some type of red) color scheme.
+     *  @deprecated use `intent` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -73,10 +84,12 @@ interface AdditionalButtonProps {
     //target?: string;
 }
 
-interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "icon" | "rightIcon"> {}
+interface ExtendedButtonProps
+    extends AdditionalButtonProps,
+        Omit<BlueprintButtonProps, "icon" | "rightIcon" | "intent"> {}
 interface ExtendedAnchorButtonProps
     extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon"> {}
+        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon" | "intent"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -100,6 +113,7 @@ export const Button = ({
     tooltipProps,
     badge,
     badgeProps = { size: "small", position: "top-right", maxLength: 2 },
+    intent,
     ...restProps
 }: ButtonProps) => {
     let intention;
@@ -120,13 +134,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}
         >
diff --git a/src/components/Form/FieldItem.tsx b/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 use `intent` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * Set success state.
      * This is not routed through automatically.
+     * @deprecated use `intent` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * Set warning state.
      * This is not routed through automatically.
+     * @deprecated use `intent` instead.
      */
     hasStateWarning?: boolean;
     /**
      * Set danger state.
      * This is not routed through automatically.
+     * @deprecated use `intent` 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 (
diff --git a/src/components/Form/FieldSet.tsx b/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 use `intent` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The fieldset section is displayed with success (some type of green) color scheme.
+     * @deprecated use `intent` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The fieldset section is displayed with warning (some type of orange) color scheme.
+     * @deprecated use `intent` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The fieldsetsection is displayed with danger (some type of red) color scheme.
+     * @deprecated use `intent` 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" ? (
@@ -96,10 +107,8 @@ export const FieldSet = ({
     return (
         <fieldset
             className={
-                `${eccgui}-fieldset` +
-                (className ? " " + className : "") +
-                classIntent +
-                (boxed ? ` ${eccgui}-fieldset--boxed` : "")
+                `${eccgui}-fieldset` + (className ? " " + className : "") + intentClass ||
+                classIntent + (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}
         >
diff --git a/src/components/Form/Stories/FieldItem.stories.tsx b/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>;
 
diff --git a/src/components/Form/Stories/FieldSet.stories.tsx b/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>;
 
diff --git a/src/components/Notification/Notification.stories.tsx b/src/components/Notification/Notification.stories.tsx
@@ -15,6 +15,10 @@ export default {
         icon: {
             ...helpersArgTypes.exampleIcon,
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "success", "warning", "danger", "neutral"],
+        },
     },
 } as Meta<typeof Notification>;
 
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
@@ -5,7 +5,7 @@ import {
     ToastProps as BlueprintToastProps,
 } from "@blueprintjs/core";
 
-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";
 
@@ -25,23 +25,30 @@ export interface NotificationProps
      * Notification message that can be used as alternative to children elements.
      */
     message?: JSX.Element | string;
+    /**
+     * Intent state of the notification.
+     */
+    intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger">;
     /**
      * Notification has a neutral color scheme.
      */
     neutral?: boolean;
     /**
      * Notification is a success info.
      * This defines the colorization and the icon symbol.
+     * @deprecated use `intent` instead.
      */
     success?: boolean;
     /**
      * Notification is a warning alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated use `intent` instead.
      */
     warning?: boolean;
     /**
      * Notification is a danger alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated use `intent` instead.
      */
     danger?: boolean;
     /**
@@ -81,6 +88,7 @@ export const Notification = ({
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    intent,
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
@@ -103,9 +111,13 @@ export const Notification = ({
             break;
     }
 
+    const intents: Array<NotificationProps["intent"]> = ["success", "warning", "danger"];
+    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
+    const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : "";
+
     let notificationIcon = icon !== false ? icon : undefined;
-    if (icon !== false && !notificationIcon && !!iconSymbol) {
-        notificationIcon = <Icon name={iconSymbol as ValidIconName} />;
+    if (icon !== false && !notificationIcon && (!!iconSymbol || !!intentIconSymbol)) {
+        notificationIcon = <Icon name={(intentIconSymbol || iconSymbol) as ValidIconName} />;
     }
 
     const content = actions ? (
@@ -123,7 +135,7 @@ export const Notification = ({
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
-                intentLevel +
+                (intentClass || intentLevel) +
                 (className ? ` ${className}` : "") +
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
diff --git a/src/components/Spinner/Stories/spinner.stories.tsx b/src/components/Spinner/Stories/spinner.stories.tsx
