Skip to content

Commit 5fb0ee4

Browse files
authored
Merge pull request #343 from eccenca/next
Merge next into develop
2 parents 7391a4c + 71088f6 commit 5fb0ee4

File tree

184 files changed

+6087
-3510
lines changed

Some content is hidden

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

184 files changed

+6087
-3510
lines changed

.github/workflows/deployment-storybook.yml

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ jobs:
2424
- uses: actions/checkout@main
2525
with:
2626
fetch-depth: 0
27+
- name: Workflow git state
28+
run: |
29+
echo github.ref: ${{ github.ref }}
30+
echo github.event_name: ${{ github.event_name }}
31+
echo github.actor: ${{ github.actor }}
32+
git status
33+
git log --oneline -1
2734
- uses: actions/setup-node@main
2835
with:
2936
node-version: "18"
@@ -32,7 +39,7 @@ jobs:
3239
- name: Create jest results
3340
run: yarn test:generate-output
3441
- name: Publish to Chromatic
35-
uses: chromaui/action@v11
42+
uses: chromaui/action@main
3643
with:
3744
token: ${{ secrets.GITHUB_TOKEN }}
3845
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/main.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,12 @@ module.exports = {
6464
},
6565
webpackFinal: async (config, { configType }) => {
6666
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
67-
67+
if (configType === "PRODUCTION") {
68+
// remove source maps from production storybook
69+
// this may lead to errors when it is created via github workers
70+
// reason is currently not known
71+
config.devtool = false;
72+
}
6873
config.module.rules = [
6974
{
7075
test: /\.(png|jpg|gif|svg)(\\?.*)?$/,

CHANGELOG.md

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

77
## [Unreleased]
88

9+
## [25.0.0] - 2025-12-01
10+
11+
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.
12+
13+
### Migration from v24 to v25
14+
15+
- 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
16+
- 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`
17+
- 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`
18+
919
### Added
1020

1121
- `<ChatContent />`
@@ -20,6 +30,115 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
2030
- reduces HTML to simple text and can display it as one ellipsed line
2131
- `<Tooltip />`
2232
- prove useage of `usePlaceholder` by jest test coverage
33+
- `<EdgeStraight />`
34+
- it's basically `<EdgeDefault />` without any special configs
35+
- `<EdgeBezier />`
36+
- only supported for v12, in v9 as straight edge is used
37+
- use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
38+
- `<EdgeDefaultV12 />`
39+
- the `data` object provides `markerAppearance` to set and remove the edge arrows
40+
- `<EdgeDefault />`
41+
- introduced the new `arrowDirection` property, including support for bidirectional edges - supported only for `<EdgeDefaultV12 />`
42+
- `<EdgeNew />`
43+
- component for React Flow v12, displaying new connection lines
44+
- `<VisualTour />`
45+
- component to display a visual tour multi-step tour of the current view
46+
- `<Button />`
47+
- `accent` value for `intent` was added to align property with other components
48+
- `<Spinner />`
49+
- `accent` value for `intent` was added to align property with other components
50+
- `elevated` property can be used to highlight the spinner, currently the `intent="accent"` display is used
51+
- `<Modal />`:
52+
- Add `ModalContext` to track open/close state of all used application modals.
53+
- Add `modalId` property to give a modal a unique ID for tracking purposes.
54+
- `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.
55+
- new `utils` methods
56+
- `colorCalculateDistance()`: calculates the difference between 2 colors using the simple CIE76 formula
57+
- `textToColorHash()`: calculates a color from a text string
58+
- `reduceToText`: shrinks HTML content and React elements to plain text, used for `<TextReducer />`
59+
- `decodeHtmlEntities`: decode a string of HTML text, map HTML entities back to UTF-8 chars
60+
- SCSS color functions
61+
- `eccgui-color-var`: returns a var of a custom property used for palette color
62+
- `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
63+
- `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
64+
- Color palette: includes 4 sections with 20+ color tints in 5 weights each
65+
- indentity, semantic, layout, extra
66+
- managed via CSS custom properties
67+
- see `README.md` for more information about usage
68+
- New icons
69+
- `artefact-task-sqlupdatequeryoperator`
70+
- `artefact-task-customsqlexecution`
71+
- `item-legend`
72+
- `operation-tour`
73+
- `toggler-carettop`
74+
- `toggler-caretleft`
75+
- `toggler-micon`
76+
- `toggler-micoff`
77+
- `toggler-radio`
78+
- `toggler-radio-checked`
79+
- `state-flagged`
80+
- `state-progress`
81+
- `state-progress-error`
82+
- `state-progress-warning`
83+
- more icons for build tasks
84+
85+
### Removed
86+
87+
- support for React Flow v10 was completely removed
88+
- removed direct replacements for legacy components (imported via `@eccenca/gui-elements/src/legacy-replacements` or `LegacyReplacements`)
89+
- `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
90+
- `<Button />`, `<FieldItem />`, `<FieldSet />`, `<MultiSuggestField />`
91+
- removed support for old state properties `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger`
92+
- `<Notification />`
93+
- removed support for old state properties `neutral`, `success`, `warning` and `danger`
94+
- `<Icon />`
95+
- removed `description` and `iconTitle` properties
96+
- `<OverviewItemList />`
97+
- `densityHigh` property was removed
98+
- `<CodeEditor />`
99+
- static fallback for test id `codemirror-wrapper` was removed, add `data-test-id` (or your test id data attribute) always directly to `CodeEditor`.
100+
- `<EdgeDefault />`
101+
- removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
102+
- `<Spinner />`
103+
- `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
104+
- `nodeTypes` and `edgeTypes` exports were removed
105+
- use `<ReactFlow />` with `configuration`, or define it yourself
106+
- SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
107+
- use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
108+
- Removed `remark-typograf` plugin from `<Markdown />` rendering to maintain display expectation
109+
110+
### Fixed
111+
112+
- `<CodeAutocompleteField />`:
113+
- In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).
114+
115+
### Changed
116+
117+
- `<EdgeDefault />` and `<EdgeStep />`
118+
- support now v9 and v12 of react flow
119+
- `<ReactFlowExtended />`
120+
- use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
121+
- `<Spinner />`
122+
- `color` property does not accept `intent` values anymore
123+
- `<OverflowText />`
124+
- beside explicitly specified properties it allows only basic HTML element properties and testing IDs
125+
- overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
126+
- `<SuggestField />`
127+
- Always add class 'nodrag' to popover content element to always prevent dragging of react-flow and dnd-kit elements when interacting with the component.
128+
- `utils.getColorConfiguration()` works with CSS custom properties
129+
- property names returned by `getColorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
130+
- e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
131+
- `<Button />` and `<IconButton />`
132+
- `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
133+
- `<Spinner />`
134+
- `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
135+
- icons: arrow directions for `list-sortasc` and `list-sortdesc` were switched, up arrow is now used for ascending sort
136+
137+
### Deprecated
138+
139+
- support for React Flow v9 will be removed in v26
140+
- `<EdgeDefs />`
141+
- use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
23142

24143
## [24.4.1] - 2025-08-25
25144

@@ -129,6 +248,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
129248

130249
### Changed
131250

251+
- `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
252+
- react flow integration by renaming their resources from `legacy` and `next` to more precise `v9` and `v10`:
253+
- `HandleProps`: renamed to `HandleV9Props`
254+
- `HandleNextProps`: renamed to `HandleV10Props`
255+
- if provided then the `flowVersion` property do not accept `legacy` and `next` as values anymore, use `v9` and `v10`
132256
- some more interfaces are exposed:
133257
- `IntentBlueprint`: BlueprintJS intent types, also available by `DefinitionsBlueprint`
134258
- `TableDataContainerProps`, `TableSimpleContainerProps`, `TableHeadProps`, `TableBodyProps`, `TableExpandedRowProps`, `TableHeaderProps` and `DataTableRenderProps` as interfaces for diverse table components
@@ -151,6 +275,18 @@ Old bundlers like webpack4 do not support the `exports` field from `package.json
151275

152276
If you use Jest then you can use the same aliases for the `moduleNameMapper` config, if necessary.
153277

278+
### Deprecated
279+
280+
- `HandleV9Props` and `HandleV10Props` export will be removed, use only `HandleDefaultProps`
281+
- `<NodeContent />`
282+
- `businessDate`: will be removed because it is already not used
283+
- `<ReactFlow />`: use `<ReactFlowExtended />`
284+
285+
### Migration from v24 to v25
286+
287+
- 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 v24.\* changelogs.
288+
- we changed the integration of the supported react flow versions, formerly names `legacy` and `next` resources were renamed to more precise `v9` and `v10`, please see all info in the section about changes
289+
154290
## [24.1.0] - 2025-04-16
155291

156292
### Added
@@ -223,6 +359,8 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
223359
- use always `<Label/>` component for `label` value
224360
- `<StickyNoteNode />`
225361
- Refactored data structure position and dimension (breaking change)
362+
- `<MiniMap />`
363+
- component supports now React Flow v9 and v12
226364

227365
### Deprecated
228366

@@ -422,8 +560,6 @@ This is a major release, and it might be not compatible with your current usage
422560
- `<MultiSuggestField />`
423561
- Updated the interface with the ability to use either `selectedItems` or `prePopulateWithItems` properties, which is more logical.
424562
- Fixed deferred `selectedItems` setting.
425-
- `<StickyNoteModal/>`
426-
- static test id `data-test-id="sticky-note-modal"` will be removed with next major version
427563
- `<BreadcrumbsList />`
428564
- `onItemClick` handler is only executed if breadcrumb has `href` set because this is one callback parameter and the handler would not have any information otherwise
429565
- `<Depiction />`
@@ -450,6 +586,8 @@ This is a major release, and it might be not compatible with your current usage
450586

451587
- `<TextArea />`
452588
- `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties: use the `intent` property instead.
589+
- `<StickyNoteModal/>`
590+
- static test id `data-test-id="sticky-note-modal"` will be removed with next major version
453591

454592
## [23.6.0] - 2024-04-17
455593

README.md

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,69 @@ yarn add --dev @types/carbon-components-react
2828

2929
### Configuration
3030

31-
All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main changes you should need to change only a few parameters:
32-
33-
- Basic colors
34-
- `$eccgui-color-primary`: color for very important buttons and switches
35-
- `$eccgui-color-primary-contrast`: readable text color used on primary color areas
36-
- `$eccgui-color-accent`: color for most conformation buttons, links, etc
37-
- `$eccgui-color-accent-contrast`: readable text color used on accent color areas
38-
- `$eccgui-color-applicationheader-text`
39-
- `$eccgui-color-applicationheader-background`
40-
- `$eccgui-color-workspace-text`
41-
- `$eccgui-color-workspace-background`
42-
- Basic sizes
43-
- `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
44-
- `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
45-
- `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
46-
- `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
31+
All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main properties you should need to change only a few parameters
32+
33+
#### Colors
34+
35+
Since v25 we use a color palette as basic foundation for color configurations. The palette is defined in 4 sections containing various color tints, each tint includes 5 different weights from 100 (light color) to 900 (dark color).
36+
37+
The default palette can be overwritten if it is defined before the configuration or full library is imported to your Sass styles. The palette need to be defined entirely, we currently don't support overwriting it partly.
38+
39+
```
40+
$eccgui-color-palette-light: (
41+
"identity": (
42+
"brand": #fae1cc #f8cd99 #f6b966 #f4a533 #f29100,
43+
"accent": #e5f4fb #aecfe3 #77abca #4186b2 #0a6199,
44+
"text": #f8f8f8 #bcbcbc #818181 #434343 #090909,
45+
"background": #fff #e8e8e8 #d6d6d6 #d4d4d4 #d3d3d3,
46+
),
47+
"semantic": (
48+
"info": #e5f4fb #aecfe3 #77aaca #4086b2 #096199,
49+
"success": #e8f5e9 #b2c6b4 #7c967e #466749 #103713,
50+
"warning": #fff3e0 #fad2b3 #f5b287 #f0915a #eb702d,
51+
"danger": #fff5f6 #edbfc0 #db8989 #c95253 #b71c1c,
52+
),
53+
"layout": (
54+
"yellow": #fff6d5 #f1ecb5 #e3db79 #d4c93c #c1a500,
55+
"purple": #f4ddf3 #c8a2d1 #9d6eb8 #71378f #480e75,
56+
"magenta": #ffd8e8 #f5a6c3 #e276a4 #be4c80 #59122d,
57+
"pink": #fde4f1 #e6b4ce #d08aae #bb5f8e #711c4d,
58+
"violet": #f4e3f4 #d8b0d8 #b377b3 #904490 #570057,
59+
"indigo": #efe4fb #b89ee0 #8f72c5 #6547aa #3b1e8f,
60+
"cyan": #dff9fc #86d6e5 #5abfd4 #2da9c4 #0092b3,
61+
"teal": #d4f2ec #a3ddd3 #6dc0b2 #479d8d #104c42,
62+
"lime": #cde0d6 #bce3c2 #9dcd99 #7ba66c #87b347,
63+
"amber": #ffe7b8 #ffe9c4 #f9cd8d #eeb757 #ef8f00,
64+
"vermilion": #ffd8cc #e4c4ba #b27a6b #8c4b3a #651c09,
65+
"grey": #f5f6f7 #b7b7b7 #808080 #484848 #1c2329,
66+
),
67+
"extra": (
68+
"gold": #fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b,
69+
"silver": #f0f0f0 #dedede #ccc #bababa #a8a8a8,
70+
"bronze": #fbe9db #f2d6bc #eac29d #e1af7e #d89b5f,
71+
),
72+
);
73+
```
74+
75+
All palette colors will be transformed into CSS custom properties automatically and can be referenced by name scheme `--eccgui-color-palette-{groupname}-{colortint}-{colorweight}`, e.g. `--eccgui-color-palette-identity-brand-100`.
76+
77+
All other colors are based on the palette but it is still possible to set them before the default values are used by importing the configuration or the full library.
78+
79+
- `$eccgui-color-primary`: color for very important buttons and switches
80+
- `$eccgui-color-primary-contrast`: readable text color used on primary color areas
81+
- `$eccgui-color-accent`: color for most conformation buttons, links, etc
82+
- `$eccgui-color-accent-contrast`: readable text color used on accent color areas
83+
- `$eccgui-color-applicationheader-text`
84+
- `$eccgui-color-applicationheader-background`
85+
- `$eccgui-color-workspace-text`
86+
- `$eccgui-color-workspace-background`
87+
88+
#### Sizes
89+
90+
- `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
91+
- `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
92+
- `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
93+
- `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
4794

4895
## Development
4996

package.json

Lines changed: 6 additions & 5 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",
@@ -73,6 +73,7 @@
7373
"@blueprintjs/select": "^5.3.19",
7474
"@carbon/icons": "^11.58.0",
7575
"@carbon/react": "^1.80.1",
76+
"@codemirror/lang-html": "^6.4.9",
7677
"@codemirror/lang-javascript": "^6.2.3",
7778
"@codemirror/lang-json": "^6.0.1",
7879
"@codemirror/lang-markdown": "^6.3.2",
@@ -86,18 +87,17 @@
8687
"codemirror": "^6.0.1",
8788
"color": "^4.2.3",
8889
"compute-scroll-into-view": "^3.1.1",
90+
"he": "^1.2.0",
8991
"jshint": "^2.13.6",
9092
"lodash": "^4.17.21",
9193
"n3": "^1.25.1",
9294
"re-resizable": "^6.10.3",
9395
"react": "^16.13.1",
9496
"react-dom": "^16.14.0",
9597
"react-flow-renderer": "9.7.4",
96-
"react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
9798
"react-inlinesvg": "^3.0.3",
9899
"react-is": "^16.13.1",
99100
"react-markdown": "^10.1.0",
100-
"react-markdown-deprecated": "npm:react-markdown@^8.0.7",
101101
"react-syntax-highlighter": "^15.6.1",
102102
"rehype-external-links": "^3.0.0",
103103
"rehype-raw": "^7.0.0",
@@ -135,6 +135,7 @@
135135
"@testing-library/react": "^12.1.5",
136136
"@types/codemirror": "^5.60.15",
137137
"@types/color": "^3.0.6",
138+
"@types/he": "^1.2.3",
138139
"@types/jest": "^29.5.14",
139140
"@types/jshint": "^2.12.4",
140141
"@types/lodash": "^4.17.16",
@@ -151,8 +152,8 @@
151152
"eslint-plugin-simple-import-sort": "^12.1.1",
152153
"husky": "4",
153154
"identity-obj-proxy": "^3.0.0",
154-
"jest": "^30.0.5",
155-
"jest-environment-jsdom": "^30.0.5",
155+
"jest": "^30.2.0",
156+
"jest-environment-jsdom": "^30.2.0",
156157
"jest-pnp-resolver": "^1.2.3",
157158
"lint-staged": "^15.5.1",
158159
"node-sass-package-importer": "^5.3.3",

src/_shame.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,6 @@ textarea:focus-visible {
5151
}
5252

5353
:focus-visible {
54-
outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
54+
outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
5555
outline-offset: 1px;
5656
}

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.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import { Blockquote } from "@blueprintjs/core";
32
import { Meta, StoryFn } from "@storybook/react";
43

54
import { Markdown } from "./../../../index";

0 commit comments

Comments
 (0)