@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-import IconButton from "../Icon/IconButton";
+import { IconButton, IconButtonProps } from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 import Menu from "../Menu/Menu";
 
@@ -17,19 +17,24 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */
     togglerText?: string;
+    /**
+     * Allow to de- and increase the size of the default toggler button.
+     */
+    togglerSize?: IconButtonProps["size"];
     /**
      * Toggler element is displayed larger than normal.
+     * @deprecated (v27) use `togglerSize="large" instead
      */
     togglerLarge?: boolean;
     /**
@@ -62,6 +67,7 @@ export const ContextMenu = ({
     contextOverlayProps,
     disabled,
     togglerLarge = false,
+    togglerSize,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
@@ -76,7 +82,7 @@ export const ContextMenu = ({
                 tooltipAsTitle={tooltipAsTitle}
                 name={[togglerElement]}
                 text={togglerText}
-                large={togglerLarge}
+                size={togglerLarge ? "large" : togglerSize}
                 disabled={!!disabled}
                 data-test-id={dataTestId ?? undefined}
                 data-testid={dataTestid ?? undefined}

package/src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,7 +4,7 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -7,13 +7,14 @@ import {
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { WhiteSpaceContainer, WhiteSpaceContainerProps } from "../Typography";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
      * `target` element to use as toggler for the overlay display.
      */
-    children?: JSX.Element;
+    children?: React.JSX.Element;
     /**
      * Type of counter property to `Modal.forceTopPosition`.
      * Use it when you need to display modal dialogs out of the context overlay.
@@ -56,7 +57,7 @@ export const ContextOverlay = ({
             !otherPopoverProps.defaultIsOpen &&
             !otherPopoverProps.isOpen &&
             otherPopoverProps.renderTarget === undefined &&
-            usePlaceholder
+            usePlaceholder,
     );
 
     const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
@@ -83,7 +84,7 @@ export const ContextOverlay = ({
             replacePlaceholder,
             // we delay the swap for hover/focus to prevent unwanted effects
             // (e.g. event hickup after replacing elements when it is not really necessary)
-            swapDelayTime
+            swapDelayTime,
         );
     };
 
@@ -115,7 +116,7 @@ export const ContextOverlay = ({
         return () => {};
     }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node: any) => {
         const target = node?.targetRef.current.children[0];
         if (!eventMemory.current || !target) {
             return;
@@ -135,7 +136,7 @@ export const ContextOverlay = ({
                     {
                         capture: true,
                         once: true,
-                    }
+                    },
                 );
                 break;
         }
@@ -163,7 +164,7 @@ export const ContextOverlay = ({
                 tabIndex:
                     childTarget.props.tabIndex ??
                     (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
-            })
+            }),
         );
     };
 
@@ -176,8 +177,9 @@ export const ContextOverlay = ({
     ) : (
         <BlueprintPopover
             placement="bottom"
-            content={content ? (
-                paddingSize ? (
+            content={
+                content ? (
+                    paddingSize ? (
                         <WhiteSpaceContainer
                             paddingTop={paddingSize}
                             paddingRight={paddingSize}
@@ -186,8 +188,11 @@ export const ContextOverlay = ({
                         >
                             {content}
                         </WhiteSpaceContainer>
-                    ) : content
-            ) : undefined}
+                    ) : (
+                        content
+                    )
+                ) : undefined
+            }
             {...otherPopoverProps}
             className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}

package/src/components/ContextOverlay/tests/ContextOverlay.test.tsx

@@ -40,7 +40,7 @@ describe("ContextOverlay", () => {
                 {...ContextOverlayStory.args}
                 usePlaceholder={false}
                 interactionKind={PopoverInteractionKind.HOVER}
-            />
+            />,
         );
         fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
         expect(await screen.findByText("Overlay:")).toBeVisible();
@@ -56,7 +56,7 @@ describe("ContextOverlay", () => {
                 {...ContextOverlayStory.args}
                 usePlaceholder={true}
                 interactionKind={PopoverInteractionKind.HOVER}
-            />
+            />,
         );
         checkForPlaceholderClass(container, 1);
         fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);

package/src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -3,10 +3,15 @@ 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";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlayProps } from "../ContextOverlay";
+import { TestableComponent } from "../interfaces";
+import { TooltipSize } from "../Tooltip/Tooltip";
+import WhiteSpaceContainer from "../Typography/WhiteSpaceContainer";
 
 export interface DecoupledOverlayProps
-    extends React.HTMLAttributes<HTMLDivElement>,
+    extends
+        React.HTMLAttributes<HTMLDivElement>,
         TestableComponent,
         Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal" | "paddingSize"> {
     /**
@@ -55,7 +60,7 @@ export const DecoupledOverlay = ({
                 });
             }
         },
-        [targetSelectorOrElement]
+        [targetSelectorOrElement],
     );
 
     const overlay = (
@@ -86,7 +91,9 @@ export const DecoupledOverlay = ({
                     >
                         {children}
                     </WhiteSpaceContainer>
-                ) : children}
+                ) : (
+                    children
+                )}
             </div>
         </div>
     );

package/src/components/Depiction/Depiction.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import SVG from "react-inlinesvg";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { BadgeProps } from "../Badge/Badge";
@@ -46,7 +46,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
      * Color that is used for the depiction background.
      * This may be important if you use PNG, SVG or other image types that can have transparent background areas.
      */
-    backgroundColor?: Color | string | "light" | "dark";
+    backgroundColor?: ColorLike | "light" | "dark";
     /**
      * The depiction is displayed with a border around it.
      */
@@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Description of the depiction.
      */
-    caption?: string | JSX.Element;
+    caption?: string | React.JSX.Element;
     /**
      * How is the caption displayed.
      */
@@ -111,7 +111,7 @@ export function Depiction({
                 [`--${eccgui}-depiction-background`]: color.rgb().toString(),
                 [`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
             };
-        } catch (ex) {
+        } catch {
             // eslint-disable-next-line no-console
             console.warn("Received invalid background color for depiction: " + backgroundColor);
         }
@@ -130,7 +130,7 @@ export function Depiction({
             }
             el.setAttribute("preserveAspectRatio", preserveAspectRatio);
         },
-        [resizing]
+        [resizing],
     );
 
     const inlineSvgCall = useCallback(
@@ -139,7 +139,7 @@ export function Depiction({
                 updateSvgResizing(svgElement);
             }
         },
-        [updateSvgResizing]
+        [updateSvgResizing],
     );
 
     useEffect(() => {

package/src/components/Dialog/Modal.tsx

@@ -81,19 +81,21 @@ export const Modal = ({
     preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
-    const modalContext = React.useContext(ModalContext)
-    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+    const modalContext = React.useContext(ModalContext);
+    const uniqueModalId = React.useRef<string>(
+        modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2),
+    );
 
     React.useEffect(() => {
         return () => {
             // Make sure to always remove flag when modal is removed
-            modalContext.setModalOpen(uniqueModalId.current, false)
-        }
-    }, [])
+            modalContext.setModalOpen(uniqueModalId.current, false);
+        };
+    }, []);
 
     React.useEffect(() => {
-        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
-    }, [otherProps.isOpen])
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen);
+    }, [otherProps.isOpen]);
 
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose

package/src/components/Dialog/ModalContext.tsx

@@ -21,12 +21,12 @@ export const useModalContext = (): ModalContextProps => {
     // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
     const currentOpenModalStack = React.useRef<string[]>([]);
 
-    const setOpenModalStack = ((stackUpdateFunction: (old: string[]) => string[]) => {
-        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current])
-    })
+    const setOpenModalStack = (stackUpdateFunction: (old: string[]) => string[]) => {
+        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current]);
+    };
 
     const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
-        setOpenModalStack(old => {
+        setOpenModalStack((old) => {
             if (isOpen) {
                 return [...old, modalId];
             } else {
@@ -46,8 +46,8 @@ export const useModalContext = (): ModalContextProps => {
     }, []);
 
     const openModalStack = React.useCallback(() => {
-        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined
-    }, [])
+        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined;
+    }, []);
 
     return {
         openModalStack,

package/src/components/Dialog/SimpleDialog.tsx

@@ -30,7 +30,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
      */
-    headerOptions?: null | JSX.Element | JSX.Element[];
+    headerOptions?: null | React.JSX.Element | React.JSX.Element[];
     /**
      * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
      */

package/src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { AlertDialog } from "./../../../../index";
 import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import { Card, Modal } from "./../../../components";
 
 export default {
     title: "Components/Dialog/Modal",

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

package/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx

@@ -43,7 +43,7 @@ export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayout
             gapSize = "none",
             ...otherDivProps
         }: FlexibleLayoutContainerProps,
-        ref
+        ref,
     ) => {
         return (
             <div
@@ -61,7 +61,7 @@ export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayout
                 {children}
             </div>
         );
-    }
+    },
 );
 
 export default FlexibleLayoutContainer;

package/src/components/FlexibleLayout/FlexibleLayoutItem.tsx

@@ -34,7 +34,7 @@ export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemP
             style,
             ...otherDivProps
         }: FlexibleLayoutItemProps,
-        ref
+        ref,
     ) => {
         const sizing = {} as any;
         if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) {
@@ -53,7 +53,7 @@ export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemP
                 {children}
             </div>
         );
-    }
+    },
 );
 
 export default FlexibleLayoutItem;

package/src/components/Form/FieldItem.tsx

@@ -24,7 +24,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.

package/src/components/Form/FieldSet.tsx

@@ -16,17 +16,17 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Optional notification text.
      * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
      */
-    messageText?: string | JSX.Element;
+    messageText?: string | React.JSX.Element;
     /**
      * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
      *
      */
-    title?: string | JSX.Element;
+    title?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, TextField } from "../../../../index";
+import { FieldItem, TextField } from "../../../components";
 
 export default {
     title: "Forms/FieldItem",

package/src/components/Form/Stories/FieldSet.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index";
+import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../components";
 
 import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
 import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories";

package/src/components/Form/form.scss

@@ -71,8 +71,8 @@ form {
 
 .#{$eccgui}-fieldset {
     legend {
-        display: block;
         float: left;
+        display: block;
         width: 100%;
         color: $eccgui-color-applicationheader-text;
     }
@@ -133,9 +133,9 @@ form {
 .#{$eccgui}-fieldset__fielditems {
     &:not(:first-child) {
         &::before {
+            clear: both;
             display: block;
             height: $eccgui-size-block-whitespace;
-            clear: both;
             content: " ";
         }
     }

package/src/components/Grid/Grid.tsx

@@ -4,8 +4,10 @@ import { GridProps as CarbonGridProps } from "@carbon/react/es/components/Grid";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridProps
-    extends Omit<CarbonGridProps<"article" | "section" | "div">, "fullWidth" | "columns" | "narrow" | "as"> {
+export interface GridProps extends Omit<
+    CarbonGridProps<"article" | "section" | "div">,
+    "fullWidth" | "columns" | "narrow" | "as"
+> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

package/src/components/Grid/stories/GridColumn.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index";
+import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Grid/Column",

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Grid, GridColumn, GridRow } from "../../../../index";
+import { Grid, GridColumn, GridRow } from "../../../components";
 
 import { Default as ColumnExample } from "./GridColumn.stories";
 

package/src/components/HoverToggler/HoverToggler.tsx

@@ -10,12 +10,12 @@ export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /**
      * The content that is shown when not hovered.
      */
-    baseContent: JSX.Element;
+    baseContent: React.JSX.Element;
     baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * The content that is shown when hovered.
      */
-    hoverContent: JSX.Element;
+    hoverContent: React.JSX.Element;
     hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * Display as inline element.

package/src/components/Icon/Icon.tsx

@@ -14,7 +14,7 @@ export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
 /** Returns the first icon that exists or the fallback icon. */
 const findExistingIcon = (
     iconName: ValidIconName | string[],
-    fallbackItem: CarbonIconType = canonicalIcons["undefined"]
+    fallbackItem: CarbonIconType = canonicalIcons["undefined"],
 ): CarbonIconType => {
     if (typeof iconName === "string") {
         return canonicalIcons[iconName] ?? fallbackItem;

package/src/components/Icon/IconButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Button, { ButtonProps } from "../Button/Button";
-import {TestableComponent} from "../interfaces";
+import { TestableComponent } from "../interfaces";
 
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
@@ -54,8 +54,8 @@ export const IconButton = ({
         swapPlaceholderDelay: 10,
     };
     const iconProps = {
-        small: restProps.small,
-        large: restProps.large,
+        small: restProps.small || restProps["size"] === "small",
+        large: restProps.large || restProps["size"] === "large",
         tooltipText: tooltipAsTitle ? undefined : text,
         tooltipProps: tooltipProps
             ? {

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,6 +1,7 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
-import { transform} from "./transformIcon";
+
+import { transform } from "./transformIcon";
 
 const canonicalIcons = {
     "application-activities": icons.Activity,
@@ -39,6 +40,7 @@ const canonicalIcons = {
     "artefact-task-sendemail": icons.Email,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
+    "artefact-dataset-inmemory": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
     "artefact-dataset-file": icons.DataVis_1,
     "artefact-dataset": icons.Data_2,
@@ -73,6 +75,8 @@ const canonicalIcons = {
     "data-time": icons.Time,
     "data-datetime": icons.EventSchedule,
     "data-number": icons.StringInteger,
+    "data-sourceschema": icons.PortOutput,
+    "data-targetschema": icons.PortInput,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,
@@ -138,14 +142,16 @@ const canonicalIcons = {
     "navigation-up": icons.ArrowUp,
 
     "operation-aggregation": icons.DataCollection,
+    "operation-ai-generate": icons.AiGenerate,
     "operation-autolayout": icons.ChartNetwork,
     "operation-clear": icons.Close,
     "operation-commit": icons.Commit,
     "operation-comparison": icons.Compare,
     "operation-erase": icons.Erase,
+    "operation-filter": icons.Filter,
     "operation-filteredit": icons.FilterEdit,
     "operation-filterremove": icons.FilterRemove,
-    "operation-filter": icons.Filter,
+    "operation-filterreset": icons.FilterReset,
     "operation-focus": icons.CenterSquare,
     "operation-format-codeblock": icons.CodeBlock,
     "operation-format-text-code": icons.Code,
@@ -212,6 +218,8 @@ const canonicalIcons = {
     "toggler-star-filled": icons.StarFilled,
     "toggler-table": icons.Table,
     "toggler-tree": icons.TreeViewAlt,
+    "toggler-pin-empty": icons.Pin,
+    "toggler-pin-filled": icons.PinFilled,
 
     "form-template": icons.Parameter,
 

package/src/components/Icon/icon.scss

@@ -32,15 +32,15 @@ svg.#{$eccgui}-icon {
 }
 
 .#{$ns}-button .#{$eccgui}-icon:first-child {
-    margin-left: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    margin-left: -($button-icon-spacing);
 }
 .#{$ns}-button .#{$eccgui}-icon:last-child {
-    margin-right: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    margin-right: -($button-icon-spacing);
 }
 
 .#{$ns}-button .#{$eccgui}-icon:first-child:last-child,
 .#{$ns}-button .#{$ns}-spinner + .#{$eccgui}-icon:last-child {
-    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
+    margin: 0 (-($button-icon-spacing));
 }
 
 .#{$eccgui}-button--icon {
@@ -49,7 +49,7 @@ svg.#{$eccgui}-icon {
     }
 
     & > .#{$ns}-button-text {
-        margin-left: -5px;
+        margin-left: -($pt-grid-size) * 0.5;
     }
 
     & > .#{$eccgui}-tooltip__wrapper + .#{$ns}-button-text {

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

@@ -84,7 +84,7 @@ export const IconsOverview = () => {
                         ) {
                             section = iconName.substring(
                                 0,
-                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length,
                             );
                             separation = (
                                 <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>