@eccenca/gui-elements 23.0.0-rc.3 → 23.0.0-rc.5

package/src/components/TextField/textfield.scss

@@ -4,7 +4,7 @@
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
-    $eccgui-size-type-levelratio !default;
+$eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -45,6 +45,30 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 // enhancements
 
+@mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
+    @keyframes intent-state-flash-#{$state} {
+        0% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
+        39% { background-color: $bgcolor; }
+        100% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
+    }
+
+    .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
+        animation-name: intent-state-flash-#{$state};
+        background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+    }
+}
+
+.#{$ns}-input {
+    .#{$ns}-input-group[class*="#{$ns}-intent"] & {
+        animation-delay: 0.5s;
+        animation-duration: 1s;
+    }
+    @include intent-state-flash("primary", $eccgui-color-info-background);
+    @include intent-state-flash("success", $eccgui-color-success-background);
+    @include intent-state-flash("warning", $eccgui-color-warning-background);
+    @include intent-state-flash("danger", $eccgui-color-danger-background);
+}
+
 .#{$eccgui}-textarea {
     width: 100%;
 }

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

@@ -17,20 +17,28 @@ const Template: ComponentStory<typeof Tooltip> = (args) => (
     <Tooltip {...args} />
 );
 
+const testContent = loremIpsum({
+    p: 1,
+    avgSentencesPerParagraph: 2,
+    random: false
+}).toString()
+
 export const Default = Template.bind({});
 Default.args = {
     children: <span>hover me</span>,
-    content: loremIpsum({
-        p: 1,
-        avgSentencesPerParagraph: 2,
-        random: false
-    }).toString(),
+    content: testContent,
     addIndicator: true,
-    // this is a workaround to prevent empty functions in code example
+    // Workaround: setting handlers to false is the only way to prevent Storybook to insert empty handlers in the code examples
     onClose: false,
-    // onClosed: false, // this somehow leads to a problem when closed with `<span>` target
     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

@@ -6,6 +6,7 @@ import {
     Tooltip2 as BlueprintTooltip,
     Tooltip2Props as BlueprintTooltipProps
 } from "@blueprintjs/popover2";
+import { MarkdownParserProps, Markdown } from "./../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
@@ -22,6 +23,16 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * The tolltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
+    /**
+     * A regular expression that when it matches against the tooltip text, enables the tooltip to be rendered as Markdown.
+     * 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">;
 }
 
 function Tooltip({
@@ -30,14 +41,26 @@ function Tooltip({
     className = "",
     size = "medium",
     addIndicator = false,
+    markdownEnabler = "\n\n",
+    markdownProps,
     ...otherProps
 }: TooltipProps) {
+    let tooltipContent = content;
+
+    if (
+        typeof content === "string" &&
+        typeof markdownEnabler === "string" &&
+        new RegExp(markdownEnabler).test(content)
+    ) {
+        tooltipContent = <Markdown {...markdownProps}>{content}</Markdown>;
+    }
+
     return (
         <BlueprintTooltip
             lazy={true}
             hoverOpenDelay={500}
             {...otherProps}
-            content={content}
+            content={tooltipContent}
             className={
                 `${eccgui}-tooltip__wrapper` +
                 (className ? " " + className : "") +

package/src/components/Tooltip/tooltip.scss

@@ -29,6 +29,10 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     max-width: $eccgui-size-tooltip-width * 2;
 }
 
+.#{$eccgui}-tooltip__wrapper:not(.#{$ns}-tooltip2-indicator) {
+    cursor: inherit;
+}
+
 .#{$eccgui}-tooltip__content {
     a {
         color: inherit;

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tree, TreeNodeInfo, Tag, OverflowText, Icon } from "./../../index";
+import { TreeNodeShadow as TreeNode } from "./Tree";
+
+export default {
+    title: "Components/Tree",
+    component: Tree,
+    subcomponents: { TreeNode },
+    argTypes: {
+    },
+} as ComponentMeta<typeof Tree>;
+
+const Template: ComponentStory<typeof Tree> = (args) => {
+    const [treeContents, setTreeContents] = React.useState(args.contents);
+
+    return (
+        <Tree
+            {...args}
+            contents={treeContents}
+            /*
+            FIXME: should be demonstrated but is not the focus here
+            onNodeCollapse={toggleNode}
+            onNodeExpand={toggleNode}
+            */
+        />
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    contents: [
+        {
+            id: 0,
+            label: "Tree item 1",
+            isExpanded: true,
+            childNodes: [
+                {
+                    id: 1,
+                    label: <>Tree item 1a with{" "}<Tag>Tag</Tag></>,
+                },
+                {
+                    id: 2,
+                    label: "Tree item 1b with a very long label that is not ellipsed on overflow",
+                },
+                {
+                    id: 3,
+                    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" />
+                },
+            ]
+        },
+        {
+            id: 5,
+            label: "Tree item 2",
+            hasCaret: true,
+        },
+    ] as TreeNodeInfo[]
+}

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import {
+    Tree as BlueprintTree,
+    TreeProps as BlueprintTreeProps,
+    TreeNode as BlueprintTreeNode,
+    TreeNodeInfo as BlueprintTreeNodeInfo,
+} from "@blueprintjs/core";
+import { IconProps } from "./../Icon/Icon";
+
+/* This is basically a tunnel to the Blueprint elements but we change a view thigs regarding the icons */
+
+// TreeNode
+
+export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {
+    /**
+     * Child tree nodes of this node.
+     */
+    childNodes?: Array<TreeNodeInfo<T>>;
+    /**
+     * `<Icon />` element to render next to the node's label.
+     */
+    icon?: React.ReactElement<IconProps>;
+}
+
+//export const TreeNode = BlueprintTreeNode;
+
+export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
+    children?: React.ReactNode;
+    contentRef?: (node: TreeNode<T>, element: HTMLDivElement | null) => void;
+    depth: number;
+    key?: string | number;
+    onClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onCollapse?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onContextMenu?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onDoubleClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onExpand?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onMouseEnter?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    path: number[];
+}
+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
+}
+
+// Tree
+
+export interface TreeProps<T = {}> extends Omit<BlueprintTreeProps<T>, "contents"> {
+    /**
+     * Tree contents.
+     */
+    contents: ReadonlyArray<TreeNodeInfo<T>>;
+}
+
+/**
+ * Tree component to display a tree structure.
+ * Have a look to the underlaying [BlueprintJS Tree](https://blueprintjs.com/docs/#core/components/tree) component for examples how to use handlers.
+ * Use only our `<Icon />` elements in the tree nodes!
+ */
+export const Tree = BlueprintTree;

package/src/components/Tree/tree.scss

@@ -0,0 +1,28 @@
+@import "~@blueprintjs/core/src/components/tree/tree";
+
+.#{$ns}-tree {
+    overflow-x: hidden;
+}
+
+.#{$ns}-tree-node-content {
+    & > .#{$eccgui}-icon {
+        margin-right: $eccgui-size-inline-whitespace;
+    }
+}
+
+.#{$ns}-tree-node-label {
+    overflow: visible;
+    min-width: 0;
+
+    span {
+        display: inherit;
+    }
+
+    & > span {
+        display: inline-block;
+    }
+
+    .#{$ns}-tag {
+        display: inline-flex;
+    }
+}

package/src/includes/carbon-components/_variables.scss

@@ -30,7 +30,7 @@ $feature-flags: (
     // not necessary, we include 16 columns grid directly
 ) !default;
 
-// ⚠️ Manage deprecations
+// Manage deprecations
 $deprecations--entry: true;
 $deprecations--reasons: ();
 $deprecations--message: "Deprecated code was found, this code will be removed before the next release of Carbon.";
@@ -105,5 +105,7 @@ $layout-04: carbon--rem(
 ) !default; // regular height of text input
 $spacing-05: carbon--rem($eccgui-size-inline-whitespace) !default;
 
+// FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables
+
 // fetch some imports even earlier than normally necessary to have them ready before auto-included by library elements
 @import "./../../components/Button/button";

package/src/index.scss

@@ -59,7 +59,7 @@
 // used in own component @import "~@blueprintjs/core/src/components/tag-input/tag-input";
 // used in own component @import "~@blueprintjs/core/src/components/toast/toast";
 // used in own component @import "~@blueprintjs/core/src/components/tooltip/tooltip";
-// currently not used @import "~@blueprintjs/core/src/components/tree/tree";
+// used in own component @import "~@blueprintjs/core/src/components/tree/tree";
 
 // -- Carbon Elements ----------------------------------------------------------
 
@@ -142,7 +142,6 @@
 @import "./components/Icon/icon";
 @import "./components/Menu/menu";
 @import "./components/ContextOverlay/contextoverlay";
-@import "./components/SimpleTable/simpletable";
 @import "./components/Button/button";
 @import "./components/OverviewItem/overviewitem";
 @import "./components/Breadcrumb/breadcrumb";
@@ -165,11 +164,15 @@
 @import "./components/Notification/notification";
 @import "./components/Link/link";
 @import "./components/Spinner/spinner";
+@import "./components/InteractionGate/interactiongate";
 @import "./components/Tabs/tabs";
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
 @import "./components/AutoSuggestion/AutoSuggestion";
 @import "./components/Select/select";
+@import "./components/HoverToggler/hovertoggler";
+@import "./components/SimpleTable/simpletable";
+@import "./components/Tree/tree";
 @import "./extensions/codemirror/codemirror";
 
 // == load tweaks ==============================================================

package/src/index.ts

@@ -21,6 +21,8 @@ import Grid from "./components/Grid/Grid";
 import GridRow from "./components/Grid/GridRow";
 import GridColumn from "./components/Grid/GridColumn";
 
+import {HoverToggler} from "./components/HoverToggler/HoverToggler";
+
 import WorkspaceContent from "./components/Workspace/WorkspaceContent";
 import WorkspaceMain from "./components/Workspace/WorkspaceMain";
 import WorkspaceSide from "./components/Workspace/WorkspaceSide";
@@ -36,6 +38,7 @@ import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
 import Tab from "./components/Tabs/Tab";
 import TabTitle from "./components/Tabs/TabTitle";
+import TabPanel from "./components/Tabs/TabPanel";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -123,24 +126,28 @@ import AccordionItem from "./components/Accordion/AccordionItem";
 import Link from "./components/Link/Link";
 
 import Spinner from "./components/Spinner/Spinner";
+import InteractionGate from "./components/InteractionGate/InteractionGate";
 
 import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
 
 import * as TypographyClassNames from "./components/Typography/classnames";
-import {ClassNames as IntentClassNames} from "./common/Intent";
-import { openInNewTab } from "./common/utils/openInNewTab";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 
 import * as LegacyReplacements from "./legacy-replacements";
 
+import {ClassNames as IntentClassNames} from "./common/Intent";
+import { openInNewTab } from "./common/utils/openInNewTab";
+import decideContrastColorValue from "./common/utils/colorDecideContrastvalue";
+
 const HelperClasses = {
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
 };
 
 const Utilities = {
-     openInNewTab
+     openInNewTab,
+     decideContrastColorValue
 }
 
 export {
@@ -196,6 +203,7 @@ export {
     Tabs,
     Tab,
     TabTitle,
+    TabPanel,
     TextField,
     TextArea,
     SearchField,
@@ -216,6 +224,7 @@ export {
     CardContent,
     CardActions,
     CardActionsAux,
+    HoverToggler,
     Spacing,
     Divider,
     Tooltip,
@@ -234,22 +243,24 @@ export {
     Notification,
     Link,
     Spinner,
+    InteractionGate,
     PropertyName,
     PropertyValue,
     PropertyValuePair,
     PropertyValueList,
     Toast,
     HelperClasses,
-    Select, // FIXME: CMEM-3742: include as own element
+    Select,
     MultiSelect,
     AutoCompleteField,
     ProgressBar,
     Iframe,
     IframeModal,
     Utilities,
-    LegacyReplacements
+    LegacyReplacements,
 };
 
+export * from "./components/Tree/Tree";
 export * from "./cmem";
 export * from "./extensions";
 export * from "./components/interfaces";