Merge branch 'release/v25.0.0' into fix/reactFlowModal-MT-30

andreas-schultz · andreas-schultz · commit b8b965f675a9 · 2025-10-29T16:18:28.000+01:00
# Conflicts:
#	CHANGELOG.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,20 +43,25 @@ This is a major release, and it might be not compatible with your current usage
     -   `eccgui-color-var`: returns a var of a custom property used for palette color
     -   `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
     -   `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
--   `colorCalculateDistance()`
+-   `utils.colorCalculateDistance()`
     -   function to calculate the difference between 2 colors using the simple CIE76 formula
--   `textToColorHash()`
+-   `utils.textToColorHash()`
     -   function to calculate a color from a text string
 -   new icons
     -   `artefact-task-sqlupdatequeryoperator`
     -   `artefact-task-customsqlexecution`
+    -   `toggler-carettop`
+    -   `toggler-caretleft`
+    -   `toggler-micon`
+    -   `toggler-micoff`
 -   `<Modal />`:
     -   `preventReactFlowEvents`: Adds 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to prevent react-flow to react to drag and pan actions in modals.
         This is enabled by default for <SimpleDialog />.
 
 
 ### Removed
 
+-   support for React Flow v10 was completely removed
 -   removed direct replacements for legacy components (imported via `@eccenca/gui-elements/src/legacy-replacements` or `LegacyReplacements`)
     -   `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
 -   `<Button />`, `<FieldItem />`, `<FieldSet />`, `<MultiSuggestField />`
@@ -69,15 +74,14 @@ This is a major release, and it might be not compatible with your current usage
     -   `densityHigh` property was removed
 -   `<CodeEditor />`
     -   static fallback for test id `codemirror-wrapper` was removed, add `data-test-id` (or your test id data attribute) always directly to `CodeEditor`.
--   `nodeTypes` and `edgeTypes` exports were removed
-    -   use `<ReactFlow/` with `configuration`, or define it yourself
--   SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
-    -   use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
--   support for React Flow v10 was completely removed
 -   `<EdgeDefault />`
     -   removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
 -   `<Spinner />`
     -   `description` property was removed because it was defined but not implemented for a very long time, but we plan to add that type of caption later
+-   `nodeTypes` and `edgeTypes` exports were removed
+    -   use `<ReactFlow />` with `configuration`, or define it yourself
+-   SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
+    -   use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
 
 ### Fixed
 
@@ -95,17 +99,17 @@ This is a major release, and it might be not compatible with your current usage
 -   `<OverflowText />`
     -   beside explicitly specified properties it allows only basic HTML element properties and testing IDs
 -   overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
--   `getColorConfiguration()` works with CSS custom properties
 -   `<SuggestField />`
     -   Always add class 'nodrag' to popover content element to always prevent dragging of react-flow and dnd-kit elements when interacting with the component.
+-   `utils.getColorConfiguration()` works with CSS custom properties
+-   property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
+    -   e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
 
 ### Deprecated
 
 -   support for React Flow v9 will be removed in v26
 -   `<EdgeDefs />`
     -   use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
--   property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
-    -   e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
 
 ## [24.4.1] - 2025-08-25
 
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.1",
+    "version": "25.0.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
diff --git a/src/cmem/react-flow/_minimap.scss b/src/cmem/react-flow/_minimap.scss
@@ -1,3 +1,13 @@
+.#{$eccgui}-graphviz__minimap__node--default {
+    &:not([fill]) {
+        fill: $reactflow-node-border-color;
+    }
+
+    &:not([stroke]) {
+        stroke: $reactflow-node-border-color;
+    }
+}
+
 @mixin mapnodestyles($type) {
     .#{$eccgui}-graphviz__minimap__node--#{$type} {
         @include mapcoloring($type);
diff --git a/src/cmem/react-flow/configuration/_colors-linking.scss b/src/cmem/react-flow/configuration/_colors-linking.scss
@@ -1,16 +1,16 @@
 .#{eccgui}-configuration--colors__react-flow-linking {
-    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "violet", 700)};
-    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "violet", 100)};
-    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
     --#{$eccgui}-transformation-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 300)};
     --#{$eccgui}-comparator-node: #{eccgui-color-var("layout", "teal", 700)};
-    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-aggregator-node: #{eccgui-color-var("layout", "cyan", 700)};
     --#{$eccgui}-aggregator-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
     --#{$eccgui}-value-edge: #{eccgui-color-var("layout", "grey", 700)};
-    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 100)};
+    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 300)};
     --#{$eccgui}-score-edge: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 300)};
 }
diff --git a/src/cmem/react-flow/configuration/_colors-workflow.scss b/src/cmem/react-flow/configuration/_colors-workflow.scss
@@ -1,16 +1,16 @@
 .#{$eccgui}-configuration--colors__react-flow-workflow {
     --#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
-    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
-    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
-    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 300)};
+    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
+    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "cyan", 700)};
+    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "cyan", 300)};
+    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
-    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
+    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 300)};
     --#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
-    --#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
+    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-replaceable-input: #{eccgui-color-var("layout", "amber", 700)};
+    --#{$eccgui}-replaceable-input-bright: #{eccgui-color-var("layout", "amber", 300)};
 }
diff --git a/src/common/scss/_color-functions.scss b/src/common/scss/_color-functions.scss
@@ -86,6 +86,11 @@
  * Created to replace them easily for CSS custom properties.
  */
 @function eccgui-color-rgba($color, $alpha) {
+    @if meta.type-of($alpha) != "number" {
+        // in case it is for example a CSS custom property
+        @return eccgui-color-mix($color $alpha, transparent);
+    }
+
     @if $alpha > 0 {
         @return eccgui-color-mix($color 100% * $alpha, transparent);
     } @else {
diff --git a/src/components/Chat/stories/ChatField.stories.tsx b/src/components/Chat/stories/ChatField.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatField } from "../../../index";
+import { ChatField, ContextMenu, MenuItem } from "../../../index";
 
 export default {
     title: "Components/Chat/ChatField",
@@ -15,4 +15,9 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
 export const Default = TemplateFull.bind({});
 Default.args = {
     onTextSubmit: (value) => alert(value),
+    rightElement: (
+        <ContextMenu>
+            <MenuItem text="Just a test" />
+        </ContextMenu>
+    ),
 };
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
@@ -171,10 +171,14 @@ const canonicalIcons = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-carettop": icons.CaretUp,
     "toggler-caretright": icons.CaretRight,
     "toggler-caretdown": icons.CaretDown,
+    "toggler-caretleft": icons.CaretLeft,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
+    "toggler-micon": icons.Microphone,
+    "toggler-micoff": icons.MicrophoneOff,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
     "toggler-list": icons.List,
diff --git a/src/components/Icon/icon.scss b/src/components/Icon/icon.scss
@@ -1,6 +1,12 @@
 .#{$eccgui}-icon {
     vertical-align: text-bottom;
 
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
     &.#{$eccgui}-intent--info {
         color: $eccgui-color-info-text;
     }
diff --git a/src/components/Icon/stories/Icon.stories.tsx b/src/components/Icon/stories/Icon.stories.tsx
@@ -2,7 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, Icon } from "../../../../index";
+import {
+    Card,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    TitleSubsection,
+} from "../../../../index";
 import { Definitions } from "../../../common/Intent";
 import BaseIcon from "../BaseIcon";
 
@@ -19,7 +30,8 @@ export default {
         },
         intent: {
             control: "select",
-            options: { ...Definitions },
+            options: [...Object.keys(Definitions)],
+            mapping: { ...Definitions },
         },
     },
 } as Meta<typeof Icon>;
@@ -49,12 +61,60 @@ IconSizes.args = {
     name: "undefined",
 };
 
+/**
+ * Available icons by their canonical names.
+ * If you need another icon then use `<TestIcon /`> component.
+ */
 export const IconsOverview = () => {
+    let section = "";
+    let separation = <></>;
     return (
         <OverlaysProvider>
-            {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
-            })}
+            <FlexibleLayoutContainer
+                noEqualItemSpace
+                gapSize="small"
+                style={{ flexWrap: "wrap", justifyContent: "flex-start" }}
+            >
+                {Object.keys(canonicalIcons)
+                    .sort()
+                    .map((iconName) => {
+                        if (
+                            section !==
+                            iconName.substring(0, iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length)
+                        ) {
+                            section = iconName.substring(
+                                0,
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                            );
+                            separation = (
+                                <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>
+                                    <TitleSubsection>{section}</TitleSubsection>
+                                </FlexibleLayoutItem>
+                            );
+                        } else {
+                            separation = <></>;
+                        }
+                        return (
+                            <React.Fragment key={iconName}>
+                                {separation}
+                                <FlexibleLayoutItem growFactor={0} style={{ width: "20rem" }}>
+                                    <Card>
+                                        <OverviewItem>
+                                            <OverviewItemDepiction keepColors>
+                                                <Icon name={iconName as ValidIconName} />
+                                            </OverviewItemDepiction>
+                                            <OverviewItemDescription>
+                                                <OverviewItemLine small>
+                                                    <OverflowText>{iconName}</OverflowText>
+                                                </OverviewItemLine>
+                                            </OverviewItemDescription>
+                                        </OverviewItem>
+                                    </Card>
+                                </FlexibleLayoutItem>
+                            </React.Fragment>
+                        );
+                    })}
+            </FlexibleLayoutContainer>
         </OverlaysProvider>
     );
 };
diff --git a/src/components/Notification/Notification.stories.tsx b/src/components/Notification/Notification.stories.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
+import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
@@ -33,12 +33,26 @@ ExampleWithMessage.args = {
 export const ExampleWithChildren = TemplateFull.bind({});
 ExampleWithChildren.args = {
     children: (
-        <HtmlContentBlock>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-        </HtmlContentBlock>
+        <>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+                <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+            <br />
+            <Markdown
+                htmlContentBlockProps={{
+                    style: {
+                        maxHeight: "25vh",
+                        overflow: "auto",
+                    },
+                }}
+            >
+                {"```\n" + loremIpsum({ random: false }) + "\n```"}
+            </Markdown>
+        </>
     ),
     onDismiss: false, // workaround for undefined function in Storybook
+    actions: [<></>],
 };
 
 export const ExampleNeutralMessage = TemplateFull.bind({});
diff --git a/src/components/Notification/notification.scss b/src/components/Notification/notification.scss
@@ -3,6 +3,10 @@
 @use "sass:math";
 @import "~@blueprintjs/core/src/components/toast/toast";
 
+.#{$ns}-toast-message {
+    min-width: 0;
+}
+
 .#{$eccgui}-notification {
     width: 100%;
     min-width: math.div(4, 16) * 100vw;
@@ -69,13 +73,14 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin: -10px; // TODO: use blueprint var ofr toast padding here
+    margin: -0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__messagebody {
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    min-width: 0;
+    padding: 0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__actions {
diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@eccenca/gui-elements",`
`3`	`3`	`"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",`
`4`		`- "version": "24.4.1",`
	`4`	`+ "version": "25.0.0",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"homepage": "https://github.com/eccenca/gui-elements",`
`7`	`7`	`"bugs": "https://github.com/eccenca/gui-elements/issues",`