@eccenca/gui-elements 24.4.1 → 25.0.0-rc.0

package/src/components/Notification/Notification.stories.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
+import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
     component: Notification,
     argTypes: {
         message: {
-            control: "none",
+            control: false,
         },
         icon: {
             ...helpersArgTypes.exampleIcon,
@@ -33,29 +33,43 @@ ExampleWithMessage.args = {
 export const ExampleWithChildren = TemplateFull.bind({});
 ExampleWithChildren.args = {
     children: (
-        <HtmlContentBlock>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-        </HtmlContentBlock>
+        <>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+                <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+            <br />
+            <Markdown
+                htmlContentBlockProps={{
+                    style: {
+                        maxHeight: "25vh",
+                        overflow: "auto",
+                    },
+                }}
+            >
+                {"```\n" + loremIpsum({ random: false }) + "\n```"}
+            </Markdown>
+        </>
     ),
     onDismiss: false, // workaround for undefined function in Storybook
+    actions: [<></>],
 };
 
 export const ExampleNeutralMessage = TemplateFull.bind({});
 ExampleNeutralMessage.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    neutral: true,
+    intent: "neutral",
 };
 
 export const ExampleWithActions = TemplateFull.bind({});
 ExampleWithActions.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    danger: true,
+    intent: "danger",
     actions: [
         <Button text="Something" key="b1" />,
         <Spacing size="tiny" vertical />,
-        <Button text="Important" hasStateDanger key="b2" />,
+        <Button text="Important" intent="danger" key="b2" />,
     ],
 };

package/src/components/Notification/Notification.tsx

@@ -29,29 +29,6 @@ export interface NotificationProps
      * Intent state of the notification.
      */
     intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger" | "info">;
-    /**
-     * Notification has a neutral color scheme.
-     * @deprecated (v25) use `intent="neutral"` instead.
-     */
-    neutral?: boolean;
-    /**
-     * Notification is a success info.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    success?: boolean;
-    /**
-     * Notification is a warning alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    warning?: boolean;
-    /**
-     * Notification is a danger alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    danger?: boolean;
     /**
      * Notification uses the the given space more flexible.
      * Default notification is displayed in min and max limits.
@@ -79,42 +56,17 @@ export const Notification = ({
     children,
     className,
     message,
-    success = false,
-    warning = false,
-    danger = false,
-    neutral = false,
     flexWidth = false,
     icon,
     timeout,
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
-    intent,
+    intent = "info",
     ...otherProps
 }: NotificationProps) => {
-    let intentLevel: string = IntentClassNames.INFO;
-    let iconSymbol = "state-info";
-    switch (true) {
-        case success:
-            intentLevel = IntentClassNames.SUCCESS;
-            iconSymbol = "state-success";
-            break;
-        case warning:
-            intentLevel = IntentClassNames.WARNING;
-            iconSymbol = "state-warning";
-            break;
-        case danger:
-            intentLevel = IntentClassNames.DANGER;
-            iconSymbol = "state-danger";
-            break;
-        case neutral:
-            intentLevel = IntentClassNames.NEUTRAL;
-            break;
-    }
-
-    const intents: Array<NotificationProps["intent"]> = ["info", "success", "warning", "danger"];
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-    const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : iconSymbol;
+    const intentIconSymbol = intent !== "neutral" ? `state-${intent}` : false;
 
     let notificationIcon = icon !== false ? icon : undefined;
     if (icon !== false && !notificationIcon && !!intentIconSymbol) {
@@ -136,7 +88,7 @@ export const Notification = ({
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
-                (intentClass || intentLevel) +
+                intentClass +
                 (className ? ` ${className}` : "") +
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)

package/src/components/Notification/notification.scss

@@ -3,6 +3,10 @@
 @use "sass:math";
 @import "~@blueprintjs/core/src/components/toast/toast";
 
+.#{$ns}-toast-message {
+    min-width: 0;
+}
+
 .#{$eccgui}-notification {
     width: 100%;
     min-width: math.div(4, 16) * 100vw;
@@ -10,9 +14,9 @@
     margin-top: $eccgui-size-block-whitespace;
     font-size: 1rem;
     line-height: $eccgui-size-typo-base-lineheight;
-    color: $eccgui-color-application-text;
-    background-color: $eccgui-color-application-background;
-    border-color: $eccgui-color-application-text;
+    color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
+    border-color: $eccgui-color-workspace-text;
     border-style: solid;
     border-width: 1px 1px 1px 0.25rem;
 
@@ -69,13 +73,14 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin: -10px; // TODO: use blueprint var ofr toast padding here
+    margin: -0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__messagebody {
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    min-width: 0;
+    padding: 0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__actions {

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -3,11 +3,6 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
-    /**
-     * Displays the element using reduced height and less white space inside.
-     * @deprecated (v25) use property directly on `OverviewItem` children.
-     */
-    densityHigh?: boolean;
     /**
      * Add a bit white space around each of the contained items.
      */
@@ -30,7 +25,6 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 export const OverviewItemList = ({
     children,
     className = "",
-    densityHigh = false,
     hasDivider = false,
     hasSpacing = false,
     columns = 1,
@@ -41,7 +35,6 @@ export const OverviewItemList = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__list ` +
-                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : "") +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : "") +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : "") +
                 (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2

package/src/components/OverviewItem/overviewitem.scss

@@ -76,16 +76,14 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 }
 
-.#{$eccgui}-overviewitem__item--highdensity,
-.#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
+.#{$eccgui}-overviewitem__item--highdensity {
     // same fix for Firefox v132+ like for the normal element height
-    // height: $button-height; // mini-units(4);
     min-height: $button-height;
     max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
-        width: $button-height; // mini-units(4);
-        height: $button-height; // mini-units(4);
+        width: $button-height;
+        height: $button-height;
     }
 }
 
@@ -93,8 +91,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     box-sizing: content-box;
     padding: $eccgui-size-overviewitem-spacing * 0.5;
 
-    &.#{$eccgui}-overviewitem__item--highdensity,
-    .#{$eccgui}-overviewitem__list--highdensity > li > & {
+    &.#{$eccgui}-overviewitem__item--highdensity {
         box-sizing: border-box;
 
         & > .#{$eccgui}-overviewitem__depiction {
@@ -136,9 +133,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__description {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    flex-direction: column;
     place-content: stretch flex-start;
     align-items: stretch;
     overflow: hidden;
@@ -175,9 +172,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__actions {
     display: flex;
-    flex-flow: row nowrap;
     flex-grow: 0;
     flex-shrink: 0;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
 

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -24,7 +24,6 @@ export const ItemList = Template.bind({});
 ItemList.args = {
     hasSpacing: true,
     hasDivider: true,
-    densityHigh: false,
     columns: 1,
     children: Array(4).fill(<OverviewItem {...ItemExample.args} />),
 };

package/src/components/Pagination/pagination.scss

@@ -51,7 +51,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$prefix}--pagination__button--no-index {
     // TODO: revalidate if this is still necessary using the latest version of carbon lib
-    color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
+    color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
 }
 
 .#{$eccgui}-pagination--hideinfotext {

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

@@ -1,11 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
+    },
 } as Meta<typeof ProgressBar>;
 
 const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;

package/src/components/Select/Select.stories.tsx

@@ -53,7 +53,7 @@ export const ControlledTarget = Template.bind({});
 ControlledTarget.args = {
     ...Default.args,
     fill: false,
-    children: <Button text="Controlled select target" intent="primary" />,
+    children: <Button text="Controlled select target" elevated />,
     onActiveItemChange: fn(),
 };
 

package/src/components/Spinner/Spinner.tsx

@@ -1,29 +1,38 @@
 import React, { useEffect, useState } from "react";
 import {
-    Overlay as BlueprintOverlay,
+    Overlay2 as BlueprintOverlay,
     OverlayProps as BlueprintOverlayProps,
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
+import Color from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ButtonProps } from "./../Button/Button";
+
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger" | "none";
 
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
+    /**
+     * Must be a valid css color definition.
+     * `intent` property will always overwrite this setting.
+     */
+    color?: Color | string | "inherit";
     /**
-     * intent value or a valid css color definition
-     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
+     * Intent state of the spinner.
+     * When used the spinner is colored.
+     * Property overwrites `elevated` setting.
      */
-    color?: Intent | string;
+    intent?: ButtonProps["intent"];
     /**
-     * Intent state of the field item.
+     * Highlight the spinner.
+     * It is displayed with accent color intent.
      */
-    intent?: Intent;
+    elevated?: boolean;
     /**
      * Additional CSS class names.
      */
@@ -60,26 +69,19 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      * Use this property to alter the display of the backdrop used for the global spinner
      */
     overlayProps?: BlueprintOverlayProps;
-    /**
-     * Label displayed next to the spinner (planned).
-     * You can set it to document the purpose of the spinner.
-     * It is currently not supported and not displayed.
-     */
-    description?: string;
 }
 
 export const Spinner = ({
     className = "",
     color = "inherit",
     intent,
+    elevated,
     position = "local",
     size,
     stroke,
     showLocalBackdrop = false,
     delay = 0,
     overlayProps,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
 }: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
@@ -90,7 +92,7 @@ export const Spinner = ({
         }
         return;
     }, [showSpinner, delay]);
-    const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
+
     const internSizes = {
         thin: 100,
         medium: 50,
@@ -99,9 +101,6 @@ export const Spinner = ({
 
     const spinnerElement = position === "inline" ? "span" : "div";
 
-    const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
-    const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
-
     let spinnerSize;
     let spinnerStroke;
     switch (position) {
@@ -129,7 +128,8 @@ export const Spinner = ({
             className={
                 `${eccgui}-spinner` +
                 ` ${eccgui}-spinner--position-${position}` +
-                ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+                (elevated ? ` ${eccgui}-spinner--intent-accent` : "") +
+                (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
                 (className ? " " + className : "")
@@ -138,8 +138,15 @@ export const Spinner = ({
         />
     );
 
-    if (spinnerColor && spinnerIntent === "usercolor") {
-        spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+    if (!intent) {
+        try {
+            const spinnerColor = color === "inherit" ? color : Color(color).rgb().toString();
+            spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+        } catch {
+            spinner = <span style={{ color: "inherit" }}>{spinner}</span>;
+            // eslint-disable-next-line no-console
+            console.warn("Spinner received invalid color property: " + color);
+        }
     }
 
     return position === "global" ? (

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -10,7 +10,7 @@ export default {
         color: { control: "color" },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger", "none"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger", "none"],
         },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },

package/src/components/Spinner/spinner.scss

@@ -15,12 +15,13 @@ $eccgui-size-spinner-xlarge: 256px !default;
         stroke: currentcolor;
     }
     .#{$ns}-spinner-track {
-        stroke: rgba(#000, 0.1);
+        stroke: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-ghostly);
     }
 }
 
 span.#{$eccgui}-spinner {
     display: inline-flex;
+    height: auto;
     vertical-align: text-top;
 }
 
@@ -28,10 +29,14 @@ span.#{$eccgui}-spinner {
     color: inherit;
 }
 
-.#{$eccgui}-spinner--intent-primary {
+.#{$eccgui}-spinner--intent-accent {
     color: $eccgui-color-accent;
 }
 
+.#{$eccgui}-spinner--intent-primary {
+    color: $eccgui-color-primary;
+}
+
 .#{$eccgui}-spinner--intent-success {
     color: $eccgui-color-success-text;
 }
@@ -72,10 +77,10 @@ span.#{$eccgui}-spinner {
 .#{$eccgui}-spinner--localbackdrop {
     position: absolute;
     inset: 0;
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 
     .#{$eccgui}-card & {
-        background-color: rgba($card-background-color, $eccgui-opacity-muted);
+        background-color: eccgui-color-rgba($card-background-color, $eccgui-opacity-muted);
     }
 }
 
@@ -91,5 +96,5 @@ span.#{$eccgui}-spinner {
 }
 
 .#{$eccgui}-spinner__backdrop {
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 }

package/src/components/Sticky/sticky.scss

@@ -80,22 +80,22 @@
     --eccgui-sticky-target-bgcolor: #{$card-background-color};
 
     .#{$eccgui}-card.#{$eccgui}-intent--primary & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-primary, $card-background-color, 5%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "brand", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--accent & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-accent, $card-background-color, 10%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "accent", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--success & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-success-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "success", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--info & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-info-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "info", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--warning & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-warning-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "warning", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--danger & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-danger-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "danger", "100");
     }
 
     .#{$eccgui}-card.#{$ns}-interactive:hover & {
@@ -112,7 +112,7 @@
 }
 
 .#{$eccgui}-sticky__target--bg-application {
-    --eccgui-sticky-target-bgcolor: #{$eccgui-color-application-background};
+    --eccgui-sticky-target-bgcolor: #{$eccgui-color-workspace-background};
 }
 
 .#{$eccgui}-sticky__target--issticky {

package/src/components/SuggestField/index.ts

@@ -1,5 +1,11 @@
 import { createNewItemRendererFactory } from "./../AutocompleteField/autoCompleteFieldUtils";
-export * from "./SuggestField";
+
+export * from "./../AutocompleteField/AutoCompleteField";
+export * from "./../AutocompleteField/interfaces";
+
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
+
+// @deprecated (v26) use `suggestFieldUtils`
+export const autoCompleteFieldUtils = suggestFieldUtils;

package/src/components/Table/Table.tsx

@@ -4,8 +4,7 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car
 // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// @deprecated (v25) use `TableProps["size"]`
-export type TableRowHeightSize = "small" | "medium" | "large";
+type TableRowHeightSize = "small" | "medium" | "large";
 
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;

package/src/components/Table/TableContainer.tsx

@@ -9,7 +9,7 @@ import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
+import { TableProps, tableRowHeightSizes } from "./Table";
 
 export interface TableDataContainerProps
     extends Omit<
@@ -21,7 +21,7 @@ export interface TableDataContainerProps
         >,
         React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
-    size?: TableRowHeightSize;
+    size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,