@eccenca/gui-elements 23.2.0-rc.1 → 23.3.0-rc.0

package/src/components/Dialog/Modal.tsx

@@ -1,57 +1,79 @@
-import React from 'react';
+import React from "react";
 import {
     Classes as BlueprintClassNames,
-    OverlayProps, Overlay as BlueprintOverlay,
     IOverlayState,
+    Overlay as BlueprintOverlay,
+    OverlayProps,
 } from "@blueprintjs/core";
-import {Card} from "./../Card";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Card } from "./../Card";
 
 export interface ModalProps extends OverlayProps, IOverlayState {
-  children: React.ReactNode | React.ReactNode[];
-  /**
-   * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
-   */
-  overlayClassName?: string;
-  /**
-   * Size of the modal.
-   */
-  size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
-  /**
-   * Prevents that a backdrop area is displayed behind the modal elements.
-   */
-  preventBackdrop?: boolean;
-    /** Optional props for the wrapper div element inside the modal overlay. */
-  wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
+     */
+    overlayClassName?: string;
+    /**
+     * Size of the modal.
+     */
+    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    /**
+     * Prevents that a backdrop area is displayed behind the modal elements.
+     */
+    preventBackdrop?: boolean;
+    /**
+     * Optional props for the wrapper div element inside the modal overlay.
+     */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Make the modal focusable, e.g. when clicking somewhere on it.
+     * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
+     */
+    modalFocusable?: boolean;
 }
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
 export const Modal = ({
     children,
-    className='',
-    overlayClassName='',
-    size="regular",
-    canOutsideClickClose=false,
-    canEscapeKeyClose=false,
-    preventBackdrop=false,
+    className = "",
+    overlayClassName = "",
+    size = "regular",
+    canOutsideClickClose = false,
+    canEscapeKeyClose = false,
+    preventBackdrop = false,
     wrapperDivProps,
+    modalFocusable = true,
     ...otherProps
 }: ModalProps) => {
+    const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
+        !canOutsideClickClose && canEscapeKeyClose
+            ? {
+                  ...otherProps.backdropProps,
+                  // Escape key won't work anymore otherwise after clicking on the backdrop
+                  tabIndex: 0,
+              }
+            : otherProps.backdropProps;
+
+    const focusableProps = modalFocusable
+        ? {
+              tabIndex: 0,
+          }
+        : undefined;
 
     const alteredChildren = React.Children.map(children, (child) => {
-        if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
-            return React.cloneElement(
-                child as React.ReactElement,
-                {
-                    isOnlyLayout: true,
-                    elevation: 4
-                }
-            );
+        if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) {
+            return React.cloneElement(child as React.ReactElement, {
+                isOnlyLayout: true,
+                elevation: 4,
+            });
         }
 
         return child;
@@ -60,6 +82,7 @@ export const Modal = ({
     return (
         <BlueprintOverlay
             {...otherProps}
+            backdropProps={backdropProps}
             className={overlayClassName}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
@@ -71,12 +94,14 @@ export const Modal = ({
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...focusableProps}
+                tabIndex={0}
             >
                 <section
                     className={
                         `${eccgui}-dialog__wrapper` +
-                        (typeof size === 'string' ? ` ${eccgui}-dialog__wrapper--` + size : '') +
-                        (className ? ' ' + className : '')
+                        (typeof size === "string" ? ` ${eccgui}-dialog__wrapper--` + size : "") +
+                        (className ? " " + className : "")
                     }
                 >
                     {alteredChildren}
@@ -84,6 +109,6 @@ export const Modal = ({
             </div>
         </BlueprintOverlay>
     );
-}
+};
 
 export default Modal;

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,18 +1,13 @@
-import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import React, {BaseSyntheticEvent} from "react";
+
 import { IntentTypes } from "../../common/Intent";
-import {
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    CardOptions,
-    CardTitle,
-} from "./../Card";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import IconButton from "../Icon/IconButton";
+import { TestableComponent } from "../interfaces";
+
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
-import {TestableComponent} from "../interfaces";
-import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -45,11 +40,11 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      */
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
-    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     /** If a full screen toggler is shown that will allow to switch to full screen mode. */
-    showFullScreenToggler?: boolean
+    showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
-    startInFullScreenMode?: boolean
+    startInFullScreenMode?: boolean;
 }
 
 /**
@@ -65,6 +60,7 @@ export const SimpleDialog = ({
     notifications = null,
     hasBorder = false,
     preventSimpleClosing = false,
+    enforceFocus = false,
     intent,
     headerOptions,
     showFullScreenToggler = false,
@@ -73,29 +69,30 @@ export const SimpleDialog = ({
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
-    const showToggler = startInFullScreenMode || showFullScreenToggler
+    const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
+    const wrapperDivProps = {
+        ...modalPreventEvents,
+        ...otherProps.wrapperDivProps,
+    };
     return (
         <Modal
+            enforceFocus={enforceFocus}
             {...otherProps}
+            wrapperDivProps={wrapperDivProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
             size={displayFullscreen ? "fullscreen" : size}
         >
-            <Card className={intentClassName}
-            >
-                {(title || headerOptions || showToggler) ? (
+            <Card className={intentClassName}>
+                {title || headerOptions || showToggler ? (
                     <CardHeader>
-                        <CardTitle
-                            className={intentClassName}
-                        >
-                            {title}
-                        </CardTitle>
-                        {(headerOptions || showToggler) ? (
+                        <CardTitle className={intentClassName}>{title}</CardTitle>
+                        {headerOptions || showToggler ? (
                             <CardOptions>
-                                { headerOptions }
+                                {headerOptions}
                                 {showToggler && (
                                     <IconButton
                                         name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
@@ -112,21 +109,29 @@ export const SimpleDialog = ({
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}
                 {!!notifications && (
-                    <CardContent className={`${eccgui}-dialog__notifications`}>
-                        {notifications}
-                    </CardContent>
+                    <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions
-                        inverseDirection
-                        className={intentClassName}
-                    >
+                    <CardActions inverseDirection className={intentClassName}>
                         {actions}
                     </CardActions>
                 )}
             </Card>
         </Modal>
     );
-}
+};
+
+/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
+ * allows to drag or supports hot keys etc. */
+export const modalPreventEvents = {
+    // Prevent certain events from leaving the modal, so that e.g. react-flow does not receive these events doing unexpected stuff
+    onContextMenu: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onClick: (event: BaseSyntheticEvent) => event.stopPropagation()
+};
 
 export default SimpleDialog;

package/src/components/Dialog/dialog.scss

@@ -2,13 +2,15 @@
 
 // our vars
 $eccgui-size-modal-tiny-width: math.div(4, 16) * 100vw !default;
-$eccgui-size-modal-tiny-height:  math.div(1, 9) * 100vh !default;
-$eccgui-size-modal-small-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-small-height:  math.div(2, 9) * 100vh !default;
-$eccgui-size-modal-regular-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-regular-height:  math.div(3, 9) * 100vh !default;
-$eccgui-size-modal-large-width:  math.div(8, 16) * 100vw !default;
-$eccgui-size-modal-large-height:  math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-tiny-height: math.div(1, 9) * 100vh !default;
+$eccgui-size-modal-small-width: math.div(5, 16) * 100vw !default;
+$eccgui-size-modal-small-height: math.div(2, 9) * 100vh !default;
+$eccgui-size-modal-regular-width: math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-regular-height: math.div(3, 9) * 100vh !default;
+$eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
+$eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
+$eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
 $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
@@ -18,15 +20,15 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
 }
 
 .#{$eccgui}-dialog__wrapper {
-    margin: 2rem;
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: center;
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
+    margin: 2rem;
     pointer-events: all;
     user-select: text;
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-    align-content: stretch;
 
     & > * {
         flex-grow: 1;
@@ -34,9 +36,14 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
         max-width: 100%;
     }
 
-    & * {
+    * {
         pointer-events: all;
     }
+
+    .#{$prefix}--popover {
+        // workaround to fix the arrows in pagination when used in modal
+        pointer-events: none;
+    }
 }
 
 .#{$eccgui}-dialog__wrapper--tiny {
@@ -59,14 +66,19 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
     min-height: $eccgui-size-modal-large-height;
 }
 
+.#{$eccgui}-dialog__wrapper--xlarge {
+    width: $eccgui-size-modal-xlarge-width;
+    min-height: $eccgui-size-modal-xlarge-height;
+}
+
 .#{$eccgui}-dialog__wrapper--fullscreen {
-    margin: 0;
-    padding: $eccgui-size-block-whitespace;
     box-sizing: border-box;
-    height: 100vh;
     width: 100vw;
-    max-height: 100vh;
     max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    padding: $eccgui-size-block-whitespace;
+    margin: 0;
 }
 
 .#{$eccgui}-dialog__notifications {

package/src/components/Icon/IconButton.tsx

@@ -48,7 +48,7 @@ export const IconButton = ({
 }: IconButtonProps) => {
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
-        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? "0") < 0 ? false : undefined,
+        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Icon/canonicalIconNames.tsx

@@ -13,6 +13,7 @@ export type ValidIconName =
     | "application-useraccount"
     | "application-vocabularies"
     | "application-warning"
+    | "application-hotkeys"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -162,6 +163,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
     "application-warning": icons.WarningAlt,
+    "application-hotkeys": icons.Keyboard,
 
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -11,7 +11,7 @@ export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDiv
 
 export const OverviewItemDepiction = ({
     children,
-    className = '',
+    className = "",
     keepColors = false,
     ...restProps
 }: OverviewItemDepictionProps) => {
@@ -20,19 +20,11 @@ export const OverviewItemDepiction = ({
         border: false,
         backgroundColor: keepColors ? undefined : "dark",
         ratio: "1:1" as "1:1",
-        padding: "medium" as "medium"
-    }
+        padding: "medium" as "medium",
+    };
     // only return Depiction element if it is wrapped inside OverviewItemDepiction
-    if (
-        typeof children === "object" &&
-        !!children &&
-        "type" in children &&
-        children.type === Depiction
-    ) {
-        return React.cloneElement(
-            children,
-            defaultDepictionDisplay
-        );
+    if (typeof children === "object" && !!children && "type" in children && children.type === Depiction) {
+        return React.cloneElement(children, defaultDepictionDisplay);
     }
     // use Depiction element for basic icons
     if (
@@ -41,7 +33,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children} {...defaultDepictionDisplay} />
+        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div
@@ -54,7 +46,7 @@ export const OverviewItemDepiction = ({
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemDepiction;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -1,16 +1,21 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additional label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
@@ -18,9 +23,15 @@ export const PropertyName = ({ className = "", size, children, ...otherProps }:
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };

package/src/components/Select/Select.tsx

@@ -105,6 +105,9 @@ export function Select<T>({
 
 /** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
 function ofType<U>() {
+    console.warn(
+        "Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`"
+    );
     return (props: SelectProps<U>) => <Select<U> {...props} />;
 }
 

package/src/components/Select/_select.scss

@@ -3,7 +3,7 @@
 .#{$ns}-select-popover {
     .#{$ns}-menu {
         max-width: unset;
-        max-height: unset;
+        max-height: 40vh;
     }
 }
 

package/src/components/Separation/Spacing.tsx

@@ -1,38 +1,42 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge";
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.
      */
-    hasDivider?: boolean
+    hasDivider?: boolean;
     /**
      * If set then the spacing separates two elements on the horizontal axis.
      * The spacing area then is created on a vertical axis.
      */
-    vertical?: boolean
+    vertical?: boolean;
 }
 
 /**
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false, ...otherDivProps }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div
             className={
-                `${eccgui}-separation__spacing-` + direction +
-                ` ${eccgui}-separation__spacing--` + size +
+                `${eccgui}-separation__spacing-` +
+                direction +
+                ` ${eccgui}-separation__spacing--` +
+                size +
                 (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
             }
+            {...otherDivProps}
         />
     );
-}
+};
 
 export default Spacing;

package/src/components/TextField/TextField.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, {KeyboardEventHandler, RefObject} from "react";
 import {
-    InputGroup as BlueprintInputGroup,
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
-    MaybeElement,
     HTMLInputProps,
+    InputGroup as BlueprintInputGroup,
     InputGroupProps2,
+    Intent as BlueprintIntent,
+    MaybeElement,
 } from "@blueprintjs/core";
-import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
+import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
 import Icon from "../Icon/Icon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
@@ -50,6 +50,9 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
+
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean
 }
 
 /**
@@ -64,8 +67,10 @@ export const TextField = ({
   fullWidth = true,
   leftIcon,
   invisibleCharacterWarning,
+  escapeToBlur = false,
   ...otherProps
 }: TextFieldProps) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -84,6 +89,25 @@ export const TextField = ({
       break;
   }
 
+    const handleLabelEscape = React.useCallback(() => {
+        inputRef.current?.blur()
+        if(otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
+            if(otherInputRef.current) {
+                otherInputRef.current.blur()
+            }
+        }
+    }, [])
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
+        if(escapeToBlur && event.key === "Escape") {
+            event.preventDefault()
+            handleLabelEscape()
+            return false
+        }
+        return otherProps.onKeyDown?.(event)
+    }, [otherProps.onKeyDown, escapeToBlur])
+
   const {
       intent = deprecatedIntent,
       ...otherBlueprintInputGroupProps
@@ -110,6 +134,7 @@ export const TextField = ({
 
   return (
     <BlueprintInputGroup
+        inputRef={inputRef}
       className={
           `${eccgui}-textfield` +
           (intent ? ` ${eccgui}-intent--${intent}` : "") +
@@ -133,6 +158,7 @@ export const TextField = ({
       }
       dir={"auto"}
       onChange={maybeWrappedOnChange}
+        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
     />
   );
 }

package/src/components/Tooltip/tooltip.scss

@@ -2,6 +2,7 @@
 $eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-tooltip-width: 20em !default;
+
 // library vars
 $tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
 $tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
@@ -15,8 +16,8 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 .#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
-    white-space: normal;
     overflow-wrap: break-word;
+    white-space: normal;
 }
 
 .#{$eccgui}-tooltip--small {
@@ -39,3 +40,16 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
         text-decoration: none;
     }
 }
+
+.#{$prefix}--tooltip-content {
+    max-width: $eccgui-size-tooltip-width;
+    padding: 0.25 * $eccgui-size-block-whitespace 0.5 * $eccgui-size-block-whitespace;
+    // align Carbon tooltips, they are used automatically by a few carbon based elements, e.g. pagination buttons
+    font-size: $eccgui-size-typo-tooltip;
+    line-height: $eccgui-size-typo-tooltip-lineheight;
+    overflow-wrap: break-word;
+    white-space: normal;
+
+    --cds-popover-background-color: #{$tooltip2-background-color};
+    --cds-popover-text-color: #{$tooltip2-text-color};
+}