Merge remote-tracking branch 'origin/develop' into feature/upgrade-markdown-libs-CMEM-5567

Author: haschek

CHANGELOG.md

@@ -8,7 +8,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
--   In the `<Markdown />` component, `rehypePlugins` and `remarkPlugins` props now use PluggableList from the unified package. This may require changes if you previously used plugins not conforming to the stricter unified typings. Backward compatibility with the old plugin list type will be removed in the next major version.
+-   `<Button />`, `<FieldItem />`, `<FieldSet />`, `<Notification />`, `<Spinner />`
+    -   `intent` property: align intent state usage with other components
+
+### Deprecated
+
+-   `<Markdown />`
+    -   `reHypePlugins` property now use `PluggableList` from the unified package. This may require changes if you previously used plugins not conforming to the stricter unified typings. Backward compatibility with the old plugin list type will be removed in the next major version.
 
 ## [24.1.0] - 2025-04-16
 

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>;