@eccenca/gui-elements 24.4.1 → 25.0.0-rc.0

package/src/components/Table/table.scss

@@ -21,15 +21,11 @@ $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 $eccgui-color-table-background: $card-background-color !default;
 $eccgui-color-tableheader-background: $button-background-color !default;
-$eccgui-color-tablerow-background-even: color.adjust($menu-item-color-hover, $lightness: 24%) !default;
+$eccgui-color-tablerow-background-even: eccgui-color-mix($menu-item-color-hover, $white 24%) !default;
 $eccgui-color-tablerow-background-odd: transparent !default;
 $eccgui-color-tablerow-hover: $menu-item-color-hover !default;
-$eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
-$eccgui-color-tablerow-selected-hover: color.mix(
-    $eccgui-color-tablerow-selected,
-    $eccgui-color-tablerow-hover,
-    50%
-) !default;
+$eccgui-color-tablerow-selected: eccgui-color-var("identity", "accent", "100") !default;
+$eccgui-color-tablerow-selected-hover: eccgui-color-var("identity", "accent", "200") !default;
 $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // changes
@@ -168,11 +164,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
         &.#{$prefix}--data-table--selected {
             & > th {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        $eccgui-color-tablerow-selected,
-                        $eccgui-color-tableheader-background,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    #{$eccgui-color-tablerow-selected},
+                    #{$eccgui-color-tableheader-background}
+                );
             }
 
             & > td {
@@ -181,11 +176,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
             &:hover {
                 & > th {
-                    --#{$eccgui}-color-cell: #{color.mix(
-                            $eccgui-color-tablerow-selected-hover,
-                            $eccgui-color-tableheader-background,
-                            50%
-                        )};
+                    --#{$eccgui}-color-cell: eccgui-color-mix(
+                        #{$eccgui-color-tablerow-selected-hover},
+                        #{$eccgui-color-tableheader-background}
+                    );
                 }
 
                 & > td {
@@ -219,46 +213,44 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
     &.#{$prefix}--expandable-row--hover {
         & > th,
         & > td {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    $eccgui-color-tablerow-hover,
-                    $eccgui-color-tablerow-background-even,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                #{$eccgui-color-tablerow-hover},
+                #{$eccgui-color-tablerow-background-even}
+            );
         }
     }
 
     &.#{$prefix}--data-table--selected {
         & > th {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    color.mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%),
-                    $eccgui-color-tableheader-background,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                eccgui-color-mix(#{$eccgui-color-tablerow-selected}, #{$eccgui-color-tablerow-background-even}),
+                #{$eccgui-color-tableheader-background}
+            );
         }
 
         & > td {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    $eccgui-color-tablerow-selected,
-                    $eccgui-color-tablerow-background-even,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                #{$eccgui-color-tablerow-selected},
+                #{$eccgui-color-tablerow-background-even}
+            );
         }
 
         &:hover {
             & > th {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        color.mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%),
-                        $eccgui-color-tableheader-background,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    eccgui-color-mix(
+                        #{$eccgui-color-tablerow-selected-hover},
+                        #{$eccgui-color-tablerow-background-even}
+                    ),
+                    #{$eccgui-color-tableheader-background}
+                );
             }
 
             & > td {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        $eccgui-color-tablerow-selected-hover,
-                        $eccgui-color-tablerow-background-even,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    #{$eccgui-color-tablerow-selected-hover},
+                    #{$eccgui-color-tablerow-background-even}
+                );
             }
         }
     }
@@ -360,10 +352,6 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
 }
 
 .#{$prefix}--data-table--sticky-header {
-    thead tr th {
-        // border-bottom-color: $active-ui;
-    }
-
     tr {
         min-height: $eccgui-size-tablecell-height-regular;
     }

package/src/components/Tabs/Tab.tsx

@@ -40,8 +40,9 @@ export const transformTabProperties = ({
         let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch (ex) {
-            console.warn("Received invalid background color for tag: " + backgroundColor);
+        } catch {
+            // eslint-disable-next-line no-console
+            console.warn("Tag received invalid backgroundColor property: " + backgroundColor);
         }
         colorStyles = {
             backgroundColor: `${color.rgb().toString()}`,

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/Tab",
     component: TabDummyForStorybook,
     argTypes: {
         backgroundColor: {

package/src/components/Tabs/stories/TabPanel.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { TabPanel } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabPanel",
     component: TabPanel,
     argTypes: {},
 } as Meta<typeof TabPanel>;

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabTitle",
     component: TabTitleOrg,
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;

package/src/components/Tag/tag.scss

@@ -7,19 +7,21 @@ $eccgui-size-margin-tag: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-color-tag-background-emphasized: $eccgui-color-workspace-text !default;
 
 // lib vars
-$tag-default-color: $eccgui-color-tag-background-emphasized; // !default;
+$tag-default-color: $eccgui-color-tag-background-emphasized;
+
 // $dark-tag-default-color: $gray5 !default;
-$tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight; // !default;
-$tag-line-height: $eccgui-size-typo-tag; // !default;
-$tag-padding-top: ($tag-height - $tag-line-height) * 0.5; // !default;
-$tag-padding: $tag-padding-top * 2; // !default;
-$tag-margin: 0; // !default;
-$tag-height-small: $eccgui-size-typo-tag; // !default;
-$tag-line-height-small: $tag-height-small; // !default;
-$tag-padding-small: $tag-padding-top * 0.5; // !default;
-$tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight; // !default;
-$tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
-$tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
+$tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight;
+$tag-line-height: $eccgui-size-typo-tag;
+$tag-padding-top: ($tag-height - $tag-line-height) * 0.5;
+$tag-padding: $tag-padding-top * 2;
+$tag-margin: 0;
+$tag-height-small: $eccgui-size-typo-tag;
+$tag-line-height-small: $tag-height-small;
+$tag-padding-small: $tag-padding-top * 0.5;
+$tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight;
+$tag-line-height-large: $eccgui-size-typo-tag-large;
+$tag-padding-large: ($tag-height-large - $tag-line-height-large);
+
 // $tag-icon-spacing: ($tag-height - 12px) * 0.5 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
 $tag-round-adjustment: 0 !default;
@@ -139,109 +141,128 @@ $tag-round-adjustment: 0 !default;
     border-width: 1px;
 
     &:not([class*="#{$ns}-intent-"]) {
+        --eccgui-tag-bg: #{$tag-default-color};
+        --eccgui-tag-border: #{$tag-default-color};
+        --eccgui-tag-text: #{eccgui-color-var("identity", "text", "100")};
+        --eccgui-tag-emfactor: 100%;
+
+        color: var(--eccgui-tag-text);
+        background-color: eccgui-color-mix(
+            var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
+            eccgui-color-var("identity", "background", "100")
+        );
+        border-color: var(--eccgui-tag-border);
+
         &.#{$eccgui}-tag--strongeremphasis {
-            background-color: rgba($tag-default-color, 1);
-            border-color: rgba($tag-default-color, 1);
+            --eccgui-tag-emfactor: 95%;
         }
         &.#{$eccgui}-tag--strongemphasis {
-            background-color: rgba($tag-default-color, 0.875);
-            border-color: rgba($tag-default-color, 0.875);
+            --eccgui-tag-emfactor: 90%;
         }
         &.#{$eccgui}-tag--normalemphasis {
-            background-color: rgba($tag-default-color, 0.75);
-            border-color: rgba($tag-default-color, 0.75);
+            --eccgui-tag-emfactor: 85%;
         }
         &.#{$eccgui}-tag--weakemphasis {
-            background-color: rgba($tag-default-color, 0.625);
-            border-color: rgba($tag-default-color, 0.625);
+            --eccgui-tag-emfactor: 80%;
         }
         &.#{$eccgui}-tag--weakeremphasis {
-            background-color: rgba($tag-default-color, 0.5);
-            border-color: rgba($tag-default-color, 0.5);
+            --eccgui-tag-emfactor: 75%;
         }
 
         &.#{$eccgui}-intent--primary {
-            color: $eccgui-color-primary-contrast;
-            background-color: $eccgui-color-primary;
-            border-color: $eccgui-color-primary;
+            --eccgui-tag-bg: #{$eccgui-color-primary};
+            --eccgui-tag-border: #{$eccgui-color-primary};
+            --eccgui-tag-text: #{$eccgui-color-primary-contrast};
         }
         &.#{$eccgui}-intent--accent {
-            color: $eccgui-color-accent-contrast;
-            background-color: $eccgui-color-accent;
-            border-color: $eccgui-color-accent;
+            --eccgui-tag-bg: #{$eccgui-color-accent};
+            --eccgui-tag-border: #{$eccgui-color-accent};
+            --eccgui-tag-text: #{$eccgui-color-accent-contrast};
         }
         &.#{$eccgui}-intent--info {
-            color: $eccgui-color-info-background;
-            background-color: $eccgui-color-info-text;
-            border-color: $eccgui-color-info-text;
+            --eccgui-tag-bg: #{$eccgui-color-info-text};
+            --eccgui-tag-border: #{$eccgui-color-info-text};
+            --eccgui-tag-text: #{$eccgui-color-info-background};
         }
         &.#{$eccgui}-intent--success {
-            color: $eccgui-color-success-background;
-            background-color: $eccgui-color-success-text;
-            border-color: $eccgui-color-success-text;
+            --eccgui-tag-bg: #{$eccgui-color-success-text};
+            --eccgui-tag-border: #{$eccgui-color-success-text};
+            --eccgui-tag-text: #{$eccgui-color-success-background};
         }
         &.#{$eccgui}-intent--warning {
-            color: $eccgui-color-warning-background;
-            background-color: $eccgui-color-warning-text;
-            border-color: $eccgui-color-warning-text;
+            --eccgui-tag-bg: #{$eccgui-color-warning-text};
+            --eccgui-tag-border: #{$eccgui-color-warning-text};
+            --eccgui-tag-text: #{$eccgui-color-warning-background};
         }
         &.#{$eccgui}-intent--danger {
-            color: $eccgui-color-danger-background;
-            background-color: $eccgui-color-danger-text;
-            border-color: $eccgui-color-danger-text;
+            --eccgui-tag-bg: #{$eccgui-color-danger-text};
+            --eccgui-tag-border: #{$eccgui-color-danger-text};
+            --eccgui-tag-text: #{$eccgui-color-danger-background};
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
+            --eccgui-tag-bg: #{eccgui-color-var("identity", "background", "500")};
+            --eccgui-tag-border: #{$tag-default-color};
+            --eccgui-tag-text: #{$tag-default-color};
+
+            color: var(--eccgui-tag-text);
+            background-color: eccgui-color-mix(
+                var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
+                eccgui-color-var("identity", "background", "100")
+            );
+            border-color: var(--eccgui-tag-border);
+
             &.#{$eccgui}-tag--strongeremphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.3), #fff), 1);
-                border-color: rgba($tag-default-color, 0.3);
+                --eccgui-tag-emfactor: 100%;
             }
             &.#{$eccgui}-tag--strongemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-                border-color: rgba($tag-default-color, 0.225);
+                --eccgui-tag-emfactor: 90%;
             }
             &.#{$eccgui}-tag--normalemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.15), #fff), 0.75);
-                border-color: rgba($tag-default-color, 0.15);
+                --eccgui-tag-emfactor: 80%;
             }
             &.#{$eccgui}-tag--weakemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-                border-color: rgba($tag-default-color, 0.075);
+                --eccgui-tag-emfactor: 70%;
             }
             &.#{$eccgui}-tag--weakeremphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0), #fff), 0.5);
-                border-color: rgba($tag-default-color, 0.15);
+                --eccgui-tag-emfactor: 60%;
+            }
+
+            &[class*="#{$eccgui}-intent--"] {
+                color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
             }
+
             &.#{$eccgui}-intent--primary {
-                color: $eccgui-color-primary;
-                background-color: $eccgui-color-primary-contrast;
-                border-color: $eccgui-color-primary;
+                --eccgui-tag-text: #{$eccgui-color-primary};
+                --eccgui-tag-border: #{$eccgui-color-primary};
+                --eccgui-tag-bg: #{$eccgui-color-primary-contrast};
             }
             &.#{$eccgui}-intent--accent {
-                color: $eccgui-color-accent;
-                background-color: $eccgui-color-accent-contrast;
-                border-color: $eccgui-color-accent;
+                --eccgui-tag-text: #{$eccgui-color-accent};
+                --eccgui-tag-border: #{$eccgui-color-accent};
+                --eccgui-tag-bg: #{$eccgui-color-accent-contrast};
             }
             &.#{$eccgui}-intent--info {
-                color: $eccgui-color-info-text;
-                background-color: $eccgui-color-info-background;
-                border-color: $eccgui-color-info-text;
+                --eccgui-tag-text: #{$eccgui-color-info-text};
+                --eccgui-tag-border: #{$eccgui-color-info-text};
+                --eccgui-tag-bg: #{$eccgui-color-info-background};
             }
             &.#{$eccgui}-intent--success {
-                color: $eccgui-color-success-text;
-                background-color: $eccgui-color-success-background;
-                border-color: $eccgui-color-success-text;
+                --eccgui-tag-text: #{$eccgui-color-success-text};
+                --eccgui-tag-border: #{$eccgui-color-success-text};
+                --eccgui-tag-bg: #{$eccgui-color-success-background};
             }
             &.#{$eccgui}-intent--warning {
-                color: $eccgui-color-warning-text;
-                background-color: $eccgui-color-warning-background;
-                border-color: $eccgui-color-warning-text;
+                --eccgui-tag-text: #{$eccgui-color-warning-text};
+                --eccgui-tag-border: #{$eccgui-color-warning-text};
+                --eccgui-tag-bg: #{$eccgui-color-warning-background};
             }
             &.#{$eccgui}-intent--danger {
-                color: $eccgui-color-danger-text;
-                background-color: $eccgui-color-danger-background;
-                border-color: $eccgui-color-danger-text;
+                --eccgui-tag-text: #{$eccgui-color-danger-text};
+                --eccgui-tag-border: #{$eccgui-color-danger-text};
+                --eccgui-tag-bg: #{$eccgui-color-danger-background};
             }
         }
     }

package/src/components/TextField/SearchField.tsx

@@ -7,12 +7,7 @@ import IconButton from "../Icon/IconButton";
 
 import TextField, { TextFieldProps } from "./TextField";
 
-export interface SearchFieldProps
-    extends TestableComponent,
-        Omit<
-            TextFieldProps,
-            "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
-        > {
+export interface SearchFieldProps extends TestableComponent, Omit<TextFieldProps, "placeholder" | "fullWidth"> {
     /**
      * Placeholder text for search box.
      */

package/src/components/TextField/TextArea.tsx

@@ -91,7 +91,7 @@ export const TextArea = ({
                             leftIconElementRect.width ?? 0
                         }px)`
                     );
-                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                    leftIconElement.addEventListener("click", () => {
                         textAreaElement.focus();
                     });
                 }
@@ -157,7 +157,7 @@ export const TextArea = ({
             rows={
                 rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
                     ? rows
-                    : 1
+                    : 2
             }
             {...otherBlueprintTextAreaProps}
             dir={"auto"}

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

@@ -15,10 +15,6 @@ export default {
         rightElement: {
             ...helpersArgTypes.exampleIcon,
         },
-        hasStatePrimary: { table: { disable: true } },
-        hasStateSuccess: { table: { disable: true } },
-        hasStateWarning: { table: { disable: true } },
-        hasStateDanger: { table: { disable: true } },
         fullWidth: { table: { disable: true } },
     },
 } as Meta<typeof SearchField>;

package/src/components/TextField/textfield.scss

@@ -9,8 +9,9 @@ $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $ec
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
-$eccgui-color-textfield-text: $eccgui-color-application-text !default;
-$eccgui-color-textfield-background: white !default; // TODO define global var for it
+$eccgui-color-textfield-text: $eccgui-color-workspace-text !default;
+$eccgui-color-textfield-background: eccgui-color-var("identity", "background", 100) !default;
+
 // lib vars
 $pt-input-height: $eccgui-size-textfield-height-regular; // !default;
 $pt-input-height-large: $eccgui-size-textfield-height-large; // !default;
@@ -20,8 +21,8 @@ $input-small-padding: $eccgui-size-textfield-padding-horizontal-small; // !defau
 $input-font-weight: $eccgui-typo-textfield-fontweight; // !default;
 // $input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
 $input-color: $eccgui-color-textfield-text; // !default;
-$input-color-disabled: rgba($eccgui-color-textfield-text, 0.39); // !default;
-$input-placeholder-color: rgba($eccgui-color-textfield-text, 0.61); // !default;
+$input-color-disabled: eccgui-color-rgba($eccgui-color-textfield-text, 0.39); // !default;
+$input-placeholder-color: eccgui-color-rgba($eccgui-color-textfield-text, 0.61); // !default;
 $input-background-color: $eccgui-color-textfield-background; // !default;
 // $input-background-color-disabled: rgba($light-gray1, 0.5) !default;
 // $input-shadow-color-focus: $pt-intent-primary !default;
@@ -84,15 +85,15 @@ $eccgui-map-intent-bgcolors: (
 @mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
 
         39% {
-            background-color: $bgcolor;
+            background-color: eccgui-color-var("semantic", $state, "300");
         }
 
         100% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
     }
 }
@@ -109,7 +110,7 @@ $eccgui-map-intent-bgcolors: (
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
-            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            background-color: eccgui-color-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -149,7 +150,7 @@ $eccgui-map-intent-bgcolors: (
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         &.#{$eccgui}-intent--#{$each-intent} {
-            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            background-color: eccgui-color-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -191,33 +192,40 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     left: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
 }
 
 .#{$eccgui}-textarea__options {
     position: absolute;
     top: 0;
     right: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    text-align: right;
     filter: grayscale(1);
 
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
+
     &:hover,
     .#{$eccgui}-textarea:focus ~ & {
         filter: none;
     }
 
-    & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-        }
-    }
-
-    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
-        }
+    & > .#{$eccgui}-button,
+    & > .#{$eccgui}-icon,
+    & > .#{$eccgui}-contextoverlay,
+    & > .#{$eccgui}-tooltip__wrapper {
+        display: inline-block;
+        vertical-align: middle;
     }
 }
 

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+
+export default {
+    title: "Components/TextReducer",
+    component: TextReducer,
+    argTypes: {},
+} as Meta<typeof TextReducer>;
+
+const TemplateFull: StoryFn<typeof TextReducer> = (args) => <TextReducer {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: [
+        <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+        "Simple text with URL http://example.com/ that should not get parsed.",
+        "a < b to test equations in text like b > a.",
+        <>
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
+            <HtmlContentBlock>
+                <h1>Block with sub elements</h1>
+                <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />
+            </HtmlContentBlock>
+        </>,
+    ],
+};
+
+export const UseMaximumContraints = TemplateFull.bind({});
+UseMaximumContraints.args = {
+    ...Default.args,
+    maxNodes: 3,
+    maxLength: 130,
+};
+
+export const WithOverflowText = TemplateFull.bind({});
+WithOverflowText.args = {
+    ...Default.args,
+    useOverflowTextWrapper: true,
+    overflowTextProps: {
+        className: "my-extra-class",
+        "data-test-id": "my-test-id",
+        ellipsis: "reverse",
+    },
+};