Skip to content

Commit 70ade27

Browse files
Merge branch 'next' into feature/keyValueParameterType-CMEM-6277
2 parents eab7825 + 416dbaf commit 70ade27

114 files changed

Lines changed: 5035 additions & 2325 deletions

File tree

Some content is hidden

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

.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: 113 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,118 @@ This is a major release, and it might be not compatible with your current usage
1010

1111
### Added
1212

13-
- Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `<CodeAutocompleteField />`
14-
- `<CodeAutocompleteField />:
15-
- outerDivAttributes parameter: Allows to set parameter of the container div element of the code complete field.
13+
- `<EdgeStraight />`
14+
- it's basically `<EdgeDefault />` without any special configs
15+
- `<EdgeBezier />`
16+
- only supported for v12, in v9 as straight edge is used
17+
- use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
18+
- `<EdgeDefaultV12 />`
19+
- the `data` object provides `markerAppearance` to set and remove the edge arrows
20+
- `<EdgeNew />`
21+
- component for React Flow v12, displaying new connection lines
22+
- `<VisualTour />`
23+
- component to display a visual tour multi-step tour of the current view
24+
- new color palette that includes 4 sections with 20+ color tints in 5 weights each
25+
- indentity, semantic, layout, extra
26+
- managed via CSS custom properties
27+
- see `README.md` for inf about usage
28+
- SCSS color functions
29+
- `eccgui-color-var`: returns a var of a custom property used for palette color
30+
- `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
31+
- `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
32+
- `colorCalculateDistance()`
33+
- function to calculate the difference between 2 colors using the simple CIE76 formula
34+
- `textToColorHash()`
35+
- function to calculate a color from a text string
36+
- new icons
37+
- `artefact-task-sqlupdatequeryoperator`
38+
- `artefact-task-customsqlexecution`
39+
40+
### Removed
41+
42+
- support for React Flow v10 was completely removed
43+
44+
### Fixed
45+
46+
- `<Modal />`:
47+
- 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.
48+
49+
### Changed
50+
51+
- `<EdgeDefault />` and `<EdgeStep />`
52+
- support now v9 and v12 of react flow
53+
- `<ReactFlowExtended />`
54+
- use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
55+
- overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
56+
- `getColorConfiguration()` works with CSS custom properties
57+
58+
### Deprecated
59+
60+
- support for React Flow v9 will be removed in v26
61+
- `<EdgeDefs />`
62+
- use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
63+
- property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
64+
- e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
65+
66+
## [24.4.1] - 2025-08-25
67+
68+
### Fixed
69+
70+
- React flow v12:
71+
- add missing styles from react flow library to ensure proper functionality of new connection lines
72+
- `<Tooltip />`
73+
- re-check hover state after swapping the placeholder before triggering the event bubbling
74+
75+
### Changed
76+
77+
- `<IconButton/>`
78+
- increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
79+
- `IntentBaseTypes` now available via root export
80+
- some `intent` properties support less or more intent types, in case you need to test supported types before, then you can use it directly from the component interface, e.g. `TextFieldProps["intent"]`
81+
82+
### Added
83+
84+
- `application-colors` and `data-color` icons, both represented by the Carbon `ColorPalette` icon
85+
86+
## [24.3.1] - 2025-08-21
87+
88+
### Fixed
89+
90+
- React flow v12:
91+
- add missing styles from react flow library to ensure proper functionality of new connection lines
92+
93+
## [24.4.0] - 2025-08-07
94+
95+
### Added
96+
97+
- `<ExtendedCodeEditor />`
98+
- `height` and `readOnly` properties to forward them to `<CodeEditor/>`
99+
- `<CodeAutocompleteField />`:
100+
- `outerDivAttributes` property: allows to set parameter of the container element
101+
- `height` and `readOnly` properties to forward them to `<ExtendedCodeEditor/>`
102+
- `<ActivityControlWidget />`
103+
- `additionalActions` property to include other more complex components between the action buttons and the context menu of the widget
104+
- `<Tooltip />`
105+
- `swapPlaceholderDelay` property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component
106+
107+
### Fixed
108+
109+
- `<CodeEditor />`
110+
- Editor is re-created after certain property changes and is reset, i.e. loses it current state.
111+
- Enter key handling (adding new line) was broken when `onKeyDown` is defined.
112+
- `<CodeAutocompleteField />`
113+
- First auto-completion item not marked as active when drop down first shown.
114+
- Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button.
115+
116+
### Changed
117+
118+
- `<NodeContent />`
119+
- prevent start of a react flow drag action of a node when user clicks in the node menu section
120+
121+
### Deprecated
122+
123+
- `<CodeEditor />`
124+
- `onChange` property: support for `(v: any) => void` type will be exchanged to more specific `(v: string) => void`
16125

17126
## [24.3.0] - 2025-06-05
18127

@@ -98,7 +207,7 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
98207

99208
### Migration from v24 to v25
100209

101-
- 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.
210+
- 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.
102211
- 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
103212

104213
## [24.1.0] - 2025-04-16

README.md

Lines changed: 64 additions & 17 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

@@ -125,7 +172,7 @@ After you tested the GUI elements package locally you can Clean up your applicat
125172
3. Pull request from release branch into `main` need to be approved
126173
- then ["Publish: final release "](https://github.com/eccenca/gui-elements/actions/workflows/publish-final-release.yml) can be used on `main` (or `next` and `legacy`) to publish final release packages
127174
- another PR is automatically created for changes done during publishing process
128-
175+
129176
## License
130177

131178
Apache License, Version 2.0, January 2004

package.json

Lines changed: 4 additions & 4 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.3.0",
4+
"version": "24.4.1",
55
"license": "Apache-2.0",
66
"homepage": "https://github.com/eccenca/gui-elements",
77
"bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -79,6 +79,7 @@
7979
"@codemirror/lang-sql": "^6.8.0",
8080
"@codemirror/lang-xml": "^6.1.0",
8181
"@codemirror/lang-yaml": "^6.1.2",
82+
"@codemirror/lang-html": "^6.4.9",
8283
"@codemirror/legacy-modes": "^6.5.0",
8384
"@mavrin/remark-typograf": "^2.2.0",
8485
"@xyflow/react": "^12.6.0",
@@ -93,7 +94,6 @@
9394
"react": "^16.13.1",
9495
"react-dom": "^16.13.1",
9596
"react-flow-renderer": "9.7.4",
96-
"react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
9797
"react-inlinesvg": "^3.0.3",
9898
"react-markdown": "^10.1.0",
9999
"react-markdown-deprecated": "npm:react-markdown@^8.0.7",
@@ -149,8 +149,8 @@
149149
"eslint-plugin-simple-import-sort": "^12.1.1",
150150
"husky": "4",
151151
"identity-obj-proxy": "^3.0.0",
152-
"jest": "^29.7.0",
153-
"jest-environment-jsdom": "^29.7.0",
152+
"jest": "^30.0.5",
153+
"jest-environment-jsdom": "^30.0.5",
154154
"jest-pnp-resolver": "^1.2.3",
155155
"lint-staged": "^15.5.1",
156156
"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/ActivityControl/ActivityControlWidget.stories.tsx

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
import React from "react";
1+
import React, { useMemo, useState } from "react";
22
import { loremIpsum } from "react-lorem-ipsum";
3+
import { OverlaysProvider } from "@blueprintjs/core";
34
import { Meta, StoryFn } from "@storybook/react";
45

56
import { helpersArgTypes } from "../../../.storybook/helpers";
6-
import { ActivityControlWidget, Tag, TagList } from "../../../index";
7+
import {
8+
ActivityControlWidget,
9+
ActivityControlWidgetAction,
10+
IconButton,
11+
SimpleDialog,
12+
Tag,
13+
TagList,
14+
} from "../../../index";
715

816
export default {
917
title: "Cmem/ActivityControlWidget",
@@ -19,7 +27,7 @@ const Template: StoryFn<typeof ActivityControlWidget> = (args) => <ActivityContr
1927

2028
export const FullExample = Template.bind({});
2129

22-
const actions = [
30+
const actions: ActivityControlWidgetAction[] = [
2331
{
2432
"data-test-id": "activity-reload-activity",
2533
icon: "item-reload",
@@ -30,13 +38,15 @@ const actions = [
3038
{
3139
"data-test-id": "activity-start-activity",
3240
icon: "item-start",
41+
// eslint-disable-next-line no-console
3342
action: () => console.log("start"),
3443
tooltip: "Start Activity",
3544
disabled: false,
3645
},
3746
{
3847
"data-test-id": "activity-stop-activity",
3948
icon: "item-stop",
49+
// eslint-disable-next-line no-console
4050
action: () => console.log("cancel"),
4151
tooltip: "Stop Activity",
4252
disabled: false,
@@ -57,8 +67,8 @@ const commonWidgetArgs = {
5767
progressSpinner: {
5868
intent: "none",
5969
value: 0.5,
60-
},
61-
};
70+
} as const,
71+
} as const;
6272

6373
FullExample.args = {
6474
...commonWidgetArgs,
@@ -80,3 +90,33 @@ WidgetWithTags.args = {
8090
...commonWidgetArgs,
8191
tags: widgetTags,
8292
};
93+
94+
export const WidgetWithAdditionalActions: StoryFn<typeof ActivityControlWidget> = (args) => {
95+
const [isOpen, setIsOpen] = useState(false);
96+
97+
const params = useMemo(
98+
() => ({
99+
...commonWidgetArgs,
100+
...args,
101+
additionalActions: args.additionalActions ?? [
102+
<IconButton name="application-explore" onClick={() => setIsOpen(true)} />,
103+
],
104+
}),
105+
[]
106+
);
107+
108+
return (
109+
<OverlaysProvider>
110+
<ActivityControlWidget {...params} />
111+
<SimpleDialog
112+
title="Additional actions dialog"
113+
isOpen={isOpen}
114+
onClose={() => setIsOpen(false)}
115+
canOutsideClickClose
116+
canEscapeKeyClose
117+
>
118+
Modal content
119+
</SimpleDialog>
120+
</OverlaysProvider>
121+
);
122+
};

0 commit comments

Comments
 (0)