@eccenca/gui-elements 24.4.1 → 25.0.0-featurecolorwheelinputcmem7327.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,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

@@ -1,15 +1,15 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabTitle",
     component: TabTitleOrg,
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};

package/src/components/Tag/stories/TagList.stories.tsx

@@ -8,7 +8,7 @@ export default {
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };

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;
@@ -28,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -53,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -73,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -136,113 +142,138 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &: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: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
+
         &.#{$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: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
+
             &.#{$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), calc(0.25 * 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};
             }
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

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