@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

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

@@ -1,21 +1,19 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { TabPanel } from "./../../../";
 
 export default {
     title: "Components/Tabs",
     component: TabPanel,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof TabPanel>;
 
-const TemplateFull: ComponentStory<typeof TabPanel> = (args) => (
-    <TabPanel {...args} />
-);
+const TemplateFull: ComponentStory<typeof TabPanel> = (args) => <TabPanel {...args} />;
 
 export const TabPanelElement = TemplateFull.bind({});
 TabPanelElement.args = {
     children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />,
-    hidden: false
+    hidden: false,
 };

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
 export default {
     title: "Components/Tabs",
     component: TabTitleOrg,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof TabTitleOrg>;
 
 const TabTitle = (args) => {
@@ -16,16 +16,14 @@ const TabTitle = (args) => {
             tabs={[
                 {
                     id: "titlesimple",
-                    title: <TabTitleOrg {...args} />
-                }
+                    title: <TabTitleOrg {...args} />,
+                },
             ]}
         />
-    )
-}
+    );
+};
 
-const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => (
-    <TabTitle {...args} />
-);
+const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
 
 export const TabTitleElement = TemplateFull.bind({});
 TabTitleElement.args = {

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Tabs, TabTitle } from "./../../../";
 
 export default {
@@ -22,9 +23,7 @@ export default {
     },
 } as ComponentMeta<typeof Tabs>;
 
-const TemplateFull: ComponentStory<typeof Tabs> = (args) => (
-    <Tabs {...args} />
-);
+const TemplateFull: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const TabsContainerUncontrolled = TemplateFull.bind({});
 TabsContainerUncontrolled.args = {
@@ -44,8 +43,8 @@ TabsContainerUncontrolled.args = {
             id: "storytab3",
             title: <TabTitle text="Tab title 3" tooltip="Tab tooltip 3" />,
             panel: <div>Tab content 3</div>,
-        }
-    ]
+        },
+    ],
 };
 
 /*

package/src/components/Tabs/tabs.scss

@@ -13,10 +13,10 @@ $tab-indicator-width: 3px !default;
 */
 
 .#{$ns}-tab-list {
-    border-bottom: solid 1px $pt-divider-black;
+    column-gap: $eccgui-size-block-whitespace * 0.25;
     max-width: 100%;
     overflow: auto;
-    column-gap: $eccgui-size-block-whitespace * 0.25;
+    border-bottom: solid 1px $pt-divider-black;
 
     & > *:not(:last-child) {
         margin-right: 0;
@@ -24,8 +24,8 @@ $tab-indicator-width: 3px !default;
 }
 
 .#{$ns}-tab {
-    outline: none;
     max-width: 50%;
+    outline: none;
 
     .#{$ns}-tabs:not(.#{$eccgui}-tabs--scrollablelist) > .#{$ns}-tab-list > & {
         flex-shrink: 1;
@@ -33,22 +33,25 @@ $tab-indicator-width: 3px !default;
     }
 
     & > .#{$ns}-button, // normal button
-    & > span > span > .#{$ns}-button { // button with tooltip
-        outline: none;
-        margin-bottom: $tab-indicator-width;
-        max-width: 15rem;
+    & > span > span > .#{$ns}-button {
+        // button with tooltip
         width: 100%;
+        max-width: 15rem;
+        margin-bottom: $tab-indicator-width;
         color: inherit;
         border-radius: 0;
+        outline: none;
 
         .#{$ns}-button-text {
-            white-space: nowrap;
             overflow-x: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
+
             //min-width: 6em;
         }
 
-        &::before, & > *:not(:last-child) {
+        &::before,
+        & > *:not(:last-child) {
             margin-right: $eccgui-size-block-whitespace * 0.25;
         }
     }
@@ -57,12 +60,13 @@ $tab-indicator-width: 3px !default;
     &:hover {
         & > .#{$ns}-button,
         & > span > span > span > .#{$ns}-button {
-            background: $minimal-button-background-color-hover;
             color: inherit;
+            background: $minimal-button-background-color-hover;
         }
     }
 }
 
-.#{$eccgui}-tab__panel, .#{$ns}-tab-panel {
+.#{$eccgui}-tab__panel,
+.#{$ns}-tab-panel {
     margin-top: $eccgui-size-block-whitespace;
 }

package/src/components/Tag/Tag.tsx

@@ -1,30 +1,21 @@
-import React from 'react';
-import {
-    Tag as BlueprintTag,
-    TagProps as BlueprintTagProps
-} from "@blueprintjs/core";
+import React from "react";
+import { Tag as BlueprintTag, TagProps as BlueprintTagProps } from "@blueprintjs/core";
 import Color from "color";
+
+import { intentClassName, IntentTypes } from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon, { IconProps } from "../Icon/Icon";
 import { TestIconProps } from "../Icon/TestIcon";
-import { ValidIconName } from "../Icon/canonicalIconNames";
-import {
-    IntentTypes,
-    intentClassName
-} from "../../common/Intent";
+
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface TagProps extends Omit<
-    BlueprintTagProps,
-    // currently not supported
-    "active" |
-    "fill" |
-    "icon" |
-    "intent" |
-    "large" |
-    "multiline" |
-    "rightIcon"
-> {
+export interface TagProps
+    extends Omit<
+        BlueprintTagProps,
+        // currently not supported
+        "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
+    > {
     // own properties
 
     /**
@@ -68,7 +59,7 @@ export interface TagProps extends Omit<
 
 function Tag({
     children,
-    className = '',
+    className = "",
     intent,
     icon,
     emphasis = "normal",
@@ -78,41 +69,41 @@ function Tag({
     backgroundColor,
     ...otherProps
 }: TagProps) {
-    otherProps['interactive'] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
-    if (!!backgroundColor) {
+    otherProps["interactive"] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
+    if (backgroundColor) {
         const additionalStyles = otherProps.style ?? {};
-        let color = Color("#ffffff")
+        let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch(ex) {
-            console.warn("Received invalid background color for tag: " + backgroundColor)
+        } catch (ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor);
         }
 
-        otherProps['style'] = {
+        otherProps["style"] = {
             ...additionalStyles,
             ...{
                 backgroundColor: color.rgb().toString(),
-                color: decideContrastColorValue({testColor: color}),
-            }
-        }
+                color: decideContrastColorValue({ testColor: color }),
+            },
+        };
     }
-    const leftIcon = (!!icon && typeof icon === "string") ? <Icon name={icon} /> : icon;
+    const leftIcon = !!icon && typeof icon === "string" ? <Icon name={icon} /> : icon;
     return (
         <BlueprintTag
             {...otherProps}
             className={
                 `${eccgui}-tag__item ${eccgui}-tag--${emphasis}emphasis` +
-                (!!intent ? ` ${intentClassName(intent)}` : '') +
-                (small ? ` ${eccgui}-tag--small` : '') +
-                (large ? ` ${eccgui}-tag--large` : '') +
-                (className ? ' ' + className : '')
+                (intent ? ` ${intentClassName(intent)}` : "") +
+                (small ? ` ${eccgui}-tag--small` : "") +
+                (large ? ` ${eccgui}-tag--large` : "") +
+                (className ? " " + className : "")
             }
             minimal={minimal}
-            icon={!!leftIcon ? React.cloneElement(leftIcon, { small: !large}) : undefined}
+            icon={leftIcon ? React.cloneElement(leftIcon, { small: !large }) : undefined}
         >
             {children}
         </BlueprintTag>
     );
-};
+}
 
 export default Tag;

package/src/components/Tag/TagList.tsx

@@ -1,54 +1,34 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TagListProps extends React.HTMLAttributes<HTMLUListElement> {
     label?: string;
 }
 
-function TagList({
-    children,
-    className = '',
-    label = '',
-    ...otherProps
-}: TagListProps) {
-
+function TagList({ children, className = "", label = "", ...otherProps }: TagListProps) {
     const tagList = (
-        <ul
-            className={
-                `${eccgui}-tag__list` +
-                ((className && !label) ? ' ' + className : '')
-            }
-            {...otherProps}
-        >
-            {
-                React.Children.map(children, (child, i) => {
-                    return <li className={`${eccgui}-tag__list-item`} key={'tagitem_'+i}>
+        <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
+            {React.Children.map(children, (child, i) => {
+                return (
+                    <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                })
-            }
+                );
+            })}
         </ul>
     );
 
     if (label) {
         return (
-            <div
-                className={
-                    `${eccgui}-tag__list-wrapper` +
-                    (className ? ' ' + className : '')
-                }
-            >
-                <strong className={`${eccgui}-tag__list-label`}>
-                    {label}
-                </strong>
-                <span className={`${eccgui}-tag__list-content`}>
-                    {tagList}
-                </span>
+            <div className={`${eccgui}-tag__list-wrapper` + (className ? " " + className : "")}>
+                <strong className={`${eccgui}-tag__list-label`}>{label}</strong>
+                <span className={`${eccgui}-tag__list-content`}>{tagList}</span>
             </div>
         );
     }
 
     return tagList;
-};
+}
 
 export default TagList;

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

@@ -1,8 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tag } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
+import { Tag } from "./../../../../index";
+
 export default {
     title: "Components/Tag",
     component: Tag,
@@ -26,9 +28,7 @@ export default {
     },
 } as ComponentMeta<typeof Tag>;
 
-const Template: ComponentStory<typeof Tag> = (args) => (
-  <Tag {...args} />
-);
+const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TagList, Tag } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Tag, TagList } from "./../../../../index";
 
 export default {
     title: "Components/Tag",
@@ -12,17 +13,10 @@ export default {
     },
 } as ComponentMeta<typeof TagList>;
 
-const Template: ComponentStory<typeof TagList> = (args) => (
-  <TagList {...args} />
-);
+const Template: ComponentStory<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>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
 };

package/src/components/Tag/tag.scss

@@ -5,6 +5,7 @@ $eccgui-size-typo-tag-large: $eccgui-size-typo-text !default;
 $eccgui-size-typo-tag-large-lineheight: $eccgui-size-typo-text-lineheight !default;
 $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;
 // $dark-tag-default-color: $gray5 !default;
@@ -21,16 +22,16 @@ $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
 // $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: 0px !default;
+$tag-round-adjustment: 0 !default;
 
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
-    flex-shrink: 0;
     flex-grow: 0;
-    max-height: calc(#{$tag-height} - 2px);
-    min-height: calc(#{$tag-height} - 2px);
+    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;
 
     &.#{$ns}-round {
@@ -42,8 +43,8 @@ $tag-round-adjustment: 0px !default;
     }
 
     .#{$ns}-tag-remove {
-        margin: 0 !important;
         padding: 0;
+        margin: 0 !important;
     }
 
     .#{$eccgui}-overviewitem__description > & {
@@ -51,11 +52,11 @@ $tag-round-adjustment: 0px !default;
     }
 
     &.#{$eccgui}-tag--small {
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        line-height: calc(#{$tag-height-small} - 2px);
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         padding: 0 $tag-padding-small;
+        line-height: calc(#{$tag-height-small} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -67,11 +68,11 @@ $tag-round-adjustment: 0px !default;
     }
 
     &.#{$eccgui}-tag--large {
-        max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
-        min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         min-width: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
-        line-height: calc(#{$tag-height-large} - 2px);
+        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);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -79,7 +80,7 @@ $tag-round-adjustment: 0px !default;
     }
 
     svg {
-        fill: currentColor;
+        fill: currentcolor;
         stroke: initial;
     }
 }
@@ -90,10 +91,10 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__list,
 .#{$eccgui}-tag__list-item {
     display: inline;
-    vertical-align: middle;
     font-size: $eccgui-size-typo-tag;
-    line-height: $eccgui-size-typo-tag-lineheight;
     font-weight: $eccgui-font-weight-regular;
+    line-height: $eccgui-size-typo-tag-lineheight;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-tag__list-label {
@@ -106,9 +107,9 @@ $tag-round-adjustment: 0px !default;
 }
 
 .#{$eccgui}-tag__list-item {
-    margin-bottom: $eccgui-size-margin-tag;
     display: inline-block;
     max-width: 100%;
+    margin-bottom: $eccgui-size-margin-tag;
 }
 
 .#{$eccgui}-tag__list-label,
@@ -120,124 +121,124 @@ $tag-round-adjustment: 0px !default;
     color: inherit !important;
     .#{$ns}-icon,
     svg {
-        height: $eccgui-size-typo-tag;
         width: $eccgui-size-typo-tag;
-        fill: currentColor;
+        height: $eccgui-size-typo-tag;
+        fill: currentcolor;
     }
 }
 
 .#{$ns}-tag {
-    border-width: 1px;
     border-style: solid;
+    border-width: 1px;
 
     &:not([class*="#{$ns}-intent-"]) {
         &.#{$eccgui}-tag--strongeremphasis {
-            border-color: rgba($tag-default-color, 1);
             background-color: rgba($tag-default-color, 1);
+            border-color: rgba($tag-default-color, 1);
         }
         &.#{$eccgui}-tag--strongemphasis {
-            border-color: rgba($tag-default-color, 0.875);
             background-color: rgba($tag-default-color, 0.875);
+            border-color: rgba($tag-default-color, 0.875);
         }
         &.#{$eccgui}-tag--normalemphasis {
-            border-color: rgba($tag-default-color, 0.75);
             background-color: rgba($tag-default-color, 0.75);
+            border-color: rgba($tag-default-color, 0.75);
         }
         &.#{$eccgui}-tag--weakemphasis {
-            border-color: rgba($tag-default-color, 0.625);
             background-color: rgba($tag-default-color, 0.625);
+            border-color: rgba($tag-default-color, 0.625);
         }
         &.#{$eccgui}-tag--weakeremphasis {
-            border-color: rgba($tag-default-color, 0.5);
             background-color: rgba($tag-default-color, 0.5);
+            border-color: rgba($tag-default-color, 0.5);
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
             &.#{$eccgui}-tag--strongeremphasis {
-                border-color: rgba($tag-default-color, 0.3);
                 background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
+                border-color: rgba($tag-default-color, 0.3);
             }
             &.#{$eccgui}-tag--strongemphasis {
-                border-color: rgba($tag-default-color, 0.225);
                 background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+                border-color: rgba($tag-default-color, 0.225);
             }
             &.#{$eccgui}-tag--normalemphasis {
-                border-color: rgba($tag-default-color, 0.15);
                 background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+                border-color: rgba($tag-default-color, 0.15);
             }
             &.#{$eccgui}-tag--weakemphasis {
-                border-color: rgba($tag-default-color, 0.075);
                 background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+                border-color: rgba($tag-default-color, 0.075);
             }
             &.#{$eccgui}-tag--weakeremphasis {
-                border-color: rgba($tag-default-color, 0.15);
                 background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+                border-color: rgba($tag-default-color, 0.15);
             }
         }
 
         &.#{$eccgui}-intent--primary {
-            border-color: $eccgui-color-primary;
-            background-color: $eccgui-color-primary;
             color: $eccgui-color-primary-contrast;
+            background-color: $eccgui-color-primary;
+            border-color: $eccgui-color-primary;
         }
         &.#{$eccgui}-intent--accent {
-            border-color: $eccgui-color-accent;
-            background-color: $eccgui-color-accent;
             color: $eccgui-color-accent-contrast;
+            background-color: $eccgui-color-accent;
+            border-color: $eccgui-color-accent;
         }
         &.#{$eccgui}-intent--info {
-            border-color: $eccgui-color-info-text;
-            background-color: $eccgui-color-info-text;
             color: $eccgui-color-info-background;
+            background-color: $eccgui-color-info-text;
+            border-color: $eccgui-color-info-text;
         }
         &.#{$eccgui}-intent--success {
-            border-color: $eccgui-color-success-text;
-            background-color: $eccgui-color-success-text;
             color: $eccgui-color-success-background;
+            background-color: $eccgui-color-success-text;
+            border-color: $eccgui-color-success-text;
         }
         &.#{$eccgui}-intent--warning {
-            border-color: $eccgui-color-warning-text;
-            background-color: $eccgui-color-warning-text;
             color: $eccgui-color-warning-background;
+            background-color: $eccgui-color-warning-text;
+            border-color: $eccgui-color-warning-text;
         }
         &.#{$eccgui}-intent--danger {
-            border-color: $eccgui-color-danger-text;
-            background-color: $eccgui-color-danger-text;
             color: $eccgui-color-danger-background;
+            background-color: $eccgui-color-danger-text;
+            border-color: $eccgui-color-danger-text;
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
             &.#{$eccgui}-intent--primary {
-                border-color: $eccgui-color-primary;
                 color: $eccgui-color-primary;
                 background-color: $eccgui-color-primary-contrast;
+                border-color: $eccgui-color-primary;
             }
             &.#{$eccgui}-intent--accent {
-                border-color: $eccgui-color-accent;
                 color: $eccgui-color-accent;
                 background-color: $eccgui-color-accent-contrast;
+                border-color: $eccgui-color-accent;
             }
             &.#{$eccgui}-intent--info {
-                border-color: $eccgui-color-info-text;
                 color: $eccgui-color-info-text;
                 background-color: $eccgui-color-info-background;
+                border-color: $eccgui-color-info-text;
             }
             &.#{$eccgui}-intent--success {
-                border-color: $eccgui-color-success-text;
                 color: $eccgui-color-success-text;
                 background-color: $eccgui-color-success-background;
+                border-color: $eccgui-color-success-text;
             }
             &.#{$eccgui}-intent--warning {
-                border-color: $eccgui-color-warning-text;
                 color: $eccgui-color-warning-text;
                 background-color: $eccgui-color-warning-background;
+                border-color: $eccgui-color-warning-text;
             }
             &.#{$eccgui}-intent--danger {
-                border-color: $eccgui-color-danger-text;
                 color: $eccgui-color-danger-text;
                 background-color: $eccgui-color-danger-background;
+                border-color: $eccgui-color-danger-text;
             }
         }
     }