@eccenca/gui-elements 23.7.0-rc.1 → 23.7.0-rc.3

package/src/components/Sticky/StickyTarget.tsx

@@ -13,15 +13,26 @@ export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement>
      * The application header is not taken into offset calculation
      */
     local?: boolean;
+    /**
+     * Set additional distance to original sticky position.
+     */
+    offset?: `${number}${string}`;
     /**
      * Set the background color used for the sticky area.
      * As it can overlay other content readability could be harmed if the overlayed content is shining through.
      */
     background?: "card" | "application" | "transparent";
     /**
-     * Set additional distance to original sticky position.
+     * In some situations there could be a gap between sticky target area and the border of the related scroll area.
+     * The main gap is the gap towards the direction of the sticky behaviour, specified by `to`.
+     * You can fill this gap with a gradient or full background color.
      */
-    offset?: `${number}${string}`;
+    fillMainGap?: "full" | "gradient";
+    /**
+     * The secondary gap is the gap against the direction of the sticky behaviour.
+     * So in case of `to="top"` this is rendered on the bottom of the sticky area.
+     */
+    fillSecondaryGap?: "full" | "gradient";
     /**
      * Callback that returns an DOM element.
      * The position of `StickyTarget` is then calculated relative to that element.
@@ -37,8 +48,10 @@ export const StickyTarget = ({
     className,
     to = "top",
     local = false,
-    background = "transparent",
     offset,
+    background = "transparent",
+    fillMainGap,
+    fillSecondaryGap,
     style,
     getConnectedElement,
     ...otherDivProps
@@ -50,8 +63,13 @@ export const StickyTarget = ({
         offsetStyle = { ...style, "--eccgui-sticky-target-localoffset": offset } as CSSProperties;
     }
 
-    let connectedOffset = 0;
     React.useEffect(() => {
+        let removeEventForConnectedOffset = () => {
+            /* no event need to be removed */
+        };
+        let removeEventForStickynessCheck = () => {
+            /* no event need to be removed */
+        };
         /**
          * If the target should be sticky to a defined element then:
          * * check for the element and its scroll parent
@@ -64,6 +82,7 @@ export const StickyTarget = ({
                 const scrollParentFallback = !scrollParent ? document.documentElement : false;
                 if (scrollParent || scrollParentFallback) {
                     const updateTargetOffset = () => {
+                        let connectedOffset = 0;
                         const scrollParentPosition = (
                             (scrollParent || scrollParentFallback) as HTMLElement
                         ).getBoundingClientRect();
@@ -85,20 +104,55 @@ export const StickyTarget = ({
                             `${connectedOffset}px`
                         );
                     };
+
                     updateTargetOffset();
                     const eventListeningTarget = scrollParent || window;
                     const eventListeningMethod = (_event: Event) => {
                         updateTargetOffset();
                     };
                     eventListeningTarget.addEventListener("scroll", eventListeningMethod);
-                    return () => {
+                    removeEventForConnectedOffset = () => {
                         eventListeningTarget.removeEventListener("scroll", eventListeningMethod);
                     };
                 }
             }
         }
-        return;
-    }, [getConnectedElement, stickyTargetRef, to]);
+        /**
+         * Check if sticky target element is currently in sticky mode.
+         * sticky mode = current position === defined sticky position
+         */
+        if (stickyTargetRef && (fillMainGap || fillSecondaryGap)) {
+            const stickyTarget = stickyTargetRef.current as Element;
+            const scrollParent = utils.getScrollParent(stickyTarget);
+            const checkStickyness = () => {
+                const definedPosition = parseInt(window.getComputedStyle(stickyTarget)[to], 10);
+                const scrollParentPosition = scrollParent ? scrollParent.getBoundingClientRect()[to] : 0;
+                const currentPosition =
+                    (to === "top" ? 1 : -1) * (stickyTarget.getBoundingClientRect()[to] - scrollParentPosition);
+                // check stickyness in a small position range (not exact value) because of float values
+                const isSticky = currentPosition <= definedPosition + 1 && currentPosition >= definedPosition - 1;
+                if (isSticky && !stickyTarget.classList.contains(`${eccgui}-sticky__target--issticky`)) {
+                    stickyTarget.classList.add(`${eccgui}-sticky__target--issticky`);
+                }
+                if (!isSticky && stickyTarget.classList.contains(`${eccgui}-sticky__target--issticky`)) {
+                    stickyTarget.classList.remove(`${eccgui}-sticky__target--issticky`);
+                }
+            };
+            checkStickyness();
+            const eventListeningTarget = scrollParent || window;
+            const eventListeningMethod = (_event: Event) => {
+                checkStickyness();
+            };
+            eventListeningTarget.addEventListener("scroll", eventListeningMethod);
+            removeEventForStickynessCheck = () => {
+                eventListeningTarget.removeEventListener("scroll", eventListeningMethod);
+            };
+        }
+        return () => {
+            removeEventForConnectedOffset();
+            removeEventForStickynessCheck();
+        };
+    }, [getConnectedElement, stickyTargetRef, to, fillMainGap, fillSecondaryGap]);
 
     return (
         <div
@@ -108,6 +162,8 @@ export const StickyTarget = ({
                 (to ? ` ${eccgui}-sticky__target--${to}` : "") +
                 (local ? ` ${eccgui}-sticky__target--localscrollarea` : "") +
                 (background ? ` ${eccgui}-sticky__target--bg-${background}` : "") +
+                (fillMainGap ? ` ${eccgui}-sticky__target--maingapfill-${fillMainGap}` : "") +
+                (fillSecondaryGap ? ` ${eccgui}-sticky__target--secondarygapfill-${fillSecondaryGap}` : "") +
                 (className ? ` ${className}` : "")
             }
             style={offset ? offsetStyle : style}

package/src/components/Sticky/sticky.scss

@@ -5,11 +5,14 @@
 .#{$eccgui}-sticky__target {
     position: sticky;
     z-index: 1;
+    background-color: var(--eccgui-sticky-target-bgcolor, transparent);
 
     --eccgui-sticky-target-applicationoffset: 0px;
+    --eccgui-sticky-target-maingap: 0px;
 
     .#{$eccgui}-application__content &:not(.#{$eccgui}-sticky__target--localscrollarea) {
-        --eccgui-sticky-target-applicationoffset: $eccgui-size-block-whitespace;
+        --eccgui-sticky-target-applicationoffset: #{$eccgui-size-block-whitespace};
+        --eccgui-sticky-target-maingap: #{$eccgui-size-block-whitespace};
     }
 
     .#{$eccgui}-application__header
@@ -17,53 +20,109 @@
         &:not(.#{$eccgui}-sticky__target--localscrollarea) {
         --eccgui-sticky-target-applicationoffset: calc(#{mini-units(8)} + #{$eccgui-size-block-whitespace});
     }
+
+    &[class*="#{$eccgui}-sticky__target--maingapfill"]:before,
+    &[class*="#{$eccgui}-sticky__target--secondarygapfill"]:after {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: calc(var(--eccgui-sticky-target-maingap) + var(--eccgui-sticky-target-localoffset, 0px));
+    }
+
+    &[class*="#{$eccgui}-sticky__target--secondarygapfill"]:after {
+        height: $eccgui-size-block-whitespace * 0.5;
+    }
 }
 
 .#{$eccgui}-sticky__target--top {
     top: calc(var(--eccgui-sticky-target-applicationoffset) + var(--eccgui-sticky-target-localoffset, 0px));
+
+    &[class*="#{$eccgui}-sticky__target--maingapfill"]:before {
+        bottom: 100%;
+    }
+
+    &[class*="#{$eccgui}-sticky__target--secondarygapfill"]:after {
+        top: 100%;
+    }
+
+    &.#{$eccgui}-sticky__target--maingapfill-gradient:before {
+        background: linear-gradient(transparent, 10%, var(--eccgui-sticky-target-bgcolor, transparent));
+    }
+
+    &.#{$eccgui}-sticky__target--secondarygapfill-gradient:after {
+        background: linear-gradient(var(--eccgui-sticky-target-bgcolor, transparent), transparent);
+    }
 }
 
 .#{$eccgui}-sticky__target--bottom {
     --eccgui-sticky-target-applicationoffset: 0px;
 
     bottom: calc(var(--eccgui-sticky-target-applicationoffset) + var(--eccgui-sticky-target-localoffset, 0px));
+
+    &[class*="#{$eccgui}-sticky__target--maingapfill"]:before {
+        top: 100%;
+    }
+
+    &[class*="#{$eccgui}-sticky__target--secondarygapfill"]:after {
+        bottom: 100%;
+    }
+
+    &.#{$eccgui}-sticky__target--maingapfill-gradient:before {
+        background: linear-gradient(var(--eccgui-sticky-target-bgcolor, 90%, transparent), transparent);
+    }
+
+    &.#{$eccgui}-sticky__target--secondarygapfill-gradient:after {
+        background: linear-gradient(transparent, var(--eccgui-sticky-target-bgcolor, transparent));
+    }
 }
 
 .#{$eccgui}-sticky__target--bg-card {
-    background-color: $card-background-color;
+    --eccgui-sticky-target-bgcolor: #{$card-background-color};
 
     .#{$eccgui}-card.#{$eccgui}-intent--primary & {
-        background-color: color.mix($eccgui-color-primary, $card-background-color, 5%);
+        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-primary, $card-background-color, 5%)};
     }
     .#{$eccgui}-card.#{$eccgui}-intent--accent & {
-        background-color: color.mix($eccgui-color-accent, $card-background-color, 10%);
+        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-accent, $card-background-color, 10%)};
     }
     .#{$eccgui}-card.#{$eccgui}-intent--success & {
-        background-color: $eccgui-color-success-background;
+        --eccgui-sticky-target-bgcolor: #{$eccgui-color-success-background};
     }
     .#{$eccgui}-card.#{$eccgui}-intent--info & {
-        background-color: $eccgui-color-info-background;
+        --eccgui-sticky-target-bgcolor: #{$eccgui-color-info-background};
     }
     .#{$eccgui}-card.#{$eccgui}-intent--warning & {
-        background-color: $eccgui-color-warning-background;
+        --eccgui-sticky-target-bgcolor: #{$eccgui-color-warning-background};
     }
     .#{$eccgui}-card.#{$eccgui}-intent--danger & {
-        background-color: $eccgui-color-danger-background;
+        --eccgui-sticky-target-bgcolor: #{$eccgui-color-danger-background};
     }
 
     .#{$eccgui}-card.#{$ns}-interactive:hover & {
-        background-color: $button-background-color-hover;
+        --eccgui-sticky-target-bgcolor: #{$button-background-color-hover};
     }
 
     .#{$eccgui}-card.#{$ns}-selected & {
-        background-color: $card-selected-background-color;
+        --eccgui-sticky-target-bgcolor: #{$card-selected-background-color};
     }
 
     .#{$eccgui}-card--elevated & {
-        background-color: $button-background-color-active;
+        --eccgui-sticky-target-bgcolor: #{$button-background-color-active};
     }
 }
 
 .#{$eccgui}-sticky__target--bg-application {
-    background-color: $eccgui-color-application-background;
+    --eccgui-sticky-target-bgcolor: #{$eccgui-color-application-background};
+}
+
+.#{$eccgui}-sticky__target--issticky {
+    &[class*="#{$eccgui}-sticky__target--maingapfill"]:before,
+    &[class*="#{$eccgui}-sticky__target--secondarygapfill"]:after {
+        content: "";
+    }
+}
+
+.#{$eccgui}-sticky__target--maingapfill-full:before,
+.#{$eccgui}-sticky__target--secondarygapfill-full:after {
+    background: var(--eccgui-sticky-target-bgcolor, transparent);
 }

package/src/components/TextField/TextArea.tsx

@@ -1,35 +1,63 @@
 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 { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Icon } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
-export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
     /**
      * when set to true the input takes a blue border color
+     * @deprecated Use the `intent` property.
      */
     hasStatePrimary?: boolean;
     /**
      * when set to true the input takes a green border color
+     * @deprecated Use the `intent` property.
      */
     hasStateSuccess?: boolean;
     /**
      * when set to true the input takes an orange border color
+     * @deprecated Use the `intent` property.
      */
     hasStateWarning?: boolean;
     /**
      * when set to true the input takes a red border color
+     * @deprecated Use the `intent` property.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the text area.
+     */
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+    /**
+     * Left aligned icon, can be a canonical icon name or an `Icon` element.
+     * This will update left padding on the text area.
+     */
+    leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * Element to render on right side of text area. Should be not too large.
+     * This will update right padding on the text area.
+     */
+    rightElement?: JSX.Element;
+    /**
+     * Add HTML properties to the wrapper element.
+     * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
+     */
+    wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 }
 
 export const TextArea = ({
@@ -40,38 +68,172 @@ export const TextArea = ({
     hasStateDanger = false,
     rows = 5,
     invisibleCharacterWarning,
+    leftIcon,
+    rightElement,
+    wrapperDivProps,
     ...otherProps
 }: TextAreaProps) => {
-    let intent;
+    const textAreaCallback = React.useCallback(
+        (textAreaElement: HTMLTextAreaElement) => {
+            if (textAreaElement && typeof textAreaElement === "object") {
+                let textAreaStyle: CSSStyleDeclaration;
+                if (!textAreaElement.dataset.processed) {
+                    textAreaStyle = getComputedStyle(textAreaElement);
+                    textAreaElement.dataset.processed = "yes";
+                    textAreaElement.dataset.paddingtop = textAreaStyle.paddingTop ?? "0px";
+                    textAreaElement.dataset.paddingleft = textAreaStyle.paddingLeft ?? "0px";
+                    textAreaElement.dataset.paddingright = textAreaStyle.paddingRight ?? "0px";
+                } else {
+                    textAreaStyle = {
+                        paddingTop: textAreaElement.dataset.paddingtop ?? "0px",
+                        paddingLeft: textAreaElement.dataset.paddingleft ?? "0px",
+                        paddingRight: textAreaElement.dataset.paddingright ?? "0px",
+                    } as CSSStyleDeclaration;
+                }
+                const textAreaElementRect = textAreaElement.getBoundingClientRect();
+                const wrapperElement = textAreaElement.parentElement;
+
+                if (leftIcon && wrapperElement) {
+                    const leftIconElement = wrapperElement.querySelector(`.${eccgui}-textarea__icon`) as HTMLElement;
+                    const leftIconElementRect = leftIconElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (leftIconElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        leftIconElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        leftIconElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
+                    textAreaElement.style.setProperty(
+                        "padding-left",
+                        `calc(${leftIconElementRect.width ? 2 : 1} * ${textAreaStyle.paddingLeft} + ${
+                            leftIconElementRect.width ?? 0
+                        }px)`
+                    );
+                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                        textAreaElement.focus();
+                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                }
+
+                if (rightElement && wrapperElement) {
+                    const rightElementElement = wrapperElement.querySelector(
+                        `.${eccgui}-textarea__options`
+                    ) as HTMLElement;
+                    const rightElementElementRect = rightElementElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (rightElementElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        rightElementElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        rightElementElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    rightElementElement.style.setProperty("right", textAreaStyle.paddingRight);
+                    textAreaElement.style.setProperty(
+                        "padding-right",
+                        `calc(${rightElementElementRect.width ? 2 : 1} * ${textAreaStyle.paddingRight} + ${
+                            rightElementElementRect.width ?? 0
+                        }px)`
+                    );
+                }
+            }
+        },
+        [leftIcon, rightElement]
+    );
+
+    let deprecatedIntent;
     switch (true) {
         case hasStatePrimary:
-            intent = BlueprintIntent.PRIMARY;
+            deprecatedIntent = IntentDefinitions.PRIMARY;
             break;
         case hasStateSuccess:
-            intent = BlueprintIntent.SUCCESS;
+            deprecatedIntent = IntentDefinitions.SUCCESS;
             break;
         case hasStateWarning:
-            intent = BlueprintIntent.WARNING;
+            deprecatedIntent = IntentDefinitions.WARNING;
             break;
         case hasStateDanger:
-            intent = BlueprintIntent.DANGER;
+            deprecatedIntent = IntentDefinitions.DANGER;
             break;
         default:
             break;
     }
 
-    const maybeWrappedOnChange = useTextValidation({ ...otherProps, invisibleCharacterWarning });
+    const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps;
 
-    return (
+    let iconIntent;
+    switch (intent) {
+        case "edited":
+            iconIntent = IntentDefinitions.INFO;
+            break;
+        case "removed":
+            iconIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            iconIntent = intent as IntentTypes;
+            break;
+    }
+
+    const maybeWrappedOnChange = useTextValidation({ ...otherBlueprintTextAreaProps, invisibleCharacterWarning });
+
+    const textarea = (
         <BlueprintTextArea
-            className={`${eccgui}-textarea ` + className}
-            intent={intent}
-            rows={rows ? rows : undefined}
-            {...otherProps}
+            inputRef={textAreaCallback}
+            className={
+                `${eccgui}-textarea` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            intent={
+                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                    ? (intent as BlueprintIntent)
+                    : undefined
+            }
+            spellCheck={intent === "removed" ? false : undefined}
+            rows={
+                rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
+                    ? rows
+                    : 1
+            }
+            {...otherBlueprintTextAreaProps}
             dir={"auto"}
             onChange={maybeWrappedOnChange}
         />
     );
+
+    const { className: wrapperClassName, ...otherWrapperDivProps } = wrapperDivProps ?? {};
+
+    return wrapperDivProps || leftIcon || rightElement ? (
+        <div
+            className={`${eccgui}-textarea__wrapper` + (wrapperClassName ? ` ${wrapperClassName}` : "")}
+            {...otherWrapperDivProps}
+        >
+            {textarea}
+            {leftIcon && (
+                <div className={`${eccgui}-textarea__icon`}>
+                    {typeof leftIcon === "string" ? (
+                        <Icon
+                            name={leftIcon as ValidIconName}
+                            className={BlueprintClassNames.ICON}
+                            intent={iconIntent as IntentTypes | undefined}
+                        />
+                    ) : (
+                        <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+                    )}
+                </div>
+            )}
+            {rightElement && <div className={`${eccgui}-textarea__options`}>{rightElement}</div>}
+        </div>
+    ) : (
+        textarea
+    );
 };
 
 export default TextArea;

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -1,22 +1,49 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
-import { TextArea as CustomTextArea } from "./../../../../index";
-type TextAreaType = typeof CustomTextArea;
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
+import { Button, IconButton, TextArea } from "./../../../../index";
+type TextAreaType = typeof TextArea;
 
 export default {
     title: "Forms/TextArea",
-    component: CustomTextArea,
-    argTypes: {},
-} as ComponentMeta<TextAreaType>;
+    component: TextArea,
+    argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            control: helpersArgTypes.exampleIcon.control,
+            options: [...helpersArgTypes.exampleIcon.options, "Button element", "2 Icon buttons"],
+            mapping: {
+                ...helpersArgTypes.exampleIcon.mapping,
+                "Button element": (
+                    <Button small onClick={() => alert("clicked")}>
+                        Button label
+                    </Button>
+                ),
+                "2 Icon buttons": (
+                    <>
+                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
+                    </>
+                ),
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as Meta<TextAreaType>;
 
-const Template: ComponentStory<TextAreaType> = (args) => <CustomTextArea {...args}></CustomTextArea>;
+const Template: StoryFn<TextAreaType> = (args) => <TextArea {...args}></TextArea>;
 
 export const Default = Template.bind({});
 Default.args = {
-    hasStatePrimary: false,
-    hasStateSuccess: false,
-    hasStateWarning: false,
-    hasStateDanger: false,
-    rows: 5,
+    rows: 10,
+    wrapperDivProps: {
+        "data-test-id": "textarea-test-id",
+        "data-testid": "textarea-testid",
+    },
 };