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

package/src/components/Form/FieldItem.tsx

@@ -5,40 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
 
-/*
-    FIXME: Improve development convenience and prevent development errors
-
-    * disabled state could be automatically forwarded to inserted input element,
-      currently this need to be dome explicitly .
-    * input id could be forwarded to label and input element
-    * input id could be created when not given
-*/
-
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
-    /**
-     * 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.
      */
@@ -69,10 +36,6 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
 export const FieldItem = ({
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     children,
     className,
     disabled,
@@ -82,24 +45,6 @@ export const FieldItem = ({
     intent,
     ...otherProps
 }: FieldItemProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
 
     const label = <Label {...labelProps} disabled={disabled} />;
@@ -117,9 +62,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</div>
         ));
 
     return (

package/src/components/Form/FieldSet.tsx

@@ -9,26 +9,6 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
      * Background color of the box is set automatically regarding the set intent state.
      */
     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.
      */
@@ -56,36 +36,12 @@ export const FieldSet = ({
     boxed = false,
     children,
     className,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     intent,
     helperText,
     messageText,
     title,
     ...otherProps
 }: FieldSetProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -109,7 +65,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                (intentClass || classIntent) +
+                (intent ? " " + IntentClassNames[intent.toUpperCase()] : "") +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

package/src/components/Form/form.scss

@@ -1,6 +1,6 @@
 $eccgui-size-typo-formitem: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !default;
-$eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
+$eccgui-color-formitem-text: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
 
 @import "~@blueprintjs/core/src/components/forms/common";
 @import "~@blueprintjs/core/src/components/forms/control-group";
@@ -39,7 +39,7 @@ form {
     color: $eccgui-color-formitem-text;
 
     .#{$eccgui}-fielditem--disabled > & {
-        color: rgba($eccgui-color-formitem-text, 1) !important;
+        color: $eccgui-color-workspace-text !important;
         opacity: $eccgui-opacity-disabled !important;
     }
 }

package/src/components/Icon/BaseIcon.tsx

@@ -32,19 +32,10 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      * Additional CSS classes.
      */
     className?: string;
-    /**
-     * Description for icon as accessibility fallback.
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
-    /**
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    iconTitle?: CarbonIconProps["title"];
 }
 
 /**
@@ -58,8 +49,6 @@ function BaseIcon({
     tooltipText,
     tooltipProps,
     intent,
-    description,
-    iconTitle,
     tabIndex,
     ...restProps
 }: BaseIconProps) {
@@ -70,9 +59,6 @@ function BaseIcon({
 
     const icon = (
         <CarbonIconNamed
-            title={
-                iconTitle || description ? (iconTitle ? iconTitle : description ? description : undefined) : undefined
-            }
             {...restProps}
             {...sizeConfig}
             className={

package/src/components/Icon/IconButton.tsx

@@ -6,9 +6,10 @@ import Button, { ButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
+import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
-    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

package/src/components/Icon/canonicalIconNames.tsx

@@ -23,6 +23,8 @@ const canonicalIcons = {
     "artefact-task-pivot": icons.Transpose,
     "artefact-task-unpivot": icons.Transpose,
     "artefact-task-concatenatetofile": icons.DocumentExport,
+    "artefact-task-sqlupdatequeryoperator": icons.Sql,
+    "artefact-task-customsqlexecution": icons.Sql,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -147,6 +149,7 @@ const canonicalIcons = {
     "operation-merge": icons.DirectionMerge,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
+    "operation-send": icons.Send,
     "operation-sharelink": icons.CopyLink,
     "operation-transform": icons.Calculation,
     "operation-translate": icons.Translate,
@@ -168,10 +171,14 @@ const canonicalIcons = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-carettop": icons.CaretUp,
     "toggler-caretright": icons.CaretRight,
     "toggler-caretdown": icons.CaretDown,
+    "toggler-caretleft": icons.CaretLeft,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
+    "toggler-micon": icons.Microphone,
+    "toggler-micoff": icons.MicrophoneOff,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
     "toggler-list": icons.List,

package/src/components/Icon/icon.scss

@@ -1,6 +1,12 @@
 .#{$eccgui}-icon {
     vertical-align: text-bottom;
 
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
     &.#{$eccgui}-intent--info {
         color: $eccgui-color-info-text;
     }

package/src/components/Icon/stories/Icon.stories.tsx

@@ -2,7 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, Icon } from "../../../../index";
+import {
+    Card,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    TitleSubsection,
+} from "../../../../index";
 import { Definitions } from "../../../common/Intent";
 import BaseIcon from "../BaseIcon";
 
@@ -19,7 +30,8 @@ export default {
         },
         intent: {
             control: "select",
-            options: { ...Definitions },
+            options: [...Object.keys(Definitions)],
+            mapping: { ...Definitions },
         },
     },
 } as Meta<typeof Icon>;
@@ -49,12 +61,60 @@ IconSizes.args = {
     name: "undefined",
 };
 
+/**
+ * Available icons by their canonical names.
+ * If you need another icon then use `<TestIcon /`> component.
+ */
 export const IconsOverview = () => {
+    let section = "";
+    let separation = <></>;
     return (
         <OverlaysProvider>
-            {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
-            })}
+            <FlexibleLayoutContainer
+                noEqualItemSpace
+                gapSize="small"
+                style={{ flexWrap: "wrap", justifyContent: "flex-start" }}
+            >
+                {Object.keys(canonicalIcons)
+                    .sort()
+                    .map((iconName) => {
+                        if (
+                            section !==
+                            iconName.substring(0, iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length)
+                        ) {
+                            section = iconName.substring(
+                                0,
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                            );
+                            separation = (
+                                <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>
+                                    <TitleSubsection>{section}</TitleSubsection>
+                                </FlexibleLayoutItem>
+                            );
+                        } else {
+                            separation = <></>;
+                        }
+                        return (
+                            <React.Fragment key={iconName}>
+                                {separation}
+                                <FlexibleLayoutItem growFactor={0} style={{ width: "20rem" }}>
+                                    <Card>
+                                        <OverviewItem>
+                                            <OverviewItemDepiction keepColors>
+                                                <Icon name={iconName as ValidIconName} />
+                                            </OverviewItemDepiction>
+                                            <OverviewItemDescription>
+                                                <OverviewItemLine small>
+                                                    <OverflowText>{iconName}</OverflowText>
+                                                </OverviewItemLine>
+                                            </OverviewItemDescription>
+                                        </OverviewItem>
+                                    </Card>
+                                </FlexibleLayoutItem>
+                            </React.Fragment>
+                        );
+                    })}
+            </FlexibleLayoutContainer>
         </OverlaysProvider>
     );
 };

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -5,13 +5,13 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { IconButton, TestIcon } from "../../../../index";
 
+import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
     title: "Components/IconButton",
     component: IconButton,
     argTypes: {
-        text: { control: "text" },
         name: {
             control: "select",
             options: ["Test icon", ...Object.keys(canonicalIcons)],
@@ -20,6 +20,7 @@ export default {
                 ...Object.keys(canonicalIcons),
             },
         },
+        intent: buttonStory.argTypes?.intent,
     },
 } as Meta<typeof IconButton>;
 

package/src/components/Label/label.scss

@@ -1,7 +1,7 @@
 $eccgui-size-typo-label: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-label-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-color-label-text: $eccgui-color-workspace-text;
-$eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+$eccgui-color-label-info: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
 
 .#{$eccgui}-label {
     display: block;

package/src/components/Link/link.scss

@@ -11,7 +11,7 @@
     }
 
     &:focus-visible {
-        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
         outline-offset: 1px;
     }
 }

package/src/components/Menu/menu.scss

@@ -1,30 +1,7 @@
-// uses button colors, we can remove it if we decide to use the blueprint buttons
-$button-intents: (
-    "primary": (
-        $pt-intent-primary,
-        $blue2,
-        $blue1,
-    ),
-    "success": (
-        $pt-intent-success,
-        $green2,
-        $green1,
-    ),
-    "warning": (
-        $pt-intent-warning,
-        $orange2,
-        $orange1,
-    ),
-    "danger": (
-        $pt-intent-danger,
-        $red2,
-        $red1,
-    ),
-) !default;
-$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
-$minimal-button-background-color-active: rgba($gray2, 0.3) !default;
-$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
-$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+$minimal-button-background-color-hover: eccgui-color-rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: eccgui-color-rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color-hover: eccgui-color-rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: eccgui-color-rgba($gray3, 0.3) !default;
 
 // $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -12,14 +12,13 @@ import { TestableComponent } from "../interfaces";
 
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
-/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
-export interface MultiSelectSelectionProps<T> {
+export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-interface MultiSelectCommonProps<T>
+interface MultiSuggestFieldCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
@@ -38,7 +37,7 @@ interface MultiSelectCommonProps<T>
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
-    onSelection?: (params: MultiSelectSelectionProps<T>) => void;
+    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
     /**
      * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
@@ -82,26 +81,6 @@ interface MultiSelectCommonProps<T>
      * 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 warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The input element is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Disables the input element
      */
@@ -135,12 +114,12 @@ interface MultiSelectCommonProps<T>
     limitHeightOpened?: boolean | number;
 }
 
-/** @deprecated (v25) use MultiSuggestFieldProps */
-export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
+export type MultiSuggestFieldProps<T> = MultiSuggestFieldCommonProps<T> &
     (
         | {
               /**
-               * Predefined selected values
+               * Predefined selected values.
+               * `prePopulateWithItems` cannot be used then.
                */
               selectedItems?: T[];
               prePopulateWithItems?: never;
@@ -148,17 +127,22 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
         | {
               selectedItems?: never;
               /**
-               * When set to true will set the multi-select value with all the items provided
+               * When set to `true` will set the multi-select value with all the items provided.
+               * `selectedItems` cannot be used then.
                */
               prePopulateWithItems?: boolean;
           }
     );
 
 /**
- * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
- * New name for this component is `MultiSuggestField`.
+ * Element behaves very similar to `SuggestField` but allows multiple selections.
+ * Its value does not represent a string but a stack of objects.
+ *
+ * Example usage: input field for user created tags.
+ *
+ * Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
  */
-function MultiSelect<T>({
+export function MultiSuggestField<T>({
     items,
     selectedItems: externalSelectedItems,
     prePopulateWithItems,
@@ -173,10 +157,6 @@ function MultiSelect<T>({
     noResultText = "No results.",
     newItemCreationText = "Add new item",
     newItemPostfix = " (new item)",
-    hasStatePrimary,
-    hasStateDanger,
-    hasStateSuccess,
-    hasStateWarning,
     disabled,
     createNewItemFromQuery,
     requestDelay = 0,
@@ -189,7 +169,7 @@ function MultiSelect<T>({
     limitHeightOpened,
     intent,
     ...otherMultiSelectProps
-}: MultiSelectProps<T>) {
+}: MultiSuggestFieldProps<T>) {
     // Options created by a user
     const createdItems = useRef<T[]>([]);
     // Options passed ouside (f.e. from the backend)
@@ -212,24 +192,6 @@ function MultiSelect<T>({
         timeoutId?: number;
     }>({});
 
-    let stateIntent;
-    switch (true) {
-        case hasStatePrimary:
-            stateIntent = BlueprintIntent.PRIMARY;
-            break;
-        case hasStateSuccess:
-            stateIntent = BlueprintIntent.SUCCESS;
-            break;
-        case hasStateWarning:
-            stateIntent = BlueprintIntent.WARNING;
-            break;
-        case hasStateDanger:
-            stateIntent = BlueprintIntent.DANGER;
-            break;
-        default:
-            break;
-    }
-
     /** Update external items when they change
      *  e.g for auto-complete when query change
      */
@@ -479,7 +441,8 @@ function MultiSelect<T>({
             <IconButton
                 disabled={disabled}
                 name="operation-clear"
-                data-test-id={dataTestId ? dataTestId + "_clearance" : "clear-all-items"} // @deprecated (v25) automatically set test id will be removed
+                data-test-id={dataTestId ? dataTestId + "_clearance" : undefined}
+                data-testid={dataTestid ? dataTestid + "_clearance" : undefined}
                 onClick={handleClear}
             />
         ) : undefined;
@@ -520,10 +483,10 @@ function MultiSelect<T>({
                     "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
                     ...inputProps,
                 } as React.InputHTMLAttributes<HTMLInputElement>,
-                className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+                className: `${eccgui}-multisuggestfield ${eccgui}-multiselect` + (className ? ` ${className}` : ""),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent: intent || stateIntent,
+                intent: intent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,
@@ -584,8 +547,8 @@ function MultiSelect<T>({
 
 // we still return the Blueprint element here because it was already used like that
 /**
- * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ * @deprecated (v26) use directly <MultiSuggestField<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
  */
-MultiSelect.ofType = BlueprintMultiSelect.ofType;
+MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
 
-export default MultiSelect;
+export default MultiSuggestField;

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

@@ -29,7 +29,7 @@ export default {
     component: MultiSuggestField,
     argTypes: {
         items: {
-            control: "none",
+            control: false,
         },
         intent: {
             ...helpersArgTypes.exampleIntent,

package/src/components/MultiSuggestField/index.ts

@@ -0,0 +1 @@
+export * from "./../MultiSelect/MultiSelect";