@eccenca/gui-elements 23.0.0-rc.2 → 23.0.0-rc.3-unofficial.0

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -15,7 +15,7 @@
     }
 
     &.react-flow__node-default {
-        // remove deafult styles
+        // remove default styles
         background-color: unset !important;
         color: unset !important;
         border: unset !important;
@@ -70,7 +70,7 @@
 .#{$eccgui}-graphviz__node--minimal-rectangular,
 .#{$eccgui}-graphviz__node--minimal-circular {
 
-    /* TODO: does not work correctly with tooltips around
+    /* FIXME: does not work correctly with tooltips around
     transition: width $reactflow-transition-time $reactflow-transition-function,
         max-height $reactflow-transition-time $reactflow-transition-function,
         border-radius $reactflow-transition-time $reactflow-transition-function;
@@ -84,6 +84,7 @@
         .#{$eccgui}-graphviz__node__header-depiction + .#{$eccgui}-graphviz__node__header-label,
         .#{$eccgui}-graphviz__node__header-menu,
         .#{$eccgui}-graphviz__node__content,
+        .#{$eccgui}-graphviz__node__extension,
         .#{$eccgui}-graphviz__node__footer {
             display: none;
         }
@@ -97,7 +98,7 @@
 
 .#{$eccgui}-graphviz__node--minimal-circular {
     .react-flow__node:not(.selected) /*:not(:hover)*/ & {
-        border-radius: 100%; // $reactflow-node-basesize / 2;
+        border-radius: 100%;
 
         .#{$eccgui}-graphviz__node__header-depiction {
             border-radius: 100%;
@@ -113,6 +114,10 @@
     justify-content: space-between;
     align-items: center;
     min-height: $reactflow-node-basesize;
+
+    .#{$ns}-button:not([class*="#{$ns}-intent-"]) {
+        color: currentColor;
+    }
 }
 
 .#{$eccgui}-graphviz__node__header-depiction,
@@ -123,7 +128,7 @@
 }
 
 .#{$eccgui}-graphviz__node__header-label {
-    margin: 0 $eccgui-size-block-whitespace / 4;
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -157,7 +162,7 @@
 }
 
 .#{$eccgui}-graphviz__node__content {
-    padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 4;
+    padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
     background-color: $card-background-color;
     color: $eccgui-color-workspace-text;
@@ -170,6 +175,7 @@
 }
 
 .#{$eccgui}-graphviz__node__footer {
+    padding: $eccgui-size-block-whitespace* 0.5 $eccgui-size-block-whitespace* 0.25;
     font-size: $reactflow-node-font-size;
     color: $reactflow-node-color;
     background-color: $reactflow-node-background-color;
@@ -177,25 +183,43 @@
 
 // Node sizes
 
-.#{$eccgui}-graphviz__node--tiny {
+.#{$eccgui}-graphviz__node__resizer,
+.#{$eccgui}-graphviz__node.is-resizeable {
+    min-height: 2.5 * $reactflow-node-basesize;
+    min-width: 2.5 * $reactflow-node-basesize;
+}
+
+.#{$eccgui}-graphviz__node__resizer {
+    .selected &,
+    &:hover {
+        .#{$eccgui}-graphviz__node__resizer--cursorhandles {
+            & > div {
+                overflow: auto;
+                resize: both;
+            }
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node--tiny:not(.is-resizeable) {
     width: $reactflow-node-basesize * 4;
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 4;
 }
 
-.#{$eccgui}-graphviz__node--small {
+.#{$eccgui}-graphviz__node--small:not(.is-resizeable) {
     width: $reactflow-node-basesize * 5;
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 8;
 }
 
-.#{$eccgui}-graphviz__node--medium {
+.#{$eccgui}-graphviz__node--medium:not(.is-resizeable) {
     width: $reactflow-node-basesize * 8;
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;
 }
 
-.#{$eccgui}-graphviz__node--large {
+.#{$eccgui}-graphviz__node--large:not(.is-resizeable) {
     width: $reactflow-node-basesize * 13;
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;
@@ -277,7 +301,7 @@
 
 .#{$eccgui}-graphviz__node__extension {
     background-color: $reactflow-node-background-color;
-    min-height: $eccgui-size-block-whitespace / 2;
+    min-height: $eccgui-size-block-whitespace* 0.5;
     flex-grow: 1;
     flex-shrink: 1;
 
@@ -298,6 +322,10 @@
     }
 }
 
+.#{$eccgui}-graphviz__node__extension--slideout {
+    order: 4;
+}
+
 .#{$eccgui}-graphviz__node__extension--expanded {
     display: flex;
     flex-direction: column;
@@ -319,17 +347,21 @@
         border-radius: $reactflow-node-border-radius;
         border-style: solid;
     }
+
+    &:not(.#{$eccgui}-graphviz__node__extension--slideout) + .#{$eccgui}-graphviz__node__footer {
+        border-top: 1px solid $eccgui-color-separation-divider;
+    }
 }
 
 .#{$eccgui}-graphviz__node__extension-expandbutton {
     display: flex;
     min-height: 0;
-    max-height: $eccgui-size-block-whitespace / 2;
+    max-height: $eccgui-size-block-whitespace* 0.5;
     width: 100%;
 }
 
 .#{$eccgui}-graphviz__node__extension-body {
-    padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 4;
+    padding: $eccgui-size-block-whitespace* 0.5 $eccgui-size-block-whitespace* 0.25;
     flex-grow: 0;
     flex-shrink: 1;
     overflow: auto;

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -0,0 +1,53 @@
+import { CSSProperties } from "react";
+import { Node } from "react-flow-renderer";
+import Color from "color";
+
+interface IStickyNote {
+    id: string;
+    content: string;
+    color: string;
+    position: number[];
+    dimension: number[];
+}
+
+/**
+ * converts a react-flow node with
+ * type = "stickynote" to IStickyNote type compatible with the backend
+ * @param node
+ * @returns {IStickyNote}
+ */
+const transformNodeToStickyNode = (node: Node<any>): IStickyNote => ({
+    id: node.id,
+    content: node.data.businessData.stickyNote!,
+    position: [node.position.x, node.position.y],
+    dimension: [node.data.nodeDimensions?.width!, node.data.nodeDimensions?.height!],
+    color: node.data.style?.borderColor!,
+});
+
+/**
+ * takes in a hex color string and returns
+ * a style object with style rules for borderColor, backgroundColor and color
+ * @param {string} color
+ * @returns {CSSProperties}
+ */
+const generateStyleWithColor = (color: string): CSSProperties => {
+    let style: CSSProperties = {};
+    try {
+        const colorObj = Color("#fff").mix(Color(color), 0.24);
+        style = {
+            backgroundColor: colorObj.toString(),
+            borderColor: color,
+            color: colorObj.isLight() ? "#000" : "#fff",
+        };
+    } catch (ex) {
+        console.warn("Received invalid color for sticky note: " + color);
+    }
+    return style;
+};
+
+const utils = {
+    generateStyleWithColor,
+    transformNodeToStickyNode,
+};
+
+export default utils;

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -1,8 +1,11 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
-import ReactFlow, { Elements } from 'react-flow-renderer';
-import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
+import ReactFlow, { Elements, ReactFlowProvider } from 'react-flow-renderer';
+import {
+    OverflowText,
+    HtmlContentBlock,
+} from "./../../../../index";
 
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
@@ -19,13 +22,15 @@ export default {
     argTypes: {
         contentExtension: {
             control: "select",
-            options: ["Not set", "Default example"],
+            options: ["Not set", "Default example", "Slide out example"],
             mapping: {
                 "Not set": undefined,
-                "Default example": <ContentExtensionExample />,
+                "Default example": <NodeContentExtension {...ContentExtensionExample.args} />,
+                "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
             },
         },
         content: { control: "none" },
+        footerContent: { control: "none" },
         isConnectable: { table: { disable: true } },
         targetPosition: { table: { disable: true } },
         sourcePosition: { table: { disable: true } },
@@ -42,7 +47,7 @@ const NodeContentExample = (args: any) => {
     useEffect(() => {
         setElements([
             {
-                id: '1',
+                id: 'example-1',
                 type: 'default',
                 data: args,
                 position: { x: 50, y: 50 },
@@ -59,13 +64,13 @@ const NodeContentExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
+    return <ReactFlowProvider><ReactFlow
         elements={elements}
         style={{ height: '400px' }}
         onLoad={onLoad}
         nodeTypes={ nodeTypes }
         defaultZoom={1}
-    />
+    /></ReactFlowProvider>
 }
 
 const Template: ComponentStory<typeof NodeContent> = (args) => (
@@ -81,7 +86,12 @@ Default.args = {
             <LoremIpsum p={4} avgSentencesPerParagraph={3} random={false} />
         </HtmlContentBlock>
     ),
-    contentExtension: <ContentExtensionExample />,
+    footerContent: (
+        <OverflowText passDown>
+            Node footer with some text information.
+        </OverflowText>
+    ),
+    contentExtension: undefined,
     minimalShape: "none",
     getMinimalTooltipData: (node: any) => {
         return {
@@ -100,11 +110,12 @@ Default.args = {
             type: "source",
             data: {extendedTooltip: "this is a source handle"}
         }
-    ]
+    ],
+    onNodeResize: false, // workaround that storybook do not automatically include empty handle function
 };
 
-export const SlideOut = Template.bind({});
-SlideOut.args = {
+export const Resizeable = Template.bind({});
+Resizeable.args = {
     ...Default.args,
-    contentExtension: <ContentExtensionExampleSlideOut />
-};
+    onNodeResize: (dimensions) => { alert(`new dimensions: ${dimensions.width}x${dimensions.height}`); },
+}

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -1,8 +1,11 @@
-import React, { useState } from "react";
-import { ComponentMeta } from "@storybook/react";
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
 
-import { NodeContentExtension } from "./../NodeContentExtension";
+import {
+    NodeContentExtension,
+    NodeContentExtensionProps
+} from "./../NodeContentExtension";
 import IconButton from "../../../../components/Icon/IconButton";
 import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
@@ -10,50 +13,39 @@ export default {
     title: "Extensions/React Flow/Node Content Extension",
     component: NodeContentExtension,
     argTypes: {
+        children: { control: "none" },
+        actionButtons: { control: "none" },
     },
 } as ComponentMeta<typeof NodeContentExtension>;
 
-export const Default = () => {
-    const [isExpanded, setExpanded] = useState<boolean>(false);
-
-    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
-        setExpanded(!expanded);
-    }
-
-    return (
-        <NodeContentExtension
-            isExpanded={isExpanded}
-            onToggle={toggleExpansion}
-            actionButtons={
-                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
-            }
-        >
-            <HtmlContentBlock>
-                <h4>Extension example.</h4>
-                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
-            </HtmlContentBlock>
-        </NodeContentExtension>);
-}
-
-export const SlideOutOfNode = () => {
-    const [isExpanded, setExpanded] = useState<boolean>(false);
-
-    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
-        setExpanded(!expanded);
-    }
-
-    return (
-        <NodeContentExtension
-            slideOutOfNode
-            isExpanded={isExpanded}
-            onToggle={toggleExpansion}
-            actionButtons={
-                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
-            }
-        >
-            <HtmlContentBlock>
-                <h4>Extension example.</h4>
-                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
-            </HtmlContentBlock>
-        </NodeContentExtension>);
-}
+const Template: ComponentStory<typeof NodeContentExtension> = (args: NodeContentExtensionProps) => (
+    <NodeContentExtension {...args} /*some comment*/ />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    actionButtons: <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />,
+    slideOutOfNode: false,
+    isExpanded: false,
+    setExpanded: (_event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        return !expanded;
+    },
+    children: (
+        <HtmlContentBlock>
+            <h4>Extension example.</h4>
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    )
+} as NodeContentExtensionProps;
+
+export const SlideOutOfNode = Template.bind({});
+SlideOutOfNode.args = {
+    ...Default.args,
+    slideOutOfNode: true,
+} as NodeContentExtensionProps;
+
+export const WithoutExpansionHandler = Template.bind({});
+WithoutExpansionHandler.args = {
+    ...Default.args,
+    setExpanded: undefined,
+} as NodeContentExtensionProps;

package/src/includes/blueprintjs/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Stack of BlueprintJS variables that are necessary to use their framework
 // TODO: calculate them from own configuration variables, all unchanged variables are commented out
 
@@ -79,7 +81,7 @@ $ns: bp4 !default;
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
-$pt-grid-size: $eccgui-size-typo-text/1.4 !default;
+$pt-grid-size: math.div($eccgui-size-typo-text, 1.4) !default;
 
 $pt-font-family: $eccgui-font-family-default !default;
 $pt-font-family-monospace: $eccgui-font-family-monospace !default;

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Stack of Carbon variables that are necessary to use their framework
 // TODO: calculate them from own configuration variables, all unchanged variables are commented out
 
@@ -38,19 +40,19 @@ $carbon--base-font-size: $eccgui-size-typo-base !default;
 
 $caption-01: (
     font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $label-01: (
     font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $helper-text-01: (
     font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $body-short-01: (
     font-size: carbon--rem($eccgui-size-typo-text),
-    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $body-long-01: (
     font-size: carbon--rem($eccgui-size-typo-text),
@@ -59,7 +61,7 @@ $body-long-01: (
 $code-01: (
     font-family: $eccgui-font-family-monospace,
     font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: $eccgui-size-typo-text-lineheight / $eccgui-size-type-levelratio,
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $heading-01: (
     font-size: carbon--rem($eccgui-size-typo-text),

package/src/index.ts

@@ -247,7 +247,7 @@ export {
     Iframe,
     IframeModal,
     Utilities,
-    LegacyReplacements,
+    LegacyReplacements
 };
 
 export * from "./cmem";

package/src/legacy-replacements/Tabs/Tabs.tsx

@@ -9,7 +9,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 // deprecated interface
 interface TabsProps extends Omit<
     BlueprintTabsProps,
-    "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"
+    "vertical" | "onChange" | "large" | "id" | "animate"
 > {
     activeTab: string;
     tabs: DeprecatedTabProps[];
@@ -69,7 +69,9 @@ export function TabsReplacement({
                 (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
             }
             {...usagetype}
+            renderActiveTabPanelOnly={true}
             {...restProps}
+            animate={false}
         >
             {
                 tabs.map(tab => {

package/src/legacy-replacements/TextField/TextField.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import FieldItem from "../../components/Form/FieldItem";
-import TextField from "../../components/TextField/TextField";
-import TextArea from "../../components/TextField/TextArea";
-import IconButton from "../../components/Icon/IconButton";
+import {
+    FieldItem,
+    TextField,
+    TextArea,
+    IconButton
+} from "./../../index";
 
 const extendedOnChange = (onChangeFn: any, event: any) => {
     if (typeof onChangeFn === "function") {
@@ -47,7 +49,7 @@ export function TextFieldReplacement ({
     const fieldProperties = {
         className: className,
         messageText: error,
-        labelAttributes: !!label ? { text: label } : {},
+        labelProps: !!label ? { text: label } : {},
     }
 
     const inputProperties: {[key: string]: any } = {