@eccenca/gui-elements 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0 → 25.0.0-featurecolorwheelinputcmem7327.1

package/src/components/ColorField/ColorField.stories.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import textFieldTest from "../TextField/stories/TextField.stories";
+
+import { ColorField, ColorFieldProps } from "./ColorField";
+
+export default {
+    title: "Forms/ColorField",
+    component: ColorField,
+    argTypes: {
+        ...textFieldTest.argTypes,
+    },
+} as Meta<typeof ColorField>;
+
+const Template: StoryFn<typeof ColorField> = (args) => <ColorField {...args}></ColorField>;
+
+export const Default = Template.bind({});
+Default.args = {
+    onChange: (e) => {
+        alert(e.target.value);
+    },
+};
+
+export const NoPalettePresets = Template.bind({});
+NoPalettePresets.args = {
+    ...Default.args,
+    colorWeightFilter: [],
+    paletteGroupFilter: [],
+    allowCustomColor: true,
+};
+
+interface TemplateColorHashProps
+    extends Pick<ColorFieldProps, "onChange" | "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"> {
+    stringForColorHashValue: string;
+}
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        colorWeightFilter={args.colorWeightFilter}
+        paletteGroupFilter={args.paletteGroupFilter}
+        value={ColorField.calculateColorHashValue(args.stringForColorHashValue, {
+            allowCustomColor: args.allowCustomColor,
+            colorWeightFilter: args.colorWeightFilter,
+            paletteGroupFilter: args.paletteGroupFilter,
+        })}
+    />
+);
+
+/**
+ * Component provides a helper function to calculate a color hash from a text,
+ * that can be used as `value` or `defaultValue`.
+ *
+ * ```
+ * <ColorField value={ColorField.calculateColorHashValue("MyText")} />
+ * ```
+ *
+ * You can add `options` to set the config for the color palette filters.
+ * The same default values like on `ColorField` are used for them.
+ */
+export const ColorHashValue = TemplateColorHash.bind({});
+ColorHashValue.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    colorWeightFilter: [300, 500, 700],
+    paletteGroupFilter: ["layout", "extra"],
+    stringForColorHashValue: "My text that will used to create a color hash as initial value.",
+};

package/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from "react";
+import classNames from "classnames";
+
+import { utils } from "../../common";
+import { ColorWeight, PaletteGroup } from "../../common/utils/colorHash";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlay } from "../ContextOverlay";
+import { FieldSet } from "../Form";
+import { RadioButton } from "../RadioButton/RadioButton";
+import { Spacing } from "../Separation/Spacing";
+import { Tag, TagList } from "../Tag";
+import { TextField, TextFieldProps } from "../TextField";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { WhiteSpaceContainer } from "../Typography";
+
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the configured color palette.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * What color weights should be included in the set of allowed colors.
+     */
+    colorWeightFilter?: ColorWeight[];
+    /**
+     * What palette groups should be included in the set of allowed colors.
+     */
+    paletteGroupFilter?: PaletteGroup[];
+}
+
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
+ */
+export const ColorField = ({
+    className = "",
+    allowCustomColor = false,
+    colorWeightFilter = [100, 300, 700, 900],
+    paletteGroupFilter = ["layout"],
+    defaultValue,
+    value,
+    onChange,
+    fullWidth = false,
+    ...otherTextFieldProps
+}: ColorFieldProps) => {
+    const ref = React.useRef(null);
+    const [colorValue, setColorValue] = React.useState<string>(defaultValue || value || "#000000");
+
+    let allowedPaletteColors, disableNativePicker, disabled;
+    const updateConfig = () => {
+        allowedPaletteColors = utils.getEnabledColorPropertiesFromPalette({
+            includePaletteGroup: paletteGroupFilter,
+            includeColorWeight: colorWeightFilter,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        });
+
+        disableNativePicker =
+            colorWeightFilter.length > 0 && paletteGroupFilter.length > 0 && allowedPaletteColors.length > 0;
+        disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+    };
+    updateConfig();
+    React.useEffect(() => {
+        updateConfig();
+    }, [allowCustomColor, colorWeightFilter, paletteGroupFilter, otherTextFieldProps]);
+
+    React.useEffect(() => {
+        setColorValue(defaultValue || value || "#000000");
+    }, [defaultValue, value]);
+
+    const forwardOnChange = (forwardedEvent: React.ChangeEvent<HTMLInputElement>) => {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+
+    const colorInput = (
+        <TextField
+            inputRef={ref}
+            className={classNames(`${eccgui}-colorfield`, className, {
+                [`${eccgui}-colorfield--custom-picker`]: disableNativePicker,
+            })}
+            // we cannot use `color` type for the custom picker because we do not have control over it then
+            type={!disableNativePicker ? "color" : "text"}
+            readOnly={disableNativePicker}
+            disabled={disabled}
+            value={colorValue}
+            fullWidth={fullWidth}
+            {...otherTextFieldProps}
+            onChange={
+                !disableNativePicker
+                    ? (e: React.ChangeEvent<HTMLInputElement>) => {
+                          forwardOnChange(e);
+                      }
+                    : undefined
+            }
+            style={{ ...otherTextFieldProps.style, [`--eccgui-colorfield-background`]: colorValue } as CSSProperties}
+        />
+    );
+
+    return disableNativePicker && !disabled ? (
+        <ContextOverlay
+            fill={fullWidth}
+            content={
+                <WhiteSpaceContainer
+                    paddingTop={"small"}
+                    paddingRight={"small"}
+                    paddingBottom={"small"}
+                    paddingLeft={"small"}
+                    className={`${eccgui}-colorfield__picker`}
+                >
+                    {allowCustomColor && (
+                        <>
+                            <TextField
+                                type={"color"}
+                                value={colorValue}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    forwardOnChange(e);
+                                }}
+                            />
+                            <Spacing size={"small"} />
+                        </>
+                    )}
+                    <FieldSet>
+                        <TagList
+                            className={`${eccgui}-colorfield__palette ${eccgui}-colorfield__palette--${
+                                colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : "8"
+                            }col`}
+                        >
+                            {allowedPaletteColors!.map((color: [string, string], idx: number) => [
+                                <RadioButton
+                                    className={`${eccgui}-colorfield__palette__color`}
+                                    hideIndicator
+                                    value={color[1]}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        forwardOnChange(e);
+                                    }}
+                                >
+                                    <Tooltip key={idx} content={color[0].replace(`${eccgui}-color-palette-`, "")}>
+                                        <Tag
+                                            large
+                                            style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
+                                        >
+                                            {color[1]}
+                                        </Tag>
+                                    </Tooltip>
+                                </RadioButton>,
+                                // Looks like we cannot force some type of line break in the tag list via CSS only
+                                (idx + 1) % (colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : 8) ===
+                                    0 && (
+                                    <>
+                                        <br className={`${eccgui}-colorfield__palette-linebreak`} />
+                                    </>
+                                ),
+                            ])}
+                        </TagList>
+                    </FieldSet>
+                </WhiteSpaceContainer>
+            }
+        >
+            {colorInput}
+        </ContextOverlay>
+    ) : (
+        colorInput
+    );
+};
+
+type calculateColorHashValueProps = Pick<
+    ColorFieldProps,
+    "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"
+>;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        allowCustomColor: false,
+        colorWeightFilter: [100, 300, 700, 900],
+        paletteGroupFilter: ["layout"],
+    }
+) => {
+    const hash = utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor as boolean,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.paletteGroupFilter,
+                includeColorWeight: options.colorWeightFilter,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+
+    return hash ? hash : undefined;
+};
+
+export default ColorField;

package/src/components/ColorField/_colorfield.scss

@@ -0,0 +1,56 @@
+.#{$eccgui}-colorfield {
+    cursor: default;
+
+    &:not(.#{$ns}-fill) {
+        width: 100%;
+        max-width: 4 * $eccgui-size-textfield-height-regular;
+    }
+
+    .#{$ns}-input {
+        color: var(--#{$eccgui}-colorfield-background);
+        cursor: inherit;
+        background-color: var(--#{$eccgui}-colorfield-background);
+
+        &[type="color"] {
+            &::-webkit-color-swatch-wrapper {
+                display: none;
+            }
+
+            &::-moz-color-swatch {
+                display: none;
+            }
+        }
+    }
+
+    .#{$ns}-input-left-container {
+        top: 1px;
+        left: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+    .#{$ns}-input-action {
+        top: 1px;
+        right: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+}
+
+.#{$eccgui}-colorfield__palette {
+    & > li:has(.#{$eccgui}-colorfield__palette-linebreak) {
+        display: block;
+        width: 100%;
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+}
+
+.#{$eccgui}-colorfield__palette__color {
+    margin: 0;
+    .#{$eccgui}-tag__item {
+        width: 3rem;
+        color: var(--#{$eccgui}-colorfield-palette-color) !important;
+        background-color: var(--#{$eccgui}-colorfield-palette-color) !important;
+    }
+}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -7,7 +7,7 @@ import {
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
@@ -24,6 +24,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Currently experimental.
      */
     usePlaceholder?: boolean;
+    /**
+     * Adds white space to each side of the overlay content.
+     * For more control use `WhiteSpaceContainer` directly as wrapper for the content children.
+     */
+    paddingSize?: WhiteSpaceContainerProps["paddingTop"];
 }
 
 /**
@@ -36,6 +41,8 @@ export const ContextOverlay = ({
     preventTopPosition,
     className = "",
     usePlaceholder = false,
+    paddingSize,
+    content,
     ...otherPopoverProps
 }: ContextOverlayProps) => {
     const placeholderRef = React.useRef<HTMLElement>(null);
@@ -169,6 +176,18 @@ export const ContextOverlay = ({
     ) : (
         <BlueprintPopover
             placement="bottom"
+            content={content ? (
+                paddingSize ? (
+                        <WhiteSpaceContainer
+                            paddingTop={paddingSize}
+                            paddingRight={paddingSize}
+                            paddingBottom={paddingSize}
+                            paddingLeft={paddingSize}
+                        >
+                            {content}
+                        </WhiteSpaceContainer>
+                    ) : content
+            ) : undefined}
             {...otherPopoverProps}
             className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}

package/src/components/DecoupledOverlay/DecoupledOverlay.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { DecoupledOverlay, DecoupledOverlayProps, Tag, WhiteSpaceContainer } from "../../../index";
+
+export default {
+    title: "Components/DecoupledOverlay",
+    component: DecoupledOverlay,
+    argTypes: {},
+} as Meta<typeof DecoupledOverlay>;
+
+const Template: StoryFn<typeof DecoupledOverlay> = (args: DecoupledOverlayProps) => {
+    return (
+        <>
+            <Tag id={"decoupledTarget"}>Decoupled target</Tag>
+            <DecoupledOverlay {...args} />
+        </>
+    );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+    children: (
+        <WhiteSpaceContainer marginTop={"small"} marginRight={"small"} marginBottom={"small"} marginLeft={"small"}>
+            Decoupled overlay
+        </WhiteSpaceContainer>
+    ),
+    targetSelectorOrElement: "#decoupledTarget",
+};

package/src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import { createPopper } from "@popperjs/core";
+
+import { CLASSPREFIX as eccgui, ContextOverlayProps, TestableComponent, TooltipSize, WhiteSpaceContainer } from "../../index";
+
+export interface DecoupledOverlayProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        TestableComponent,
+        Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal" | "paddingSize"> {
+    /**
+     * Element that should be used. The step content is displayed as a tooltip instead of a modal.
+     * In case of an array, the first match is highlighted. */
+    targetSelectorOrElement: string | Element;
+    /**
+     * The size of the overlay.
+     * */
+    size?: TooltipSize;
+}
+
+/**
+ * Use an overlay popover without the necessity to use a target that need to be rendered in place.
+ * The target is referenced by a selector string or element object.
+ * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
+ * It is always displayed, close it by removement.
+ */
+export const DecoupledOverlay = ({
+    targetSelectorOrElement,
+    usePortal = true,
+    portalContainer = document.body,
+    minimal = false,
+    placement = "auto",
+    size = "large",
+    paddingSize,
+    children,
+}: DecoupledOverlayProps) => {
+    const overlayRef = React.useCallback(
+        (overlay: HTMLDivElement | null) => {
+            const target =
+                typeof targetSelectorOrElement === "string"
+                    ? document.querySelector(targetSelectorOrElement)
+                    : targetSelectorOrElement;
+            if (overlay && target) {
+                createPopper(target, overlay, {
+                    placement: placement,
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 15],
+                            },
+                        },
+                    ],
+                });
+            }
+        },
+        [targetSelectorOrElement]
+    );
+
+    const overlay = (
+        <div
+            className={
+                `${eccgui}-decoupled-overlay` +
+                ` ${eccgui}-decoupled-overlay--${size}` +
+                ` ${BlueprintClasses.POPOVER}` +
+                (minimal ? ` ${BlueprintClasses.MINIMAL}` : "")
+            }
+            role="tooltip"
+            ref={overlayRef}
+        >
+            {!minimal && (
+                <div
+                    className={`${eccgui}-decoupled-overlay__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    data-popper-arrow
+                    aria-hidden
+                />
+            )}
+            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-decoupled-overlay__content`}>
+                {paddingSize ? (
+                    <WhiteSpaceContainer
+                        paddingTop={paddingSize}
+                        paddingRight={paddingSize}
+                        paddingBottom={paddingSize}
+                        paddingLeft={paddingSize}
+                    >
+                        {children}
+                    </WhiteSpaceContainer>
+                ) : children}
+            </div>
+        </div>
+    );
+
+    return usePortal ? createPortal(overlay, portalContainer) : overlay;
+};
+
+export default DecoupledOverlay;

package/src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -0,0 +1,46 @@
+.#{$eccgui}-decoupled-overlay__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-decoupled-overlay {
+    &.#{$prefix-blueprintjs}-popover {
+        z-index: 8001;
+    }
+
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+
+    &:has(.#{$eccgui}-decoupled-overlay__arrow) {
+        .#{$eccgui}-decoupled-overlay__content {
+            min-height: 30px; // height of blueprint arrow
+        }
+    }
+}
+
+.#{$eccgui}-decoupled-overlay__content {
+    padding: 0.1px; // force margins of children to stay inside
+}

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,5 +1,6 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
+import { transform} from "./transformIcon";
 
 const canonicalIcons = {
     "application-activities": icons.Activity,
@@ -172,8 +173,10 @@ const canonicalIcons = {
     "state-checked": icons.CheckboxChecked,
     "state-checkedsimple": icons.Checkmark,
     "state-confirmed": icons.ThumbsUp,
+    "state-confirmed-all": icons.ThumbsUpDouble,
     "state-danger": icons.ErrorFilled,
     "state-declined": icons.ThumbsDown,
+    "state-declined-all": transform(icons.ThumbsUpDouble, 0, false, true),
     "state-flagged": icons.Flag,
     "state-info": icons.InformationFilled,
     "state-locked": icons.Locked,

package/src/components/Icon/transformIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CarbonIconType, CarbonIconProps } from "@carbon/react/icons";
+
+export const transform = (IconSymbol: CarbonIconType, rotate: number = 0, flipH: boolean = false, flipV: boolean = false) : CarbonIconType => {
+    return React.forwardRef((props: CarbonIconProps, ref: React.ForwardedRef<React.ReactSVGElement>) => {
+        return (
+            <IconSymbol
+                {...props}
+                ref={ref}
+                transform={
+                    `scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`
+                }
+            />
+        );
+    })
+}
+

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Link } from "../../../index";
+
+export default {
+    title: "Components/Link",
+    component: Link,
+    argTypes: {
+        target: {
+            control: "select",
+            options: ["_self", "_blank", "_parent", "_top"],
+        },
+    },
+} as Meta<typeof Link>;
+
+const Template: StoryFn<typeof Link> = (args) => <Link {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: "Example link",
+    href: "https://example.com/",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: "Disabled link",
+    href: "https://example.com/",
+    disabled: true,
+};

package/src/components/Link/link.scss

@@ -2,8 +2,34 @@
 @include link.link;
 
 .#{$prefix}--link {
-    font-size: 1em;
-    line-height: inherit;
+    &,
+    &:hover {
+        // default case: use font size from context
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    &.#{$prefix}--link--sm {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-caption;
+            line-height: $eccgui-size-typo-caption-lineheight;
+        }
+    }
+    &.#{$prefix}--link--md {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+        }
+    }
+    &.#{$prefix}--link--lg {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+        }
+    }
 
     &:focus {
         outline: none;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -10,7 +10,15 @@ import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
-import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
+import {
+    ContextOverlayProps,
+    Highlighter,
+    highlighterUtils,
+    IconButton,
+    MenuItem,
+    OverflowText,
+    Spinner
+} from "./../../index";
 
 export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
@@ -53,7 +61,7 @@ interface MultiSuggestFieldCommonProps<T>
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
      */
-    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined> | (T[] | undefined);
     /**
      * Whether the component should take up the full width of its container.
      * This overrides `tagInputProps.fill`.
@@ -265,7 +273,8 @@ export function MultiSuggestField<T>({
     };
 
     const defaultFilterPredicate = (item: T, query: string) => {
-        return itemLabel(item).toLowerCase().includes(query);
+        const searchWords = highlighterUtils.extractSearchWords(query, true)
+        return highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords)
     };
 
     /**