@eccenca/gui-elements 26.0.0-rc.1 → 26.0.0

package/src/components/Icon/canonicalIconNames.tsx

@@ -63,6 +63,7 @@ const canonicalIcons = {
     "artefact-report": icons.Report,
     "artefact-task": icons.Script,
     "artefact-transform": icons.DataRefinery,
+    "artefact-ruleblock": transform(icons.Fragments, 90),
     "artefact-uncategorized": icons.Unknown,
     "artefact-workflow": icons.ModelBuilder,
 
@@ -120,6 +121,7 @@ const canonicalIcons = {
     "module-dashboard": icons.Dashboard,
     "module-gdprsearch": icons.UserProfile,
     "module-integrations": icons.AppConnectivity,
+    "module-marketplace": icons.ShoppingCatalog,
     "module-linkedrules": icons.Connect,
     "module-reports": icons.ReportData,
     "module-search": icons.Search,

package/src/components/Menu/MenuItem.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { MenuItem } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("MenuItem", () => {
+    it("should not apply an intent class when intent is undefined", () => {
+        const { container } = render(<MenuItem text="item" intent={undefined} />);
+        const menuItem = container.querySelector(`.${eccgui}-menu__item`);
+        expect(menuItem).not.toBeNull();
+        expect((menuItem as HTMLElement).className).not.toMatch(
+            new RegExp(`${BlueprintClasses.getClassNamespace()}-intent-`),
+        );
+    });
+    it("should apply the intent class for the custom accent intent", () => {
+        const { container } = render(<MenuItem text="item" intent="accent" />);
+        const menuItem = container.querySelector(`.${eccgui}-menu__item`);
+        expect(menuItem).not.toBeNull();
+        expect(menuItem).toHaveClass(`${BlueprintClasses.getClassNamespace()}-intent-accent`);
+    });
+});

package/src/components/Menu/MenuItem.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
+import {
+    Classes as BlueprintClasses,
+    MenuItem as BlueprintMenuItem,
+    MenuItemProps as BlueprintMenuItemProps,
+} from "@blueprintjs/core";
+import classNames from "classnames";
 
 import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -11,10 +16,10 @@ import { TestIconProps } from "./../Icon/TestIcon";
 
 export interface MenuItemProps
     extends
-        Omit<BlueprintMenuItemProps, "icon" | "children">,
+        Omit<BlueprintMenuItemProps, "icon" | "children" | "intent">,
         Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
-    /*
-     * If set the icon is diplayed on the left side of the menu item.
+    /**
+     * If set the icon is displayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     /**
@@ -25,6 +30,10 @@ export interface MenuItemProps
      * Tooltip, but only added to the label, not to the full menu item.
      */
     tooltip?: string | React.JSX.Element;
+    /**
+     * Visual intent color to apply to element.
+     */
+    intent?: BlueprintMenuItemProps["intent"] | "accent";
 }
 
 /**
@@ -38,6 +47,7 @@ export const MenuItem = ({
     href,
     text,
     tooltip,
+    intent,
     ...restProps
 }: MenuItemProps) => {
     return (
@@ -56,7 +66,10 @@ export const MenuItem = ({
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)
             }
-            className={`${eccgui}-menu__item ` + className}
+            className={classNames(`${eccgui}-menu__item`, className, {
+                // control blueprint intent classes to enhance it by new options
+                [`${BlueprintClasses.getClassNamespace()}-intent-${intent}`]: intent,
+            })}
             icon={icon ? typeof icon === "string" || Array.isArray(icon) ? <Icon name={icon} /> : icon : false}
         >
             {children ?? null}

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -3,6 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { Menu, MenuItem, TestIcon } from "../../../components";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
@@ -19,6 +20,10 @@ export default {
                 ...Object.keys(canonicalIcons),
             },
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
+        },
     },
 } as Meta<typeof MenuItem>;
 

package/src/components/Menu/menu.scss

@@ -68,3 +68,51 @@ span.#{$ns}-menu-item-icon:empty {
         }
     }
 }
+
+.#{$ns}-menu-item {
+    @each $intent in ("primary", "accent") {
+        $colorrange: $intent;
+
+        @if $intent == "primary" {
+            $colorrange: "brand";
+        }
+
+        @include menu-item-intent(
+            $intent,
+            false,
+            eccgui-color-var("identity", $colorrange, "300"),
+            eccgui-color-var("identity", $colorrange, "700"),
+            eccgui-color-var("identity", $colorrange, "900")
+        );
+    }
+}
+
+.#{$ns}-submenu {
+    .#{$ns}-popover-target {
+        &.#{$ns}-popover-open > .#{$ns}-menu-item {
+            &[class*="#{$ns}-intent-"] {
+                &,
+                &:hover,
+                &:active {
+                    @each $intent in ("primary", "accent") {
+                        $colorrange: $intent;
+
+                        @if $intent == "primary" {
+                            $colorrange: "brand";
+                        }
+                        &.#{$ns}-intent-#{$intent} {
+                            color: eccgui-color-var("identity", $colorrange, "700");
+                            background-color: rgba(eccgui-color-var("identity", $colorrange, "300"), 0.1);
+
+                            &::before,
+                            .#{$ns}-menu-item-icon,
+                            .#{$ns}-submenu-icon {
+                                color: inherit;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,11 +1,13 @@
 import React, { useRef } from "react";
-import { HTMLInputProps as BlueprintHTMLInputProps, Intent as BlueprintIntent } from "@blueprintjs/core";
+import { HTMLInputProps as BlueprintHTMLInputProps } from "@blueprintjs/core";
 import {
     ItemRendererProps as BlueprintItemRendererProps,
     MultiSelect as BlueprintMultiSelect,
     MultiSelectProps as BlueprintMultiSelectProps,
 } from "@blueprintjs/select";
+import classNames from "classnames";
 
+import { IntentBlueprint } from "../../common/Intent";
 import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
@@ -96,7 +98,7 @@ export interface MultiSuggestFieldCommonProps<T>
     /**
      * Intent state of the multi select.
      */
-    intent?: BlueprintIntent;
+    intent?: IntentBlueprint | "accent";
     /**
      * Disables the input element
      */
@@ -555,10 +557,12 @@ export function MultiSuggestField<T>({
                     "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
                     ...inputProps,
                 } as React.InputHTMLAttributes<HTMLInputElement>,
-                className: `${eccgui}-multisuggestfield ${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+                className: classNames(`${eccgui}-multisuggestfield`, `${eccgui}-multiselect`, className, {
+                    [`${eccgui}-intent--${intent}`]: intent === "accent",
+                }),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent: intent,
+                intent: intent && intent !== "accent" ? intent : undefined,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -35,7 +35,7 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
         },
     },
     args: {

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -10,6 +10,14 @@
 .#{$eccgui}-multisuggestfield {
     --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
 
+    &.#{$ns}-intent-primary {
+        @include pt-input-intent(eccgui-color-var("identity", "brand", "900"));
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
+    }
+    &.#{$eccgui}-intent--accent {
+        @include pt-input-intent(eccgui-color-var("identity", "accent", "900"));
+    }
     &.#{$ns}-intent-success {
         --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
     }

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ProgressBar } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("ProgressBar", () => {
+    it("should not apply an intent class when no intent is set", () => {
+        const { container } = render(<ProgressBar />);
+        const progressbar = container.querySelector(`.${eccgui}-progressbar`);
+        expect(progressbar).not.toBeNull();
+        expect((progressbar as HTMLElement).className).not.toMatch(new RegExp(`${eccgui}-progressbar-intent-`));
+    });
+    it("should apply the matching intent class for a blueprint intent", () => {
+        const { container } = render(<ProgressBar intent="success" />);
+        const progressbar = container.querySelector(`.${eccgui}-progressbar`);
+        expect(progressbar).not.toBeNull();
+        expect(progressbar).toHaveClass(`${eccgui}-progressbar-intent-success`);
+    });
+    it("should apply the intent class for the custom accent intent", () => {
+        const { container } = render(<ProgressBar intent="accent" />);
+        const progressbar = container.querySelector(`.${eccgui}-progressbar`);
+        expect(progressbar).not.toBeNull();
+        expect(progressbar).toHaveClass(`${eccgui}-progressbar-intent-accent`);
+    });
+});

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,5 +1,25 @@
+import React from "react";
 import { ProgressBar as BlueprintProgressBar, ProgressBarProps as BlueprintProgressBarProps } from "@blueprintjs/core";
+import classNames from "classnames";
 
-// we currently do not apply changes or additions
-export const ProgressBar = BlueprintProgressBar;
-export type ProgressBarProps = BlueprintProgressBarProps;
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface ProgressBarProps extends Omit<BlueprintProgressBarProps, "intent"> {
+    /**
+     * Visual intent color to apply to element.
+     */
+    intent?: BlueprintProgressBarProps["intent"] | "accent";
+}
+
+export const ProgressBar = ({ className, intent, ...otherProps }: ProgressBarProps) => {
+    return (
+        <BlueprintProgressBar
+            className={classNames(`${eccgui}-progressbar`, className, {
+                [`${eccgui}-progressbar-intent-${intent}`]: intent,
+            })}
+            {...otherProps}
+        />
+    );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -9,7 +9,7 @@ export default {
     argTypes: {
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
         },
     },
 } as Meta<typeof ProgressBar>;

package/src/components/ProgressBar/progressbar.scss

@@ -0,0 +1,20 @@
+// lib import
+@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";
+
+.#{$ns}-progress-meter {
+    .#{$ns}-progress-bar.#{$eccgui}-progressbar-intent-primary & {
+        background-color: $eccgui-color-primary;
+    }
+    .#{$ns}-progress-bar.#{$eccgui}-progressbar-intent-accent & {
+        background-color: $eccgui-color-accent;
+    }
+    .#{$ns}-progress-bar.#{$eccgui}-progressbar-intent-danger & {
+        background-color: $eccgui-color-danger-text;
+    }
+    .#{$ns}-progress-bar.#{$eccgui}-progressbar-intent-warning & {
+        background-color: $eccgui-color-warning-text;
+    }
+    .#{$ns}-progress-bar.#{$eccgui}-progressbar-intent-success & {
+        background-color: $eccgui-color-success-text;
+    }
+}

package/src/components/TextField/TextArea.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
     MaybeElement,
     TextArea as BlueprintTextArea,
     TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
 
-import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { Definitions as IntentDefinitions, IntentBlueprint, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Icon } from "../Icon";
 import { ValidIconName } from "../Icon/canonicalIconNames";
@@ -154,8 +153,8 @@ export const TextArea = ({
                 (className ? ` ${className}` : "")
             }
             intent={
-                intent && !["info", "edited", "removed", "neutral"].includes(intent)
-                    ? (intent as BlueprintIntent)
+                intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
+                    ? (intent as IntentBlueprint)
                     : undefined
             }
             spellCheck={intent === "removed" ? false : undefined}

package/src/components/TextField/TextField.tsx

@@ -4,11 +4,10 @@ import {
     HTMLInputProps,
     InputGroup as BlueprintInputGroup,
     InputGroupProps as BlueprintInputGroupProps,
-    Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
 
-import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { Definitions as IntentDefinitions, IntentBlueprint, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
@@ -107,8 +106,8 @@ export const TextField = ({
                 (className ? ` ${className}` : "")
             }
             intent={
-                intent && !["info", "edited", "removed", "neutral"].includes(intent)
-                    ? (intent as BlueprintIntent)
+                intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
+                    ? (intent as IntentBlueprint)
                     : undefined
             }
             fill={fullWidth}

package/src/components/TextField/textfield.scss

@@ -76,30 +76,38 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 // enhancements
 
 $eccgui-map-intent-bgcolors: (
-    "primary": $eccgui-color-info-background,
+    "primary": $eccgui-color-primary-contrast,
     "success": $eccgui-color-success-background,
     "warning": $eccgui-color-warning-background,
     "danger": $eccgui-color-danger-background,
 );
 
-@mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
+@mixin intent-state-flash-animation($state, $group, $tint) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: eccgui-color-var("semantic", $state, "100");
+            background-color: eccgui-color-var($group, $tint, "100");
         }
 
         39% {
-            background-color: eccgui-color-var("semantic", $state, "300");
+            background-color: eccgui-color-var($group, $tint, "300");
         }
 
         100% {
-            background-color: eccgui-color-var("semantic", $state, "100");
+            background-color: eccgui-color-var($group, $tint, "100");
         }
     }
 }
 
 @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
-    @include intent-state-flash-animation($each-intent, $each-bgcolor);
+    $group: "semantic";
+    $tint: $each-intent;
+
+    @if $each-intent == "primary" {
+        $group: "identity";
+        $tint: "brand";
+    }
+
+    @include intent-state-flash-animation($each-intent, $group, $tint);
 }
 
 .#{$ns}-input {
@@ -111,11 +119,19 @@ $eccgui-map-intent-bgcolors: (
     }
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        $group: "semantic";
+        $tint: $each-intent;
+
+        @if $each-intent == "primary" {
+            $group: "identity";
+            $tint: "brand";
+        }
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
-            background-color: eccgui-color-var("semantic", $each-intent, "100");
+            @include pt-input-intent(eccgui-color-var($group, $tint, "900"));
 
-            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+            --#{$eccgui}-a11y-outline-color: #{eccgui-color-var($group, $tint, "900")};
 
+            background-color: eccgui-color-var($group, $tint, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -127,9 +143,13 @@ $eccgui-map-intent-bgcolors: (
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--accent & {
-        @include pt-input-intent($eccgui-color-primary);
+        @include pt-input-intent($eccgui-color-accent);
+        @include intent-state-flash-animation("accent", "identity", "accent");
 
-        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
+        background-color: eccgui-color-var("identity", "accent", "100");
+        animation-name: intent-state-flash-accent;
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
@@ -162,11 +182,19 @@ $eccgui-map-intent-bgcolors: (
     }
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        $group: "semantic";
+        $tint: $each-intent;
+
+        @if $each-intent == "primary" {
+            $group: "identity";
+            $tint: "brand";
+        }
         &.#{$eccgui}-intent--#{$each-intent} {
-            background-color: eccgui-color-var("semantic", $each-intent, "100");
+            @include pt-input-intent(eccgui-color-var($group, $tint, "900"));
 
-            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+            --#{$eccgui}-a11y-outline-color: #{eccgui-color-var($group, $tint, "900")};
 
+            background-color: eccgui-color-var($group, $tint, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -178,9 +206,13 @@ $eccgui-map-intent-bgcolors: (
     }
 
     &.#{$eccgui}-intent--accent {
-        @include pt-input-intent($eccgui-color-primary);
+        @include pt-input-intent($eccgui-color-accent);
+        @include intent-state-flash-animation("accent", "identity", "accent");
+
+        background-color: eccgui-color-var("identity", "accent", "100");
+        animation-name: intent-state-flash-accent;
 
-        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
     }
 
     &.#{$eccgui}-intent--neutral {

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -4,12 +4,18 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Tooltip } from "../../index";
 
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
+        },
+    },
 } as Meta<typeof Tooltip>;
 
 let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856

package/src/components/Tooltip/Tooltip.test.tsx

@@ -95,4 +95,20 @@ describe("Tooltip", () => {
         });
         expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
     });
+    it("should not apply the accent intent class when intent is undefined", () => {
+        render(
+            <Tooltip {...TooltipStory.args} isOpen intent={undefined}>
+                <span>target</span>
+            </Tooltip>,
+        );
+        expect(document.querySelectorAll(`.${eccgui}-intent--accent`)).toHaveLength(0);
+    });
+    it("should apply the accent intent class for the custom accent intent", () => {
+        render(
+            <Tooltip {...TooltipStory.args} isOpen intent="accent">
+                <span>target</span>
+            </Tooltip>,
+        );
+        expect(document.querySelectorAll(`.${eccgui}-intent--accent`)).toHaveLength(1);
+    });
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -5,12 +5,14 @@ import {
     TooltipProps as BlueprintTooltipProps,
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
+import classNames from "classnames";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IntentBlueprint } from "../../common/Intent";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 
-export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
+export interface TooltipProps extends Omit<BlueprintTooltipProps, "position" | "intent"> {
     /**
      * Add dotted underline as visual indication to the target that a tooltip is attached.
      * Should be used together with text-only elements.
@@ -48,6 +50,10 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * For the first display of the tooltip this time adds up to `hoverOpenDelay`.
      */
     swapPlaceholderDelay?: number;
+    /**
+     * Intent state of the tooltip.
+     */
+    intent?: IntentBlueprint | "accent";
 }
 
 export type TooltipSize = "small" | "medium" | "large";
@@ -63,6 +69,8 @@ export const Tooltip = ({
     usePlaceholder,
     swapPlaceholderDelay = 100,
     hoverOpenDelay = 450,
+    popoverClassName,
+    intent,
     ...otherTooltipProps
 }: TooltipProps) => {
     const placeholderRef = React.useRef(null);
@@ -197,9 +205,15 @@ export const Tooltip = ({
             content={tooltipContent}
             className={targetClassName}
             popoverClassName={
-                `${eccgui}-tooltip__content` +
-                ` ${eccgui}-tooltip--${size}` +
-                (className ? " " + className + "__content" : "")
+                classNames(
+                    `${eccgui}-tooltip__content`,
+                    `${eccgui}-tooltip--${size}`,
+                    popoverClassName,
+                    {
+                        [`${className}__content`]: className,
+                        [`${eccgui}-intent--${intent}`]: intent === "accent",
+                    }
+                )
             }
             ref={refocus}
             targetProps={
@@ -211,6 +225,7 @@ export const Tooltip = ({
                             : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
+            intent={intent && intent !== "accent" ? intent : undefined}
         >
             {children}
         </BlueprintTooltip>

package/src/components/Tooltip/tooltip.scss

@@ -38,6 +38,7 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 }
 
 .#{$eccgui}-tooltip__content {
+
     a {
         color: inherit;
         text-decoration: none;
@@ -66,3 +67,23 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     --cds-popover-background-color: #{$tooltip-background-color};
     --cds-popover-text-color: #{$tooltip-text-color};
 }
+
+.#{$ns}-popover-content {
+    .#{$ns}-tooltip.#{$ns}-intent-primary & {
+        color: $eccgui-color-primary-contrast;
+        background-color: $eccgui-color-primary;
+    }
+    .#{$ns}-tooltip.#{$eccgui}-intent--accent & {
+        color: $eccgui-color-accent-contrast;
+        background-color: $eccgui-color-accent;
+    }
+}
+
+.#{$ns}-popover-arrow-fill {
+    .#{$ns}-tooltip.#{$ns}-intent-primary & {
+        fill: $eccgui-color-primary;
+    }
+    .#{$ns}-tooltip.#{$eccgui}-intent--accent & {
+        fill: $eccgui-color-accent;
+    }
+}

package/src/components/index.scss

@@ -46,3 +46,4 @@
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
 @import "./ContentGroup/contentgroup";
+@import "./ProgressBar/progressbar";

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -21,7 +21,7 @@ export const HandleContent = memo(
                 {children}
             </div>
         ) : extendedTooltip ? (
-            <div className={`${eccgui}-graphviz__handle__content`} {...otherDivProps} />
+            <div className={`${eccgui}-graphviz__handle__content ${eccgui}-graphviz__handle__content--extendedTooltip`} {...otherDivProps} />
         ) : (
             <></>
         );
@@ -33,6 +33,7 @@ export const HandleContent = memo(
                     autoFocus={false}
                     enforceFocus={false}
                     openOnTargetFocus={false}
+                    usePlaceholder={false}
                     {...tooltipProps}
                 >
                     {handleContent}