Skip to content

Commit 3956280

Browse files
authored
Merge pull request #344 from eccenca/release/v25.0.0
Release v25.0.0 into next branch
2 parents e22a093 + 2ccdec0 commit 3956280

50 files changed

Lines changed: 1488 additions & 668 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

CHANGELOG.md

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
88

99
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.
1010

11+
### Migration from v24 to v25
12+
13+
- 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
14+
- 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`
15+
- 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`
16+
1117
### Added
1218

1319
- `<ChatContent />`
@@ -35,24 +41,48 @@ This is a major release, and it might be not compatible with your current usage
3541
- component for React Flow v12, displaying new connection lines
3642
- `<VisualTour />`
3743
- component to display a visual tour multi-step tour of the current view
38-
- new color palette that includes 4 sections with 20+ color tints in 5 weights each
39-
- indentity, semantic, layout, extra
40-
- managed via CSS custom properties
41-
- see `README.md` for inf about usage
44+
- `<Button />`
45+
- `accent` value for `intent` was added to align property with other components
46+
- `<Spinner />`
47+
- `accent` value for `intent` was added to align property with other components
48+
- `elevated` property can be used to highlight the spinner, currently the `intent="accent"` display is used
49+
- `<Modal />`:
50+
- Add `ModalContext` to track open/close state of all used application modals.
51+
- Add `modalId` property to give a modal a unique ID for tracking purposes.
52+
- `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.
53+
- new `utils` methods
54+
- `colorCalculateDistance()`: calculates the difference between 2 colors using the simple CIE76 formula
55+
- `textToColorHash()`: calculates a color from a text string
56+
- `reduceToText`: shrinks HTML content and React elements to plain text, used for `<TextReducer />`
57+
- `decodeHtmlEntities`: decode a string of HTML text, map HTML entities back to UTF-8 chars
4258
- SCSS color functions
4359
- `eccgui-color-var`: returns a var of a custom property used for palette color
4460
- `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
4561
- `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
46-
- `colorCalculateDistance()`
47-
- function to calculate the difference between 2 colors using the simple CIE76 formula
48-
- `textToColorHash()`
49-
- function to calculate a color from a text string
50-
- new icons
62+
- Color palette: includes 4 sections with 20+ color tints in 5 weights each
63+
- indentity, semantic, layout, extra
64+
- managed via CSS custom properties
65+
- see `README.md` for more information about usage
66+
- New icons
5167
- `artefact-task-sqlupdatequeryoperator`
5268
- `artefact-task-customsqlexecution`
69+
- `item-legend`
70+
- `operation-tour`
71+
- `toggler-carettop`
72+
- `toggler-caretleft`
73+
- `toggler-micon`
74+
- `toggler-micoff`
75+
- `toggler-radio`
76+
- `toggler-radio-checked`
77+
- `state-flagged`
78+
- `state-progress`
79+
- `state-progress-error`
80+
- `state-progress-warning`
81+
- more icons for build tasks
5382

5483
### Removed
5584

85+
- support for React Flow v10 was completely removed
5686
- removed direct replacements for legacy components (imported via `@eccenca/gui-elements/src/legacy-replacements` or `LegacyReplacements`)
5787
- `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
5888
- `<Button />`, `<FieldItem />`, `<FieldSet />`, `<MultiSuggestField />`
@@ -65,20 +95,18 @@ This is a major release, and it might be not compatible with your current usage
6595
- `densityHigh` property was removed
6696
- `<CodeEditor />`
6797
- static fallback for test id `codemirror-wrapper` was removed, add `data-test-id` (or your test id data attribute) always directly to `CodeEditor`.
68-
- `nodeTypes` and `edgeTypes` exports were removed
69-
- use `<ReactFlow/` with `configuration`, or define it yourself
70-
- SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
71-
- use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
72-
- support for React Flow v10 was completely removed
7398
- `<EdgeDefault />`
7499
- removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
75100
- `<Spinner />`
76101
- `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
102+
- `nodeTypes` and `edgeTypes` exports were removed
103+
- use `<ReactFlow />` with `configuration`, or define it yourself
104+
- SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
105+
- use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
106+
- Removed `remark-typograf` plugin from `<Markdown />` rendering to maintain display expectation
77107

78108
### Fixed
79109

80-
- `<Modal />`:
81-
- 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.
82110
- `<CodeAutocompleteField />`:
83111
- In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).
84112

@@ -93,17 +121,22 @@ This is a major release, and it might be not compatible with your current usage
93121
- `<OverflowText />`
94122
- beside explicitly specified properties it allows only basic HTML element properties and testing IDs
95123
- overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
96-
- `getColorConfiguration()` works with CSS custom properties
97124
- `<SuggestField />`
98125
- Always add class 'nodrag' to popover content element to always prevent dragging of react-flow and dnd-kit elements when interacting with the component.
126+
- `utils.getColorConfiguration()` works with CSS custom properties
127+
- property names returned by `getColorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
128+
- e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
129+
- `<Button />` and `<IconButton />`
130+
- `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
131+
- `<Spinner />`
132+
- `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
133+
- icons: arrow directions for `list-sortasc` and `list-sortdesc` were switched, up arrow is now used for ascending sort
99134

100135
### Deprecated
101136

102137
- support for React Flow v9 will be removed in v26
103138
- `<EdgeDefs />`
104139
- use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
105-
- property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
106-
- e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
107140

108141
## [24.4.1] - 2025-08-25
109142

package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@eccenca/gui-elements",
33
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
4-
"version": "24.4.1",
4+
"version": "25.0.0",
55
"license": "Apache-2.0",
66
"homepage": "https://github.com/eccenca/gui-elements",
77
"bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -87,6 +87,7 @@
8787
"codemirror": "^6.0.1",
8888
"color": "^4.2.3",
8989
"compute-scroll-into-view": "^3.1.1",
90+
"he": "^1.2.0",
9091
"jshint": "^2.13.6",
9192
"lodash": "^4.17.21",
9293
"n3": "^1.25.1",
@@ -134,6 +135,7 @@
134135
"@testing-library/react": "^12.1.5",
135136
"@types/codemirror": "^5.60.15",
136137
"@types/color": "^3.0.6",
138+
"@types/he": "^1.2.3",
137139
"@types/jest": "^29.5.14",
138140
"@types/jshint": "^2.12.4",
139141
"@types/lodash": "^4.17.16",
@@ -150,8 +152,8 @@
150152
"eslint-plugin-simple-import-sort": "^12.1.1",
151153
"husky": "4",
152154
"identity-obj-proxy": "^3.0.0",
153-
"jest": "^30.0.5",
154-
"jest-environment-jsdom": "^30.0.5",
155+
"jest": "^30.2.0",
156+
"jest-environment-jsdom": "^30.2.0",
155157
"jest-pnp-resolver": "^1.2.3",
156158
"lint-staged": "^15.5.1",
157159
"node-sass-package-importer": "^5.3.3",

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,4 @@ function firstNonEmptyLine(preview: string) {
8383

8484
export const stringPreviewContentBlobTogglerUtils = {
8585
firstNonEmptyLine,
86-
};
86+
};

src/cmem/markdown/Markdown.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import ReactMarkdown from "react-markdown";
33
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
44
// @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
5-
import remarkTypograf from "@mavrin/remark-typograf";
65
import rehypeExternalLinks from "rehype-external-links";
76
import rehypeRaw from "rehype-raw";
87
import { remarkDefinitionList } from "remark-definition-list";
@@ -55,7 +54,7 @@ const configDefault = {
5554
@see https://github.com/remarkjs/react-markdown#api
5655
*/
5756
// @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
58-
remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
57+
remarkPlugins: [remarkGfm, remarkDefinitionList] as PluggableList,
5958
// @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
6059
rehypePlugins: [] as PluggableList,
6160
allowedElements: [

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export interface StickyNoteModalProps {
4040
/**
4141
* Forward other properties to the `SimpleModal` element that is used for this dialog.
4242
*/
43-
simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
43+
simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
4444
/**
4545
* Code editor props
4646
*/

src/cmem/react-flow/_minimap.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
.#{$eccgui}-graphviz__minimap__node--default {
2+
&:not([fill]) {
3+
fill: $reactflow-node-border-color;
4+
}
5+
6+
&:not([stroke]) {
7+
stroke: $reactflow-node-border-color;
8+
}
9+
}
10+
111
@mixin mapnodestyles($type) {
212
.#{$eccgui}-graphviz__minimap__node--#{$type} {
313
@include mapcoloring($type);
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
.#{$eccgui}-configuration--colors__react-flow-graph {
2-
--#{$eccgui}-graph-node: #{eccgui-color-var("layout", "purple", 700)};
3-
--#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "purple", 100)};
4-
--#{$eccgui}-class-node: #{eccgui-color-var("layout", "magenta", 900)};
5-
--#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
6-
--#{$eccgui}-instance-node: #{eccgui-color-var("layout", "magenta", 500)};
7-
--#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
2+
--#{$eccgui}-graph-node: #{eccgui-color-var("layout", "magenta", 900)};
3+
--#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
4+
--#{$eccgui}-class-node: #{eccgui-color-var("layout", "purple", 700)};
5+
--#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "purple", 100)};
6+
--#{$eccgui}-instance-node: #{eccgui-color-var("layout", "purple", 500)};
7+
--#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "purple", 100)};
88
--#{$eccgui}-property-node: #{eccgui-color-var("layout", "teal", 700)};
99
--#{$eccgui}-property-node-bright: #{eccgui-color-var("layout", "teal", 100)};
1010
--#{$eccgui}-implicit-edge: #{eccgui-color-var("identity", "text", 700)};
1111
--#{$eccgui}-implicit-edge-bright: #{eccgui-color-var("identity", "text", 100)};
12-
--#{$eccgui}-import-edge: #{eccgui-color-var("layout", "purple", 700)};
13-
--#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
14-
--#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "magenta", 900)};
15-
--#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
12+
--#{$eccgui}-import-edge: #{eccgui-color-var("layout", "magenta", 900)};
13+
--#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
14+
--#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "purple", 700)};
15+
--#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
1616
--#{$eccgui}-subproperty-edge: #{eccgui-color-var("layout", "teal", 700)};
1717
--#{$eccgui}-subproperty-edge-bright: #{eccgui-color-var("layout", "teal", 100)};
18-
--#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "magenta", 500)};
19-
--#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
18+
--#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "purple", 500)};
19+
--#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
2020
}
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.#{eccgui}-configuration--colors__react-flow-linking {
2-
--#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "violet", 700)};
3-
--#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "violet", 100)};
4-
--#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "cyan", 900)};
5-
--#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
2+
--#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "purple", 700)};
3+
--#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "purple", 300)};
4+
--#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "petrol", 700)};
5+
--#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
66
--#{$eccgui}-transformation-node: #{eccgui-color-var("layout", "pink", 700)};
7-
--#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 100)};
7+
--#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 300)};
88
--#{$eccgui}-comparator-node: #{eccgui-color-var("layout", "teal", 700)};
9-
--#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 100)};
9+
--#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 300)};
1010
--#{$eccgui}-aggregator-node: #{eccgui-color-var("layout", "cyan", 700)};
1111
--#{$eccgui}-aggregator-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
1212
--#{$eccgui}-value-edge: #{eccgui-color-var("layout", "grey", 700)};
13-
--#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 100)};
13+
--#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 300)};
1414
--#{$eccgui}-score-edge: #{eccgui-color-var("layout", "cyan", 900)};
15-
--#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 100)};
15+
--#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 300)};
1616
}
Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.#{$eccgui}-configuration--colors__react-flow-workflow {
22
--#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
3-
--#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
4-
--#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
5-
--#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
6-
--#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
7-
--#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
8-
--#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
9-
--#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
3+
--#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 300)};
4+
--#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "petrol", 700)};
5+
--#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
6+
--#{$eccgui}-linking-node: #{eccgui-color-var("layout", "cyan", 700)};
7+
--#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "cyan", 300)};
8+
--#{$eccgui}-transform-node: #{eccgui-color-var("layout", "teal", 700)};
9+
--#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "teal", 300)};
1010
--#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
11-
--#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
11+
--#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 300)};
1212
--#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
13-
--#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
14-
--#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
15-
--#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
13+
--#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 300)};
14+
--#{$eccgui}-replaceable-input: #{eccgui-color-var("layout", "amber", 700)};
15+
--#{$eccgui}-replaceable-input-bright: #{eccgui-color-var("layout", "amber", 300)};
1616
}

src/common/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { decode } from "he";
2+
13
import { invisibleZeroWidthCharacters } from "./utils/characters";
24
import { colorCalculateDistance } from "./utils/colorCalculateDistance";
35
import decideContrastColorValue from "./utils/colorDecideContrastvalue";
@@ -6,6 +8,8 @@ import getColorConfiguration from "./utils/getColorConfiguration";
68
import { getScrollParent } from "./utils/getScrollParent";
79
import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
810
import { openInNewTab } from "./utils/openInNewTab";
11+
import { reduceToText } from "./utils/reduceToText";
12+
export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
913
export type { IntentTypes as IntentBaseTypes } from "./Intent";
1014

1115
export const utils = {
@@ -19,4 +23,6 @@ export const utils = {
1923
getScrollParent,
2024
getEnabledColorsFromPalette,
2125
textToColorHash,
26+
reduceToText,
27+
decodeHtmlEntities: decode,
2228
};

0 commit comments

Comments
 (0)