Align primary/accent intent colors (CMEM-7091)

CHANGELOG.md

@@ -27,6 +27,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `readOnly` appearance uses same borders like read-only text fields and it does not display a blinking cursor
 - `<Button />`, `<IconButton />`
     - outlines for focus by keyboard navigation are better recognizable on buttons with colored backgrounds (intent states)
+- `<Tooltip />`
+    - given `popoverClassName` is added
 
 ### Changed
 
@@ -38,6 +40,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `Toaster.create` is now an async function
 - `<MultiSelect />`
     - by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering.
+- `<ProgressBar />`, `<MenuItem />`, `<FieldSet />`, `<FieldItem />`, `<Tooltip />`, `<MultiSuggestField />`
+    - color for `intent="primary"` was changed to our brand color
+    - new option `accent` for `intent` uses the accent color
+- `<TextField />`, `<TextArea />`
+    - switch primary and accent colors
 
 ### Deprecated
 

src/components/Form/form.scss

@@ -56,6 +56,9 @@ form {
 
 .#{$eccgui}-fielditem__message {
     &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
         color: $eccgui-color-accent;
     }
     &.#{$eccgui}-intent--success {
@@ -89,11 +92,20 @@ form {
 
     &.#{$eccgui}-intent--primary {
         &.#{$eccgui}-fieldset--boxed {
-            background-color: $eccgui-color-info-background;
+            background-color: $eccgui-color-primary-contrast;
+        }
+        .#{$eccgui}-fieldset__message,
+        legend {
+            color: $eccgui-color-primary;
+        }
+    }
+    &.#{$eccgui}-intent--accent {
+        &.#{$eccgui}-fieldset--boxed {
+            background-color: $eccgui-color-accent-contrast;
         }
         .#{$eccgui}-fieldset__message,
         legend {
-            color: $eccgui-color-info-text;
+            color: $eccgui-color-accent;
         }
     }
     &.#{$eccgui}-intent--success {

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`);
+    });
+});

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}

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

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

src/components/MultiSelect/MultiSelect.tsx

@@ -5,6 +5,7 @@ import {
     MultiSelect as BlueprintMultiSelect,
     MultiSelectProps as BlueprintMultiSelectProps,
 } from "@blueprintjs/select";
+import classNames from "classnames";
 
 import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -96,7 +97,7 @@ export interface MultiSuggestFieldCommonProps<T>
     /**
      * Intent state of the multi select.
      */
-    intent?: BlueprintIntent;
+    intent?: BlueprintIntent | "accent";
     /**
      * Disables the input element
      */
@@ -555,10 +556,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,

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: {

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

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`);
+    });
+});

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;

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

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

src/components/TextField/TextArea.tsx

@@ -154,7 +154,7 @@ export const TextArea = ({
                 (className ? ` ${className}` : "")
             }
             intent={
-                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
                     ? (intent as BlueprintIntent)
                     : undefined
             }

src/components/TextField/TextField.tsx

@@ -107,7 +107,7 @@ export const TextField = ({
                 (className ? ` ${className}` : "")
             }
             intent={
-                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                intent && !["info", "edited", "removed", "neutral", "accent"].includes(intent)
                     ? (intent as BlueprintIntent)
                     : undefined
             }