@eccenca/gui-elements 23.1.0-easynav.3 → 23.1.0-easynav.4

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -91,7 +91,7 @@ export interface IActivityAction extends TestableComponent {
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
-    icon: ValidIconName
+    icon: ValidIconName | React.ReactElement<TestIconProps>
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
@@ -167,10 +167,10 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&
-                    activityActions.map((action) => {
+                    activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={action.icon}
+                                key={typeof action.icon === "string" ? action.icon : action["data-test-id"] ?? idx}
                                 data-test-id={action["data-test-id"]}
                                 name={action.icon}
                                 text={action.tooltip}
@@ -189,11 +189,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                         data-test-id={activityContextMenu["data-test-id"]}
                         togglerText={activityContextMenu.tooltip}
                     >
-                        {activityContextMenu.menuItems.map((menuAction) => {
+                        {activityContextMenu.menuItems.map((menuAction, idx) => {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={menuAction.icon}
+                                    key={typeof menuAction.icon === "string" ? menuAction.icon : menuAction["data-test-id"] ?? idx}
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -1,12 +1,12 @@
-import { TestableComponent } from "../../components/interfaces";
-import { ActivityControlWidget, IActivityAction } from "./ActivityControlWidget";
-import React, { useEffect, useState } from "react";
+import {TestableComponent} from "../../components/interfaces";
+import {ActivityControlWidget, IActivityAction} from "./ActivityControlWidget";
+import React, {useEffect, useRef, useState} from "react";
 import {ConcreteActivityStatus, IActivityStatus} from "./ActivityControlTypes";
-import { Intent } from "@blueprintjs/core/src/common/intent";
-import { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
-import { Icon, Spacing } from "../../";
-import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
-import { IntentTypes } from "../../common/Intent";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
+import {Icon, Spacing} from "../../";
+import {ElapsedDateTimeDisplay, TimeUnits} from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+import {IntentTypes} from "../../common/Intent";
 
 const progressBreakpointIndetermination = 10;
 const progressBreakpointAnimation = 99;
@@ -41,6 +41,10 @@ interface SilkActivityControlProps extends TestableComponent {
     };
     // DI activity actions
     executeActivityAction: (action: ActivityAction) => void;
+    /** If specified, the activity control will offer a "Start prioritized" button while the activity is in the waiting state.
+     * When the button is clicked it should start the activity via the startPrioritized endpoint.
+     */
+    executePrioritized?: () => void;
     // Get the translation for a specific key
     translate: (key: ActivityControlTranslationKeys) => string;
     // When defined the elapsed time since the last start is displayed next to the label
@@ -127,7 +131,7 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
-export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport";
+export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized";
 
 export type ActivityAction = "start" | "cancel" | "restart";
 
@@ -153,14 +157,28 @@ export function useSilkActivityControl({
     tags,
     layoutConfig = defaultLayout,
     hideMessageOnStatus = () => false,
+    executePrioritized,
     ...props
 }: SilkActivityControlProps) {
     const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus);
+    const currentStatus = useRef<IActivityStatus | undefined>(initialStatus)
+    const [showStartPrioritized, setShowStartPrioritized] = useState(false)
     const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined);
 
     // Register update function
     useEffect(() => {
-        const updateActivityStatus = (status: any) => {
+        const updateActivityStatus = (status: IActivityStatus | undefined) => {
+            if(status?.concreteStatus !== "Waiting") {
+                setShowStartPrioritized(false)
+            } else if(executePrioritized) {
+                // Show start prioritized button only-if the activity is still in Waiting status after 2s
+                setTimeout(() => {
+                    if(currentStatus.current?.concreteStatus === "Waiting") {
+                        setShowStartPrioritized(true)
+                    }
+                }, 2000)
+            }
+            currentStatus.current = status
             setActivityStatus(status)
         }
         registerForUpdates(updateActivityStatus)
@@ -184,13 +202,22 @@ export function useSilkActivityControl({
     }
 
     if (showStartAction) {
-        actions.push({
-            "data-test-id": "activity-start-activity",
-            icon: "item-start",
-            action: () => executeActivityAction("start"),
-            tooltip: translate("startActivity"),
-            disabled: activityStatus?.isRunning === true,
-        });
+        if(showStartPrioritized && executePrioritized) {
+            actions.push({
+                "data-test-id": "activity-start-prioritized-activity",
+                icon: "item-skip-forward",
+                action: executePrioritized,
+                tooltip: translate("startPrioritized"),
+            })
+        } else {
+            actions.push({
+                "data-test-id": "activity-start-activity",
+                icon: "item-start",
+                action: () => executeActivityAction("start"),
+                tooltip: translate("startActivity"),
+                disabled: activityStatus?.isRunning === true,
+            });
+        }
     }
 
     if (showReloadAction) {

package/src/cmem/ConfidenceValue/ConfidenceValue.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ConfidenceValue } from "../../../index";
+
+export default {
+    title: "cmem/ConfidenceValue",
+    component: ConfidenceValue,
+    argTypes: {
+        barColor: {
+            control: "color",
+        },
+    }
+
+} as ComponentMeta<typeof ConfidenceValue>;
+
+const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => (
+    <ConfidenceValue {...args} />
+);
+export const Default = TemplateIcons.bind({});
+Default.args = {
+    value: "0.5"
+};

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import Color from "color";
+import { Tag, TagProps } from "./../../components/Tag";
+import { ProgressBar, ProgressBarProps } from "./../../components/ProgressBar";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Confidence value.
+     */
+    value: number;
+    /**
+     * Minimal border for the confidence range.
+     */
+    minValue?: number;
+    /**
+     * Center (or average) value of the confidence range.
+     */
+    centerValue?: number;
+    /**
+     * Maximum border for the confidence range.
+     */
+    maxValue?: number;
+    /**
+     * Color of the confidence bar.
+     * By default it is colorized red for values below the `centerValue`, otherwise green.
+     */
+    barColor?: Color | string;
+    /**
+     * The value is displayed by a bar.
+     * This confidence bar can be start from the left or right side, or from the center of the element.
+     */
+    barStart?: "side" | "center";
+    /**
+     * What width is used to display the lement.
+     * It could use the `minimal` necessary space, the `maximal` available space, or a `static` width.
+     */
+    spaceUsage?: "minimal" | "static" | "maximal";
+    /**
+     * Additional properties for the `<Tag/>` element that is used to display the confidence value.
+     */
+    tagProps?: Omit<TagProps, "className">;
+    /**
+     * Additional properties for the `<PRogressBar/>` element that is used to display the confidence bar.
+     */
+    progressBarProps?: Omit<ProgressBarProps, "className">;
+}
+
+const toPercent = (n: number) => {
+    let formatted = (n * 100).toFixed(2)
+    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "")
+    return `${maybeRemovedFraction}%`
+}
+
+export function ConfidenceValue ({
+    className,
+    value,
+    minValue = -1,
+    maxValue = 1,
+    centerValue = 0,
+    barColor,
+    barStart = "side",
+    spaceUsage = "static",
+    tagProps,
+    progressBarProps,
+    ...otherProps
+}: ConfidenceValueProps) {
+
+    const barValue = (
+        value === centerValue ? 0 :
+        value < centerValue ? value / (minValue - centerValue) :
+        value / (maxValue - centerValue)
+    );
+
+    let color = Color("#000000");
+    if (!!barColor) {
+        try {
+            color = Color(barColor);
+        } catch(ex) {
+            console.warn("Received invalid color for confidence bar: " + barColor)
+        }
+    }
+
+    return (
+        <span
+            className={
+                `${eccgui}-confidencevalue` +
+                ` ${eccgui}-confidencevalue--${barStart}` +
+                ` ${eccgui}-confidencevalue--${spaceUsage}space` +
+                (value < centerValue ? ` ${eccgui}-confidencevalue--negative` : ` ${eccgui}-confidencevalue--positive`) +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            <Tag
+                className={`${eccgui}-confidencevalue__value`}
+                {...tagProps}
+            >
+                {toPercent(value)}
+            </Tag>
+            <div
+                className={`${eccgui}-confidencevalue__bar-colorwrapper`}
+                style={!!barColor ? { color: color.rgb().toString() } : {}}
+            >
+                <ProgressBar
+                    className={`${eccgui}-confidencevalue__bar`}
+                    value={barValue}
+                    intent={!!barColor ? undefined : value < centerValue ? "danger" : "success"}
+                    stripes={false}
+                    animate={false}
+                    {...progressBarProps}
+                />
+            </div>
+        </span>
+    );
+}

package/src/cmem/ConfidenceValue/confidencevalue.scss

@@ -0,0 +1,49 @@
+.#{$eccgui}-confidencevalue {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+}
+
+.#{$eccgui}-confidencevalue--minimalspace {
+    width: auto;
+    min-width: 0;
+}
+
+.#{$eccgui}-confidencevalue--maximalspace {
+    width: auto;
+    min-width: 100%;
+}
+
+.#{$eccgui}-confidencevalue__value {
+    width: 100%;
+    text-align: center;
+}
+
+.#{$eccgui}-confidencevalue__bar {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    background-color: transparent;
+
+    .#{$eccgui}-confidencevalue--center & {
+        left: 50%;
+        width: 50%;
+    }
+
+    .#{$eccgui}-confidencevalue--negative & {
+        transform: rotate(180deg);
+    }
+
+    .#{$eccgui}-confidencevalue--center.#{$eccgui}-confidencevalue--negative & {
+        left: 0;
+        right: 50%;
+    }
+}
+
+.#{$eccgui}-confidencevalue__bar-colorwrapper {
+    & .#{$ns}-progress-meter {
+        background-color: currentColor;
+    }
+}

package/src/cmem/ConfidenceValue/index.ts

@@ -0,0 +1 @@
+export * from "./ConfidenceValue";

package/src/cmem/_index.scss

@@ -1,4 +1,5 @@
 @import "./ActivityControl/activitycontrol";
+@import "./ConfidenceValue/confidencevalue";
 @import "./markdown/markdown";
 @import "./react-flow";
 

package/src/cmem/index.ts

@@ -21,3 +21,5 @@ export type {
     IActivityControlLayoutProps,
     TimeUnits,
 }
+
+export * from "./ConfidenceValue";

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -49,22 +49,21 @@ const SingleLineCodeEditor = ({
                                   placeholder,
                                   showScrollBar = true
                               }: IEditorProps) => {
+    const singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "))
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <UnControlledEditor
         editorDidMount={(editor: any) => {
           editor.on("beforeChange", (_: any, change: any) => {
             // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-            const newText = change.text.join("").replace(/\n/g, "");
-            //failing unexpectedly during undo and redo
-            if (change.update && typeof change.update === "function") {
-              change.update(change.from, change.to, [newText]);
+            if (change.update && typeof change.update === "function" && change.text.length > 1) {
+              change.update(change.from, change.to, [change.text.join("")]);
             }
             return true;
           });
           setEditorInstance(editor);
         }}
-        value={initialValue}
+        value={singleLineInitialContent.current}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         options={{
@@ -89,11 +88,10 @@ const SingleLineCodeEditor = ({
               editor.getScrollInfo()
           );
         }}
-        onBeforeChange={(_editor, _data, value, next) => {
-            // Remove entered new lines
-            const trimmedValue = value.replace(/[\r\n]/g, "");
-            if (trimmedValue !== value) {
-                _editor.setValue(trimmedValue)
+        onBeforeChange={(_editor, data, _, next) => {
+            // Reduce multiple lines to a single line
+            if (data.text.length > 1) {
+                _editor.setValue(data.text.join(""))
             }
             next()
         }}

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -53,4 +53,9 @@ describe("SingleLineCodeEditor", () => {
             .setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
+
+    it("should convert multiple lines to a single line", () => {
+        render(<SingleLineEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+    });
 });

package/src/components/Badge/badge.scss

@@ -14,11 +14,8 @@
 }
 
 .#{$eccgui}-badge--inline {
-    display: inline-block;
-
-    &.#{$eccgui}-badge--icon {
-        vertical-align: middle;
-    }
+    display: inline-flex;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-badge--bottom-right {

package/src/components/Card/Card.tsx

@@ -24,6 +24,10 @@ export interface CardProps extends BlueprintCardProps {
      * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
      */
     scrollinOnFocus?: "start" | "center" | "end";
+    /**
+     * Controls how much whitespace is displayed within the card subelements.
+     */
+    whitespaceAmount?: "none" | "small" | "medium" | "large";
 }
 
 /**
@@ -38,6 +42,7 @@ function Card({
     fullHeight=false,
     elevated=false,
     scrollinOnFocus,
+    whitespaceAmount="medium",
     interactive,
     ...otherProps
 }: CardProps) {
@@ -55,11 +60,12 @@ function Card({
     const cardElement = (
         <BlueprintCard
             className={
-                `${eccgui}-card ` +
-                (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
-                (elevated ? ` ${eccgui}-card--elevated ` : '') +
-                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus ` : '') +
-                className
+                `${eccgui}-card` +
+                (fullHeight ? ` ${eccgui}-card--fullheight` : '') +
+                (elevated ? ` ${eccgui}-card--elevated` : '') +
+                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : '') +
+                (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : '') +
+                (!!className ? ` ${className}` : "")
             }
             elevation={elevation}
             interactive={!!otherProps.onClick ? true : interactive}

package/src/components/Card/CardContent.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Usually `CardContent` remains the available space inside a card.
+     * This option changes that behaviour, so that the content section is not grown or shrinked.
+     * You may use this then you have multiple content section in one card but not all those sections should be grown or shrinked regarding the remaining space.
+     */
+    noFlexHeight?: boolean;
 }
 
 /**
@@ -11,12 +17,17 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 function CardContent({
     children,
     className='',
+    noFlexHeight,
     ...otherProps
 }: CardContentProps) {
     return (
         <div
             {...otherProps}
-            className={`${eccgui}-card__content ` + className}
+            className={
+                `${eccgui}-card__content` +
+                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
+                (!!className ? ` ${className}` : "")
+            }
         >
             {children}
         </div>

package/src/components/Card/CardHeader.tsx

@@ -5,8 +5,16 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import CardTitle from "./CardTitle";
 import CardOptions from "./CardOptions";
 
-interface CardHeaderProps extends OverviewItemProps {
+interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    /**
+     * @deprecated
+     */
+    densityHigh?: OverviewItemProps["densityHigh"];
+    /**
+     * @deprecated
+     */
+    hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
 function CardHeader({

package/src/components/Card/card.scss

@@ -53,6 +53,18 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
+
+    .#{$eccgui}-card--whitespace-none > header > & {
+        padding: 0
+    }
+
+    .#{$eccgui}-card--whitespace-small > header > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > header > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing * 2;
+    }
 }
 
 .#{$eccgui}-card__title {
@@ -82,28 +94,102 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 }
 
+.#{$eccgui}-card__options {
+    flex-shrink: 1;
+    max-width: calc(100% - #{$eccgui-size-card-spacing * 1.5});
+
+    & > .#{$eccgui}-button:not(.#{$eccgui}-button--icon) {
+        flex-shrink: 1;
+
+        .#{$ns}-button-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
 .#{$eccgui}-card__content {
     padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2;
+    }
+
     .#{$eccgui}-separation__divider-horizontal + &,
     &:first-child {
         padding-top: $eccgui-size-card-spacing;
+
+        .#{$eccgui}-card--whitespace-none > & {
+            padding-top: 0;
+        }
+
+        .#{$eccgui}-card--whitespace-small > & {
+            padding-top: $eccgui-size-card-spacing * 0.5;
+        }
+
+        .#{$eccgui}-card--whitespace-large > & {
+            padding-top: $eccgui-size-card-spacing * 2;
+        }
     }
 }
 
+.#{$eccgui}-card__content--noflexheight {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing * 0.25;
+    padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.125 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing * 0.75 $eccgui-size-card-spacing * 2;
+    }
+
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -131,9 +217,28 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-flow: row wrap;
     justify-content: flex-end;
     align-items: center;
+    margin: 0;
 
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

package/src/components/Checkbox/checkbox.scss

@@ -28,6 +28,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
 .#{$ns}-control {
+    max-width: 100%;
+
     &.#{$ns}-checkbox {
         input ~ .#{$ns}-control-indicator,
         input:checked ~ .#{$ns}-control-indicator,
@@ -64,6 +66,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
     }
 }
 
-.#{$ns}-control-indicator + * {
-    margin-top: -1 * $eccgui-size-typo-text * $eccgui-size-typo-text-lineheight;
+.#{$ns}-control-indicator + *,
+.#{$ns}-control-indicator + .#{$eccgui}-typography__overflowtext {
+    display: inline-block;
+    vertical-align: text-top;
 }