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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,44 +1,42 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-  Tooltip
-} from "../../index";
+import { Tooltip } from "../../index";
 
 export default {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  argTypes: {
-  },
-} as ComponentMeta<typeof Tooltip>;
+    title: "Components/Tooltip",
+    component: Tooltip,
+    argTypes: {},
+} as Meta<typeof Tooltip>;
 
-const Template: ComponentStory<typeof Tooltip> = (args) => (
-    <Tooltip {...args} />
+const Template: StoryFn<typeof Tooltip> = (args) => (
+    <OverlaysProvider>
+        <Tooltip {...args} />
+    </OverlaysProvider>
 );
 
 const testContent = loremIpsum({
     p: 1,
     avgSentencesPerParagraph: 2,
-    random: false
-}).toString()
+    random: false,
+}).toString();
 
+/**
+ * Do not use empty `() => {}` functions as handler values.
+ * This is basically an `undefined` but Storybook is currently not able to display this correctly.
+ * @see https://github.com/storybookjs/storybook/issues/22930#issuecomment-1579741485
+ * */
 export const Default = Template.bind({});
 Default.args = {
     children: <span>hover me</span>,
     content: testContent,
     addIndicator: true,
-    // Workaround: setting handlers to false is the only way to prevent Storybook to insert empty handlers in the code examples
-    onClose: false,
-    onClosing: false,
-    //onClosed: false,
-    onInteraction: false,
-    onOpened: false,
-    onOpening: false,
-}
+};
 
 export const MarkdownSupport = Template.bind({});
 MarkdownSupport.args = {
     ...Default.args,
     content: "### This is a headline" + "\n\n" + testContent,
-}
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {
-    TOOLTIP2_INDICATOR
-} from "@blueprintjs/popover2/src/classes";
-import {
-    Tooltip2 as BlueprintTooltip,
-    Tooltip2Props as BlueprintTooltipProps
-} from "@blueprintjs/popover2";
-import { MarkdownParserProps, Markdown } from "./../../cmem/markdown/Markdown";
+    Classes as BlueprintClasses,
+    Tooltip as BlueprintTooltip,
+    TooltipProps as BlueprintTooltipProps,
+} from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { Markdown, MarkdownParserProps } from "./../../cmem/markdown/Markdown";
+
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Add dotted underline as visual indication to the target that a tooltip is attached.
@@ -28,11 +28,11 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * This only works if the tooltip content is a string.
      * Set to `false` to turn off Markdown rendering completely.
      */
-     markdownEnabler?: false | string;
-     /**
-      * Set properties for the Markdown parser
-      */
-     markdownProps?: Omit<MarkdownParserProps, "children">;
+    markdownEnabler?: false | string;
+    /**
+     * Set properties for the Markdown parser
+     */
+    markdownProps?: Omit<MarkdownParserProps, "children">;
 }
 
 export const Tooltip = ({
@@ -64,7 +64,7 @@ export const Tooltip = ({
             className={
                 `${eccgui}-tooltip__wrapper` +
                 (className ? " " + className : "") +
-                (addIndicator === true ? " " + TOOLTIP2_INDICATOR : "")
+                (addIndicator === true ? " " + BlueprintClasses.TOOLTIP_INDICATOR : "")
             }
             //targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
             popoverClassName={
@@ -76,6 +76,6 @@ export const Tooltip = ({
             {children}
         </BlueprintTooltip>
     );
-}
+};
 
 export default Tooltip;

package/src/components/Tooltip/tooltip.scss

@@ -11,7 +11,7 @@ $tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
 $tooltip2-padding-vertical: $eccgui-size-block-whitespace * 0.25; // !default;
 $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 
-@import "~@blueprintjs/popover2/src/tooltip2";
+@import "~@blueprintjs/core/src/components/tooltip/tooltip";
 
 .#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
@@ -44,6 +44,7 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 .#{$prefix}--tooltip-content {
     max-width: $eccgui-size-tooltip-width;
     padding: 0.25 * $eccgui-size-block-whitespace 0.5 * $eccgui-size-block-whitespace;
+
     // align Carbon tooltips, they are used automatically by a few carbon based elements, e.g. pagination buttons
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;

package/src/components/Tree/Tree.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LogoReact } from "@carbon/icons-react";
-import { Tree, TreeNodeInfo, Tag, OverflowText, Icon, TestIcon } from "./../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Icon, OverflowText, Tag, TestIcon, Tree, TreeNodeInfo } from "./../../index";
 import { TreeNodeShadow as TreeNode } from "./Tree";
 
 export default {
     title: "Components/Tree",
     component: Tree,
     subcomponents: { TreeNode },
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof Tree>;
 
 const Template: ComponentStory<typeof Tree> = (args) => {
@@ -38,7 +38,11 @@ Default.args = {
             childNodes: [
                 {
                     id: 1,
-                    label: <>Tree item 1a with{" "}<Tag>Tag</Tag></>,
+                    label: (
+                        <>
+                            Tree item 1a with <Tag>Tag</Tag>
+                        </>
+                    ),
                 },
                 {
                     id: 2,
@@ -46,24 +50,28 @@ Default.args = {
                 },
                 {
                     id: 3,
-                    label: <OverflowText inline>Tree item 1c with a very long label that is ellipsed on overflow</OverflowText>,
+                    label: (
+                        <OverflowText inline>
+                            Tree item 1c with a very long label that is ellipsed on overflow
+                        </OverflowText>
+                    ),
                 },
                 {
                     id: 4,
                     label: "Tree item 1d with icon",
-                    icon: <Icon name="item-info" />
+                    icon: <Icon name="item-info" />,
                 },
                 {
                     id: 5,
                     label: "Tree item 1e with test icon",
-                    icon: <TestIcon tryout={LogoReact} />
+                    icon: <TestIcon tryout={LogoReact} />,
                 },
-            ]
+            ],
         },
         {
             id: 5,
             label: "Tree item 2",
             hasCaret: true,
         },
-    ] as TreeNodeInfo[]
-}
+    ] as TreeNodeInfo[],
+};

package/src/components/Tree/Tree.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import {
     Tree as BlueprintTree,
-    TreeProps as BlueprintTreeProps,
     TreeNode as BlueprintTreeNode,
     TreeNodeInfo as BlueprintTreeNodeInfo,
+    TreeProps as BlueprintTreeProps,
 } from "@blueprintjs/core";
+
 import { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -39,8 +40,7 @@ export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
     onMouseLeave?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
     path: number[];
 }
-export class TreeNode<T = {}> extends BlueprintTreeNode<TreeNodeProps<T>> {
-}
+export class TreeNode<T = {}> extends BlueprintTreeNode<TreeNodeProps<T>> {}
 export class TreeNodeShadow<T = {}> extends React.Component<TreeNodeProps<T>> {
     // only provided for Storybook, so it can read the correct interface
 }

package/src/components/Tree/tree.scss

@@ -11,8 +11,8 @@
 }
 
 .#{$ns}-tree-node-label {
-    overflow: visible;
     min-width: 0;
+    overflow: visible;
 
     span {
         display: inherit;

package/src/components/Typography/Highlighter.tsx

@@ -53,25 +53,24 @@ const escapeRegexWord = (str: string) => {
  * Extracts search words separated by white space.
  * @deprecated moved to `highlighterUtils.extractSearchWords`
  */
-export function extractSearchWords(textQuery: string, toLowerCase: boolean = false): string[] {
+export function extractSearchWords(textQuery: string, toLowerCase = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
-    return toLowerCase ? words.map(w => w.toLowerCase()) : words
+    return toLowerCase ? words.map((w) => w.toLowerCase()) : words;
 }
 
 /**
  * Returns true if all search words are included in the given text
  * @deprecated moved to `highlighterUtils.matchesAllWords`
  */
-export function matchesAllWords(text: string,
-                                searchWords: string[]): boolean {
-    return searchWords.every(w => text.includes(w))
+export function matchesAllWords(text: string, searchWords: string[]): boolean {
+    return searchWords.every((w) => text.includes(w));
 }
 
 /**
  * Creates a case-insensitive multi-word regex, that matches any of the given words.
  * @deprecated moved to `highlighterUtils.createMultiWordRegex`
  */
-export function createMultiWordRegex(multiWordQuery: string[], global: boolean = true) {
+export function createMultiWordRegex(multiWordQuery: string[], global = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }
@@ -80,6 +79,6 @@ export const highlighterUtils = {
     extractSearchWords,
     matchesAllWords,
     createMultiWordRegex,
-}
+};
 
 export default Highlighter;

package/src/components/Typography/HtmlContentBlock.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import * as TypographyClassNames from "./classnames";
 
 // FIXME: CMEM-3742: comment + add story
@@ -10,7 +12,7 @@ export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivEleme
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
-    muted ?: boolean;
+    muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
     linebreakForced?: boolean;
@@ -48,6 +50,6 @@ export const HtmlContentBlock = ({
             {children}
         </div>
     );
-}
+};
 
 export default HtmlContentBlock;

package/src/components/Typography/OverflowText.tsx

@@ -1,13 +1,14 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none"
-    inline?: boolean
-    passDown?: boolean
-    className?: string
-    useHtmlElement?: "p" | "div" | "span"
-    [key: string]: any
+    ellipsis?: "reverse" | "none";
+    inline?: boolean;
+    passDown?: boolean;
+    className?: string;
+    useHtmlElement?: "p" | "div" | "span";
+    [key: string]: any;
 }
 
 /** Prevents text from overflowing. */
@@ -41,6 +42,6 @@ export const OverflowText = ({
             {children}
         </overflowtextElement.type>
     );
-}
+};
 
 export default OverflowText;

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import * as TypographyClassNames from "./classnames";
 
 type WhiteSpaceSizes = "tiny" | "small" | "regular" | "large" | "xlarge";
@@ -61,22 +63,21 @@ export const WhiteSpaceContainer = ({
     linebreakForced = false,
     ...otherDivProps
 }: WhiteSpaceContainerProps) => {
-
     const elementClassName = `${eccgui}-typography__whitespace`;
 
     return (
         <div
             className={
                 elementClassName +
-                (!!className ? " " + className : "") +
-                (!!marginTop ? ` ${elementClassName}-margintop-${marginTop}` : "") +
-                (!!marginRight ? ` ${elementClassName}-marginright-${marginRight}` : "") +
-                (!!marginBottom ? ` ${elementClassName}-marginbottom-${marginBottom}` : "") +
-                (!!marginLeft ? ` ${elementClassName}-marginleft-${marginLeft}` : "") +
-                (!!paddingTop ? ` ${elementClassName}-paddingtop-${paddingTop}` : "") +
-                (!!paddingRight ? ` ${elementClassName}-paddingright-${paddingRight}` : "") +
-                (!!paddingBottom ? ` ${elementClassName}-paddingbottom-${paddingBottom}` : "") +
-                (!!paddingLeft ? ` ${elementClassName}-paddingleft-${paddingLeft}` : "") +
+                (className ? " " + className : "") +
+                (marginTop ? ` ${elementClassName}-margintop-${marginTop}` : "") +
+                (marginRight ? ` ${elementClassName}-marginright-${marginRight}` : "") +
+                (marginBottom ? ` ${elementClassName}-marginbottom-${marginBottom}` : "") +
+                (marginLeft ? ` ${elementClassName}-marginleft-${marginLeft}` : "") +
+                (paddingTop ? ` ${elementClassName}-paddingtop-${paddingTop}` : "") +
+                (paddingRight ? ` ${elementClassName}-paddingright-${paddingRight}` : "") +
+                (paddingBottom ? ` ${elementClassName}-paddingbottom-${paddingBottom}` : "") +
+                (paddingLeft ? ` ${elementClassName}-paddingleft-${paddingLeft}` : "") +
                 (linebreakForced ? " " + TypographyClassNames.FORCELINEBREAK : "")
             }
             {...otherDivProps}
@@ -84,6 +85,6 @@ export const WhiteSpaceContainer = ({
             {children}
         </div>
     );
-}
+};
 
 export default WhiteSpaceContainer;

package/src/components/Typography/_reset.scss

@@ -6,8 +6,8 @@ button,
 select,
 input,
 textarea {
-    border-radius: 0;
     font-family: inherit;
+    border-radius: 0;
 }
 
 // MSI remove clear button from text fields
@@ -26,11 +26,11 @@ button {
 }
 
 svg {
+    padding: 0;
     // forgotten in reset import but necessary to fix problems when used together with MDL resets
     margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
     font: inherit;
+    font-size: 100%;
     vertical-align: baseline;
+    border: 0;
 }

package/src/components/Typography/index.ts

@@ -1,4 +1,4 @@
-import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
 
 // @deprecated use `highlighterUtils`
 export const HighlighterFunctions = {

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,55 +1,58 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
 
 const whiteSpaceSizeOptions = {
     control: "select",
     options: {
         "not set": undefined,
-        "tiny": "tiny",
-        "small": "small",
-        "regular": "regular",
-        "large": "large",
-        "xlarge": "xlarge"
-    }
-}
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
 
 export default {
     title: "Components/Typography",
     component: WhiteSpaceContainerElement,
     argTypes: {
         children: { control: "none" },
-        marginTop: {...whiteSpaceSizeOptions},
-        marginRight: {...whiteSpaceSizeOptions},
-        marginBottom: {...whiteSpaceSizeOptions},
-        marginLeft: {...whiteSpaceSizeOptions},
-        paddingTop: {...whiteSpaceSizeOptions},
-        paddingRight: {...whiteSpaceSizeOptions},
-        paddingBottom: {...whiteSpaceSizeOptions},
-        paddingLeft: {...whiteSpaceSizeOptions},
+        marginTop: { ...whiteSpaceSizeOptions },
+        marginRight: { ...whiteSpaceSizeOptions },
+        marginBottom: { ...whiteSpaceSizeOptions },
+        marginLeft: { ...whiteSpaceSizeOptions },
+        paddingTop: { ...whiteSpaceSizeOptions },
+        paddingRight: { ...whiteSpaceSizeOptions },
+        paddingBottom: { ...whiteSpaceSizeOptions },
+        paddingLeft: { ...whiteSpaceSizeOptions },
     },
 } as ComponentMeta<typeof WhiteSpaceContainerElement>;
 
 const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
-    <WhiteSpaceContainerElement {...args} style={{background: "#eee"}}/>
+    <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
 );
 
 const testContent = loremIpsum({
     p: 2,
     avgSentencesPerParagraph: 4,
-    random: false
-}).toString()
+    random: false,
+}).toString();
 
 export const WhiteSpaceContainer = Template.bind({});
 WhiteSpaceContainer.args = {
     children: [
-        <p>{ testContent }</p>,
-        <p><strong>{ testContent.replaceAll(" ", "") }</strong></p>,
-        <p>{ testContent }</p>
+        <p>{testContent}</p>,
+        <p>
+            <strong>{testContent.replaceAll(" ", "")}</strong>
+        </p>,
+        <p>{testContent}</p>,
     ],
     paddingTop: "tiny",
     paddingRight: "small",
     paddingBottom: "regular",
     paddingLeft: "large",
-}
+};

package/src/components/Typography/typography.scss

@@ -14,7 +14,7 @@ html {
 body {
     font-family: $eccgui-font-family-default;
     font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -46,13 +46,14 @@ a {
 }
 
 mark {
+    color: $eccgui-color-info-text !important;
+
     /*
         we need to use important keyword overwrite here to prevent problems with
         styles from other stylesheets we cannot control here
         TODO: need to reevaluated when it is not used together with MDL anymore
     */
     background-color: rgba($eccgui-color-info-background, 1) !important;
-    color: $eccgui-color-info-text !important;
 }
 
 // HtmlContentBlock
@@ -63,16 +64,16 @@ mark {
 }
 
 .#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
-    line-height: $eccgui-size-typo-caption-lineheight;
     font-size: $eccgui-size-typo-caption;
+    line-height: $eccgui-size-typo-caption-lineheight;
 }
 
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-headline;
-        line-height: $eccgui-size-typo-headline-lineheight;
         font-weight: $eccgui-font-weight-light;
+        line-height: $eccgui-size-typo-headline-lineheight;
     }
 }
 
@@ -80,8 +81,8 @@ h2 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-title;
-        line-height: $eccgui-size-typo-title-lineheight;
         font-weight: $eccgui-font-weight-light;
+        line-height: $eccgui-size-typo-title-lineheight;
     }
 }
 
@@ -89,8 +90,8 @@ h3 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-subtitle;
-        line-height: $eccgui-size-typo-subtitle-lineheight;
         font-weight: $eccgui-font-weight-regular;
+        line-height: $eccgui-size-typo-subtitle-lineheight;
     }
 }
 
@@ -98,8 +99,8 @@ h4 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-text;
-        line-height: $eccgui-size-typo-text-lineheight;
         font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-text-lineheight;
     }
 }
 
@@ -107,9 +108,9 @@ h5 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
-        font-weight: $eccgui-font-weight-bold;
         font-style: italic;
+        font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-caption-lineheight;
     }
 }
 
@@ -117,8 +118,8 @@ h6 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
         font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-caption-lineheight;
     }
 }
 
@@ -159,9 +160,9 @@ table {
 li {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
-        margin-left: $eccgui-size-block-whitespace * 2;
         margin-top: $eccgui-size-block-whitespace * 0.25;
         margin-bottom: $eccgui-size-block-whitespace * 0.25;
+        margin-left: $eccgui-size-block-whitespace * 2;
     }
 }
 
@@ -180,9 +181,9 @@ blockquote {
 pre {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
-        background-color: $eccgui-color-workspace-background;
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
+        background-color: $eccgui-color-workspace-background;
     }
 }
 
@@ -193,7 +194,12 @@ table {
 }
 
 .#{$eccgui}-typography__contentblock {
-    audio, canvas, iframe, img, svg, video {
+    audio,
+    canvas,
+    iframe,
+    img,
+    svg,
+    video {
         max-width: 100%;
     }
 }
@@ -203,12 +209,12 @@ table {
 .#{$ns}-text-overflow-ellipsis,
 .#{$eccgui}-typography__overflowtext,
 .#{$eccgui}-typography__overflowtext--passdown * {
+    // display: inherit;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     overflow-wrap: normal;
     white-space: nowrap;
-    // display: inherit;
-    max-width: 100%;
     vertical-align: middle;
 }
 
@@ -225,12 +231,12 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    direction: rtl;
+    text-align: left;
     text-overflow: ellipsis;
+    direction: rtl;
     unicode-bidi: embed;
-    text-align: left;
 
-    &:after {
+    &::after {
         /*
             hex value for ‎
             @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367
@@ -238,7 +244,7 @@ table {
         content: "\200e";
     }
 
-    &:before {
+    &::before {
         /*
             hex value for ‎
             @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367