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

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -3,11 +3,6 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
-    /**
-     * Displays the element using reduced height and less white space inside.
-     * @deprecated (v25) use property directly on `OverviewItem` children.
-     */
-    densityHigh?: boolean;
     /**
      * Add a bit white space around each of the contained items.
      */
@@ -30,7 +25,6 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 export const OverviewItemList = ({
     children,
     className = "",
-    densityHigh = false,
     hasDivider = false,
     hasSpacing = false,
     columns = 1,
@@ -41,7 +35,6 @@ export const OverviewItemList = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__list ` +
-                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : "") +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : "") +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : "") +
                 (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2

package/src/components/OverviewItem/overviewitem.scss

@@ -76,16 +76,14 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 }
 
-.#{$eccgui}-overviewitem__item--highdensity,
-.#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
+.#{$eccgui}-overviewitem__item--highdensity {
     // same fix for Firefox v132+ like for the normal element height
-    // height: $button-height; // mini-units(4);
     min-height: $button-height;
     max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
-        width: $button-height; // mini-units(4);
-        height: $button-height; // mini-units(4);
+        width: $button-height;
+        height: $button-height;
     }
 }
 
@@ -93,8 +91,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     box-sizing: content-box;
     padding: $eccgui-size-overviewitem-spacing * 0.5;
 
-    &.#{$eccgui}-overviewitem__item--highdensity,
-    .#{$eccgui}-overviewitem__list--highdensity > li > & {
+    &.#{$eccgui}-overviewitem__item--highdensity {
         box-sizing: border-box;
 
         & > .#{$eccgui}-overviewitem__depiction {
@@ -136,9 +133,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__description {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    flex-direction: column;
     place-content: stretch flex-start;
     align-items: stretch;
     overflow: hidden;
@@ -175,9 +172,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__actions {
     display: flex;
-    flex-flow: row nowrap;
     flex-grow: 0;
     flex-shrink: 0;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
 
@@ -200,3 +197,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
         display: flex;
     }
 }
+
+@media print {
+    .#{$eccgui}-overviewitem__actions {
+        display: none;
+    }
+    .#{$eccgui}-overviewitem__depiction {
+        print-color-adjust: exact;
+    }
+}

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -24,7 +24,6 @@ export const ItemList = Template.bind({});
 ItemList.args = {
     hasSpacing: true,
     hasDivider: true,
-    densityHigh: false,
     columns: 1,
     children: Array(4).fill(<OverviewItem {...ItemExample.args} />),
 };

package/src/components/Pagination/pagination.scss

@@ -51,7 +51,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$prefix}--pagination__button--no-index {
     // TODO: revalidate if this is still necessary using the latest version of carbon lib
-    color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
+    color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
 }
 
 .#{$eccgui}-pagination--hideinfotext {

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -1,11 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
+    },
 } as Meta<typeof ProgressBar>;
 
 const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -5,9 +5,9 @@
 }
 
 .#{$eccgui}-propertyvalue__pair {
+    clear: both;
     display: block;
     width: 100%;
-    clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
         &:not(:last-child) {
@@ -94,3 +94,25 @@
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-propertyvalue__pair,
+    .#{$eccgui}-propertyvalue__property,
+    .#{$eccgui}-propertyvalue__value {
+        position: relative;
+        float: none !important;
+        display: block;
+        width: auto;
+        height: auto;
+        min-height: 0 !important;
+        padding: 0;
+        margin: 0 !important;
+
+        &:is(.#{$eccgui}-propertyvalue__property) {
+            margin-bottom: 0.25 * $eccgui-size-block-whitespace !important;
+        }
+        &:is(.#{$eccgui}-propertyvalue__pair) {
+            margin-bottom: 0.5 * $eccgui-size-block-whitespace !important;
+        }
+    }
+}

package/src/components/Select/Select.stories.tsx

@@ -53,7 +53,7 @@ export const ControlledTarget = Template.bind({});
 ControlledTarget.args = {
     ...Default.args,
     fill: false,
-    children: <Button text="Controlled select target" intent="primary" />,
+    children: <Button text="Controlled select target" elevated />,
     onActiveItemChange: fn(),
 };
 

package/src/components/Separation/separation.scss

@@ -101,3 +101,9 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
         margin: 0 $eccgui-size-separation-spacing-medium;
     }
 }
+
+@media print {
+    .#{$eccgui}-separation__divider-horizontal {
+        print-color-adjust: exact;
+    }
+}

package/src/components/Spinner/Spinner.tsx

@@ -1,29 +1,38 @@
 import React, { useEffect, useState } from "react";
 import {
-    Overlay as BlueprintOverlay,
+    Overlay2 as BlueprintOverlay,
     OverlayProps as BlueprintOverlayProps,
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
+import Color from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ButtonProps } from "./../Button/Button";
+
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger" | "none";
 
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
+    /**
+     * Must be a valid css color definition.
+     * `intent` property will always overwrite this setting.
+     */
+    color?: Color | string | "inherit";
     /**
-     * intent value or a valid css color definition
-     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
+     * Intent state of the spinner.
+     * When used the spinner is colored.
+     * Property overwrites `elevated` setting.
      */
-    color?: Intent | string;
+    intent?: ButtonProps["intent"];
     /**
-     * Intent state of the field item.
+     * Highlight the spinner.
+     * It is displayed with accent color intent.
      */
-    intent?: Intent;
+    elevated?: boolean;
     /**
      * Additional CSS class names.
      */
@@ -60,26 +69,19 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      * Use this property to alter the display of the backdrop used for the global spinner
      */
     overlayProps?: BlueprintOverlayProps;
-    /**
-     * Label displayed next to the spinner (planned).
-     * You can set it to document the purpose of the spinner.
-     * It is currently not supported and not displayed.
-     */
-    description?: string;
 }
 
 export const Spinner = ({
     className = "",
     color = "inherit",
     intent,
+    elevated,
     position = "local",
     size,
     stroke,
     showLocalBackdrop = false,
     delay = 0,
     overlayProps,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
 }: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
@@ -90,7 +92,7 @@ export const Spinner = ({
         }
         return;
     }, [showSpinner, delay]);
-    const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
+
     const internSizes = {
         thin: 100,
         medium: 50,
@@ -99,9 +101,6 @@ export const Spinner = ({
 
     const spinnerElement = position === "inline" ? "span" : "div";
 
-    const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
-    const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
-
     let spinnerSize;
     let spinnerStroke;
     switch (position) {
@@ -129,7 +128,8 @@ export const Spinner = ({
             className={
                 `${eccgui}-spinner` +
                 ` ${eccgui}-spinner--position-${position}` +
-                ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+                (elevated ? ` ${eccgui}-spinner--intent-accent` : "") +
+                (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
                 (className ? " " + className : "")
@@ -138,8 +138,15 @@ export const Spinner = ({
         />
     );
 
-    if (spinnerColor && spinnerIntent === "usercolor") {
-        spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+    if (!intent) {
+        try {
+            const spinnerColor = color === "inherit" ? color : Color(color).rgb().toString();
+            spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+        } catch {
+            spinner = <span style={{ color: "inherit" }}>{spinner}</span>;
+            // eslint-disable-next-line no-console
+            console.warn("Spinner received invalid color property: " + color);
+        }
     }
 
     return position === "global" ? (

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -10,7 +10,7 @@ export default {
         color: { control: "color" },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger", "none"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger", "none"],
         },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },

package/src/components/Spinner/spinner.scss

@@ -15,12 +15,13 @@ $eccgui-size-spinner-xlarge: 256px !default;
         stroke: currentcolor;
     }
     .#{$ns}-spinner-track {
-        stroke: rgba(#000, 0.1);
+        stroke: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-ghostly);
     }
 }
 
 span.#{$eccgui}-spinner {
     display: inline-flex;
+    height: auto;
     vertical-align: text-top;
 }
 
@@ -28,10 +29,14 @@ span.#{$eccgui}-spinner {
     color: inherit;
 }
 
-.#{$eccgui}-spinner--intent-primary {
+.#{$eccgui}-spinner--intent-accent {
     color: $eccgui-color-accent;
 }
 
+.#{$eccgui}-spinner--intent-primary {
+    color: $eccgui-color-primary;
+}
+
 .#{$eccgui}-spinner--intent-success {
     color: $eccgui-color-success-text;
 }
@@ -72,10 +77,10 @@ span.#{$eccgui}-spinner {
 .#{$eccgui}-spinner--localbackdrop {
     position: absolute;
     inset: 0;
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 
     .#{$eccgui}-card & {
-        background-color: rgba($card-background-color, $eccgui-opacity-muted);
+        background-color: eccgui-color-rgba($card-background-color, $eccgui-opacity-muted);
     }
 }
 
@@ -91,5 +96,5 @@ span.#{$eccgui}-spinner {
 }
 
 .#{$eccgui}-spinner__backdrop {
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 }

package/src/components/Sticky/sticky.scss

@@ -80,22 +80,22 @@
     --eccgui-sticky-target-bgcolor: #{$card-background-color};
 
     .#{$eccgui}-card.#{$eccgui}-intent--primary & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-primary, $card-background-color, 5%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "brand", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--accent & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-accent, $card-background-color, 10%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "accent", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--success & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-success-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "success", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--info & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-info-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "info", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--warning & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-warning-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "warning", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--danger & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-danger-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "danger", "100");
     }
 
     .#{$eccgui}-card.#{$ns}-interactive:hover & {
@@ -112,7 +112,7 @@
 }
 
 .#{$eccgui}-sticky__target--bg-application {
-    --eccgui-sticky-target-bgcolor: #{$eccgui-color-application-background};
+    --eccgui-sticky-target-bgcolor: #{$eccgui-color-workspace-background};
 }
 
 .#{$eccgui}-sticky__target--issticky {

package/src/components/SuggestField/index.ts

@@ -1,5 +1,11 @@
 import { createNewItemRendererFactory } from "./../AutocompleteField/autoCompleteFieldUtils";
-export * from "./SuggestField";
+
+export * from "./../AutocompleteField/AutoCompleteField";
+export * from "./../AutocompleteField/interfaces";
+
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
+
+// @deprecated (v26) use `suggestFieldUtils`
+export const autoCompleteFieldUtils = suggestFieldUtils;

package/src/components/Table/Table.tsx

@@ -4,8 +4,7 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car
 // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// @deprecated (v25) use `TableProps["size"]`
-export type TableRowHeightSize = "small" | "medium" | "large";
+type TableRowHeightSize = "small" | "medium" | "large";
 
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;

package/src/components/Table/TableContainer.tsx

@@ -9,7 +9,7 @@ import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
+import { TableProps, tableRowHeightSizes } from "./Table";
 
 export interface TableDataContainerProps
     extends Omit<
@@ -21,7 +21,7 @@ export interface TableDataContainerProps
         >,
         React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
-    size?: TableRowHeightSize;
+    size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,

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,11 +352,29 @@ 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;
     }
 }
+
+@media print {
+    .#{$eccgui}-simpletable:has(.#{$eccgui}-simpletable__cell > .#{$eccgui}-typography__overflowtext) {
+        // allow 2 lines of text in `<OverflowText />` elements that are direct children of table cells
+        .#{$eccgui}-simpletable__cell {
+            & > .#{$eccgui}-typography__overflowtext,
+            & > .#{$eccgui}-typography__overflowtext--passdown {
+                display: inline;
+                overflow: visible;
+                text-overflow: unset;
+                white-space: unset;
+            }
+            & > .#{$eccgui}-typography__overflowtext {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}

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>;