Release v25.0.0 into next branch

CHANGELOG.md

@@ -8,6 +8,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
 
+### Migration from v24 to v25
+
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
+-   in case you set your own colors before importing GUI elements you need to update your configuration to the new color palette structure, see `README.md`
+-   change `intent="primary"` to `intent="accent"` for `<Button />`, `<IconButton />` and `<Spinner />`, if supported you may check if it is better to use `affirmative={true}` or `elevated={true}` instead of `intent`
+
 ### Added
 
 -   `<ChatContent />`
@@ -35,24 +41,48 @@ This is a major release, and it might be not compatible with your current usage
     -   component for React Flow v12, displaying new connection lines
 -   `<VisualTour />`
     -   component to display a visual tour multi-step tour of the current view
--   new color palette that includes 4 sections with 20+ color tints in 5 weights each
-    -   indentity, semantic, layout, extra
-    -   managed via CSS custom properties
-    -   see `README.md` for inf about usage
+-   `<Button />`
+    -   `accent` value for `intent` was added to align property with other components
+-   `<Spinner />`
+    -   `accent` value for `intent` was added to align property with other components
+    -   `elevated` property can be used to highlight the spinner, currently the `intent="accent"` display is used
+-   `<Modal />`:
+    -   Add `ModalContext` to track open/close state of all used application modals.
+    -   Add `modalId` property to give a modal a unique ID for tracking purposes.
+    -   `preventReactFlowEvents`: adds 'nopan', 'nowheel' and 'nodrag' classes to overlay classes in order to prevent react-flow to react to drag and pan actions in modals.
+    -   new `utils` methods
+    -   `colorCalculateDistance()`: calculates the difference between 2 colors using the simple CIE76 formula
+    -   `textToColorHash()`: calculates a color from a text string
+    -   `reduceToText`: shrinks HTML content and React elements to plain text, used for `<TextReducer />`
+    -   `decodeHtmlEntities`: decode a string of HTML text, map HTML entities back to UTF-8 chars
 -   SCSS color functions
     -   `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()`
-    -   function to calculate the difference between 2 colors using the simple CIE76 formula
--   `textToColorHash()`
-    -   function to calculate a color from a text string
--   new icons
+-   Color palette: includes 4 sections with 20+ color tints in 5 weights each
+    -   indentity, semantic, layout, extra
+    -   managed via CSS custom properties
+    -   see `README.md` for more information about usage
+-   New icons
     -   `artefact-task-sqlupdatequeryoperator`
     -   `artefact-task-customsqlexecution`
+    -   `item-legend`
+    -   `operation-tour`
+    -   `toggler-carettop`
+    -   `toggler-caretleft`
+    -   `toggler-micon`
+    -   `toggler-micoff`
+    -   `toggler-radio`
+    -   `toggler-radio-checked`
+    -   `state-flagged`
+    -   `state-progress`
+    -   `state-progress-error`
+    -   `state-progress-warning`
+    -   more icons for build tasks
 
 ### 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 />`
@@ -65,20 +95,18 @@ 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`
+-   Removed `remark-typograf` plugin from `<Markdown />` rendering to maintain display expectation
 
 ### Fixed
 
--   `<Modal />`:
-    -   Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
 -   `<CodeAutocompleteField />`:
     -   In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).
 
@@ -93,17 +121,22 @@ 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`
+-   `<Button />` and `<IconButton />`
+    -   `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `affirmative={true}` or `elevated={true}` instead of primary/accent intent
+-   `<Spinner />`
+    -   `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `elevated={true}` instead of using intent
+-   icons: arrow directions for `list-sortasc` and `list-sortdesc` were switched, up arrow is now used for ascending sort
 
 ### 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
 

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",
@@ -87,6 +87,7 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
         "n3": "^1.25.1",
@@ -134,6 +135,7 @@
         "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
+        "@types/he": "^1.2.3",
         "@types/jest": "^29.5.14",
         "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.16",
@@ -150,8 +152,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -83,4 +83,4 @@ function firstNonEmptyLine(preview: string) {
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};

src/cmem/markdown/Markdown.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
-import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
@@ -55,7 +54,7 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkDefinitionList] as PluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
     rehypePlugins: [] as PluggableList,
     allowedElements: [

src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -40,7 +40,7 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
     /**
      * Code editor props
      */

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);

src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,20 +1,20 @@
 .#{$eccgui}-configuration--colors__react-flow-graph {
-    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-property-node: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-property-node-bright: #{eccgui-color-var("layout", "teal", 100)};
     --#{$eccgui}-implicit-edge: #{eccgui-color-var("identity", "text", 700)};
     --#{$eccgui}-implicit-edge-bright: #{eccgui-color-var("identity", "text", 100)};
-    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-subproperty-edge: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-subproperty-edge-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
 }

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)};
 }

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)};
 }

src/common/index.ts

@@ -1,3 +1,5 @@
+import { decode } from "he";
+
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
@@ -6,6 +8,8 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
+import { reduceToText } from "./utils/reduceToText";
+export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
@@ -19,4 +23,6 @@ export const utils = {
     getScrollParent,
     getEnabledColorsFromPalette,
     textToColorHash,
+    reduceToText,
+    decodeHtmlEntities: decode,
 };

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 {