@eccenca/gui-elements 23.7.0-rc.2 → 23.7.0-rc.4

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/textfield.scss

@@ -37,6 +37,9 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 // fixes
 
 .#{$ns}-input-group {
+    // fix for z-index rule of input group left icon
+    z-index: 0;
+
     // fix for correct fill/fullWidth option
     display: inline-block;
     &.#{$ns}-fill {