Merge pull request #387 from eccenca/maintain/mergeReleaseTag-v25.1.0

haschek · web-flow · commit 0417f333f2ac · 2026-04-13T16:11:58.000+02:00
Release process changes from v25.1.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [25.1.0] - 2026-04-13
+
 ### Added
 
 -   `<ActivityControlWidget />`
@@ -28,13 +30,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ColorField />`
     -   input component for colors
     -   uses a subset from the configured color palette by default, but it also allows to enter custom colors
+-   `<MultiSuggestField />`
+    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+-   `<HtmlContentClock />`
+    -   inline `code` uses same gray background highlighting like code blocks
 -   CSS custom properties
     -   beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
 -   new icons:
     -   `state-confirmed-all`
     -   `state-declined-all`
--   `<MultiSuggestField />`
-    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+    -   `data-sourceschema`
+    -   `data-targetschema`
+    -   `operation-ai-generate`
+    -   `operation-filterreset`
+    -   `toggler-pin-empty`
+    -   `toggler-pin-filled`
 
 ### Fixed
 
@@ -62,6 +72,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<MultiSuggestField />`
     -   `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
     -   border of the BlueprintJS `Tag` elements were fixed
+-   `<Modal />`
+    -   fix specificity for pointer-events rules on SVG
 -   `<Button />`
     -   badge is correctly displayed when `badge={0}`
 -   Focus outlines
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": "25.0.0",
+    "version": "25.1.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -89,7 +89,7 @@
         "compute-scroll-into-view": "^3.1.1",
         "he": "^1.2.0",
         "jshint": "^2.13.6",
-        "lodash": "^4.17.21",
+        "lodash": "^4.18.1",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
@@ -161,13 +161,14 @@
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
         "regenerator-runtime": "^0.13.9",
-        "rimraf": "^5.0.10",
+        "rimraf": "^6.1.3",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
         "storybook": "^8.6.14",
-        "stylelint": "^16.18.0",
-        "stylelint-config-recess-order": "^6.0.0",
-        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint": "^17.6.0",
+        "stylelint-config-recess-order": "^7.7.0",
+        "stylelint-config-standard-scss": "^17.0.0",
+        "stylelint-order": "^8.1.1",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
@@ -183,7 +184,10 @@
         "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
-        "hast-util-from-parse5": "8.0.0"
+        "hast-util-from-parse5": "8.0.0",
+        "**/picomatch": "^2.3.2",
+        "**/minimatch": "^3.1.4",
+        "**/lodash": "^4.18.0"
     },
     "husky": {
         "hooks": {
diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
@@ -36,15 +36,15 @@ This is a paragraph.
     * another line
 3. third item
 
-This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
+This is a paragraph with a [text link](http://example.com/), some \`inline code\`, and a footnote reference [^1].
 
 ## Headline level 2
 ### Headline level 3
 #### Headline level 4
 ##### Headline level 5
 ###### Headline level 6
 
-    This is a code block. 
+    This is a code block.
 
 \`\`\`
 another code block
diff --git a/src/cmem/markdown/markdown.scss b/src/cmem/markdown/markdown.scss
@@ -55,8 +55,8 @@
     a[href=""]:not(#{$eccgui-selector-text-spot-highlight}) {
         font-size: $eccgui-size-typo-caption;
         line-height: $eccgui-size-typo-caption-lineheight;
-        text-decoration: none;
         vertical-align: super;
+        text-decoration: none;
 
         &::before {
             content: "[";
diff --git a/src/components/Breadcrumb/breadcrumb.scss b/src/components/Breadcrumb/breadcrumb.scss
@@ -19,8 +19,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
         width: $eccgui-size-block-whitespace;
         height: auto;
         margin: 0;
-        text-align: center;
         vertical-align: middle;
+        text-align: center;
         content: ">";
         background: none;
     }
@@ -61,8 +61,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
 .#{$eccgui}-breadcrumb__item {
     display: inline-block;
     overflow: hidden;
-    font-size: inherit;
     text-overflow: ellipsis;
+    font-size: inherit;
 
     a {
         @extend .#{$eccgui}-breadcrumb__item;
diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
@@ -166,7 +166,9 @@ $button-intents: (
     // special case override: blueprint do not use configured colors here
     @include eccgui-enhance-blueprint-button-intent("primary");
     @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("success");
     @include eccgui-enhance-blueprint-button-intent("warning");
+    @include eccgui-enhance-blueprint-button-intent("danger");
 }
 
 .#{$ns}-button-text {
diff --git a/src/components/Dialog/dialog.scss b/src/components/Dialog/dialog.scss
@@ -41,7 +41,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
     margin: 2rem;
-    pointer-events: all;
+    pointer-events: auto;
     user-select: text;
 
     & > * {
@@ -50,7 +50,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
         max-width: 100%;
     }
 
-    * {
+    *:has(> svg) {
         pointer-events: all;
     }
 
diff --git a/src/components/Form/form.scss b/src/components/Form/form.scss
@@ -71,8 +71,8 @@ form {
 
 .#{$eccgui}-fieldset {
     legend {
-        display: block;
         float: left;
+        display: block;
         width: 100%;
         color: $eccgui-color-applicationheader-text;
     }
@@ -133,9 +133,9 @@ form {
 .#{$eccgui}-fieldset__fielditems {
     &:not(:first-child) {
         &::before {
+            clear: both;
             display: block;
             height: $eccgui-size-block-whitespace;
-            clear: both;
             content: " ";
         }
     }
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
@@ -1,6 +1,7 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
-import { transform} from "./transformIcon";
+
+import { transform } from "./transformIcon";
 
 const canonicalIcons = {
     "application-activities": icons.Activity,
@@ -73,6 +74,8 @@ const canonicalIcons = {
     "data-time": icons.Time,
     "data-datetime": icons.EventSchedule,
     "data-number": icons.StringInteger,
+    "data-sourceschema": icons.PortOutput,
+    "data-targetschema": icons.PortInput,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,
@@ -138,14 +141,16 @@ const canonicalIcons = {
     "navigation-up": icons.ArrowUp,
 
     "operation-aggregation": icons.DataCollection,
+    "operation-ai-generate": icons.AiGenerate,
     "operation-autolayout": icons.ChartNetwork,
     "operation-clear": icons.Close,
     "operation-commit": icons.Commit,
     "operation-comparison": icons.Compare,
     "operation-erase": icons.Erase,
+    "operation-filter": icons.Filter,
     "operation-filteredit": icons.FilterEdit,
     "operation-filterremove": icons.FilterRemove,
-    "operation-filter": icons.Filter,
+    "operation-filterreset": icons.FilterReset,
     "operation-focus": icons.CenterSquare,
     "operation-format-codeblock": icons.CodeBlock,
     "operation-format-text-code": icons.Code,
@@ -212,6 +217,8 @@ const canonicalIcons = {
     "toggler-star-filled": icons.StarFilled,
     "toggler-table": icons.Table,
     "toggler-tree": icons.TreeViewAlt,
+    "toggler-pin-empty": icons.Pin,
+    "toggler-pin-filled": icons.PinFilled,
 
     "form-template": icons.Parameter,
 
diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss
@@ -15,8 +15,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
-        font-size: 100%;
         text-overflow: clip;
+        font-size: 100%;
     }
 }
 
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
@@ -39,15 +39,15 @@ $tab-indicator-width: 3px !default;
         max-width: 15rem;
         margin-bottom: $tab-indicator-width;
         color: inherit;
-        border-radius: 0;
         outline: none;
+        border-radius: 0;
 
         .#{$ns}-button-text {
             overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            //min-width: 6em;
+            // min-width: 6em;
         }
 
         &::before,
diff --git a/src/components/Toolbar/toolbar.scss b/src/components/Toolbar/toolbar.scss
@@ -1,9 +1,8 @@
 .#{$eccgui}-toolbar {
     display: flex;
     flex-flow: row wrap;
-    align-content: center;
+    place-content: center flex-start;
     align-items: center;
-    justify-content: flex-start;
 }
 
 .#{$eccgui}-toolbar--vertical {
diff --git a/src/components/Typography/_reset.scss b/src/components/Typography/_reset.scss
@@ -28,6 +28,7 @@ button {
 
 svg {
     padding: 0;
+
     // forgotten in reset import but necessary to fix problems when used together with MDL resets
     margin: 0;
     font: inherit;
diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
@@ -13,20 +13,26 @@ html {
 
 body {
     font-family: $eccgui-font-family-default;
-    font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizelegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+
     // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
     // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
     // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
     // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
     font-size-adjust: from-font;
+    font-weight: $eccgui-font-weight-regular;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
     font-family: $eccgui-font-family-monospace;
     font-size: 0.9em;
+
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+    }
 }
 
 strong {
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
@@ -6,8 +6,8 @@
  */
 
 .react-flow {
-    direction: ltr;
     z-index: 0;
+    direction: ltr;
 }
 
 .react-flow__pane {
diff --git a/src/extensions/react-flow/handles/_handles.scss b/src/extensions/react-flow/handles/_handles.scss
@@ -62,10 +62,10 @@ div.react-flow__handle {
             inset: 0;
             display: none;
             cursor: pointer;
-            content: " ";
-            border-radius: 100%;
             outline: dotted $eccgui-size-flow-handle-border currentcolor;
             outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+            content: " ";
+            border-radius: 100%;
 
             .react-flow__node:hover & {
                 display: block;
@@ -207,9 +207,9 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
         z-index: -1;
+        visibility: hidden;
         width: 1px;
         height: 1px;
-        visibility: hidden;
         border: none;
 
         &.react-flow__handle-top {
diff --git a/src/includes/carbon-components/_requisits.scss b/src/includes/carbon-components/_requisits.scss
@@ -8,11 +8,13 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/react/scss/utilities/_visually-hidden";
-// we replicate the function here because the distinct import is not ossible via @carbon/react
+
+// we replicate the function here because the distinct import is not possible via @carbon/react
 // @import "~@carbon/styles/scss/components/ui-shell/functions";
 @function mini-units($count) {
     @return 0.5rem * $count;
 }
+
 @import "~@carbon/react/scss/feature-flags";
 @import "~@carbon/react/scss/colors";
 @import "~@carbon/react/scss/theme";
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,9 @@ $button-intents: (`
`166`	`166`	`// special case override: blueprint do not use configured colors here`
`167`	`167`	`@include eccgui-enhance-blueprint-button-intent("primary");`
`168`	`168`	`@include eccgui-enhance-blueprint-button-intent("accent");`
	`169`	`+ @include eccgui-enhance-blueprint-button-intent("success");`
`169`	`170`	`@include eccgui-enhance-blueprint-button-intent("warning");`
	`171`	`+ @include eccgui-enhance-blueprint-button-intent("danger");`
`170`	`172`	`}`
`171`	`173`
`172`	`174`	`.#{$ns}-button-text {`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(`
`41`	`41`	`max-width: calc(100vw - 4rem);`
`42`	`42`	`max-height: calc(100vh - 4rem);`
`43`	`43`	`margin: 2rem;`
`44`		`- pointer-events: all;`
	`44`	`+ pointer-events: auto;`
`45`	`45`	`user-select: text;`
`46`	`46`
`47`	`47`	`& > * {`
`@@ -50,7 +50,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(`
`50`	`50`	`max-width: 100%;`
`51`	`51`	`}`
`52`	`52`
`53`		`- * {`
	`53`	`+ *:has(> svg) {`
`54`	`54`	`pointer-events: all;`
`55`	`55`	`}`
`56`	`56`
Original file line number	Diff line number	Diff line change
`@@ -71,8 +71,8 @@ form {`
`71`	`71`
`72`	`72`	`.#{$eccgui}-fieldset {`
`73`	`73`	`legend {`
`74`		`- display: block;`
`75`	`74`	`float: left;`
	`75`	`+ display: block;`
`76`	`76`	`width: 100%;`
`77`	`77`	`color: $eccgui-color-applicationheader-text;`
`78`	`78`	`}`
`@@ -133,9 +133,9 @@ form {`
`133`	`133`	`.#{$eccgui}-fieldset__fielditems {`
`134`	`134`	`&:not(:first-child) {`
`135`	`135`	`&::before {`
	`136`	`+ clear: both;`
`136`	`137`	`display: block;`
`137`	`138`	`height: $eccgui-size-block-whitespace;`
`138`		`- clear: both;`
`139`	`139`	`content: " ";`
`140`	`140`	`}`
`141`	`141`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;`
`15`	`15`
`16`	`16`	`.#{$prefix}--form-item,`
`17`	`17`	`.#{$prefix}--select-input {`
`18`		`- font-size: 100%;`
`19`	`18`	`text-overflow: clip;`
	`19`	`+ font-size: 100%;`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`