v25.0.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.0.0
• Storybook: https://62150dbccb2d77003a2a5093-qoekbjvupt.chromatic.com/

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 />
  • displays single chat contents in a bubble, including options to add status line and avatar
• <ChatContentCollapsed />
  • can collapse (and expand) <ChatContent /> automatically for convenience
• <ChatField />
  • let the user input texts, calls onSubmit handler on enter key and submit button
• <ChatArea />
  • combine a list of chat contents and user input box
• <TextReducer />
  • reduces HTML to simple text and can display it as one ellipsed line
• <Tooltip />
  • prove useage of usePlaceholder by jest test coverage
• <EdgeStraight />
  • it's basically <EdgeDefault /> without any special configs
• <EdgeBezier />
  • only supported for v12, in v9 as straight edge is used
  • use curvature property in the edge data object to define the bezier layout (0..1, default: 0.25)
• <EdgeDefaultV12 />
  • the data object provides markerAppearance to set and remove the edge arrows
• <EdgeDefault />
  • introduced the new arrowDirection property, including support for bidirectional edges - supported only for <EdgeDefaultV12 />
• <EdgeNew />
  • component for React Flow v12, displaying new connection lines
• <VisualTour />
  • component to display a visual tour multi-step tour of the current view
• <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
• 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 />
  • removed support for old state properties hasStatePrimary, hasStateSuccess, hasStateWarning and hasStateDanger
• <Notification />
  • removed support for old state properties neutral, success, warning and danger
• <Icon />
  • removed description and iconTitle properties
• <OverviewItemList />
  • 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.
• <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

• <CodeAutocompleteField />:
  • In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).

Changed

• <EdgeDefault /> and <EdgeStep />
  • support now v9 and v12 of react flow
• <ReactFlowExtended />
  • use <EdgeNew /> by default for new connection lines, you can overwrite it by setting connectionLineComponent to undefined
• <Spinner />
  • color property does not accept intent values anymore
• <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
• <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 />

v25.0.0-rc.2

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.0.0-rc.2
• Changelog: https://github.com/eccenca/gui-elements/blob/v25.0.0-rc.2/CHANGELOG.md#unreleased

v25.0.0-rc.1

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.0.0-rc.1
• Changelog: https://github.com/eccenca/gui-elements/blob/v25.0.0-rc.1/CHANGELOG.md#unreleased

v25.0.0-rc.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.0.0-rc.0
• Changelog: https://github.com/eccenca/gui-elements/blob/v25.0.0-rc.0/CHANGELOG.md#unreleased

v24.4.1

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.4.1
• Storybook: https://62150dbccb2d77003a2a5093-nrruohraue.chromatic.com/

Fixed

• React flow v12:
  • add missing styles from react flow library to ensure proper functionality of new connection lines
• <Tooltip />
  • re-check hover state after swapping the placeholder before triggering the event bubbling

Changed

• <IconButton/>
  • increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
• IntentBaseTypes now available via root export
  • 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"]

Added

• application-colors and data-color icons, both represented by the Carbon ColorPalette icon

v24.3.1

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.3.1
• Storybook: https://62150dbccb2d77003a2a5093-yyfhokviec.chromatic.com/

Fixed

• React flow v12:
  • add missing styles from react flow library to ensure proper functionality of new connection lines

v24.3.1-rc.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.3.1-rc.0
• Changelog: https://github.com/eccenca/gui-elements/blob/v24.3.1-rc.0/CHANGELOG.md#unreleased

v24.4.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.4.0
• Storybook: https://62150dbccb2d77003a2a5093-kepujteqiu.chromatic.com/

Added

• <ExtendedCodeEditor />
  • height and readOnly properties to forward them to <CodeEditor/>
• <CodeAutocompleteField />:
  • outerDivAttributes property: allows to set parameter of the container element
  • height and readOnly properties to forward them to <ExtendedCodeEditor/>
• <ActivityControlWidget />
  • additionalActions property to include other more complex components between the action buttons and the context menu of the widget
• <Tooltip />
  • swapPlaceholderDelay property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component

Fixed

• <CodeEditor />
  • Editor is re-created after certain property changes and is reset, i.e. loses it current state.
  • Enter key handling (adding new line) was broken when onKeyDown is defined.
• <CodeAutocompleteField />
  • First auto-completion item not marked as active when drop down first shown.
  • 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.

Changed

• <NodeContent />
  • prevent start of a react flow drag action of a node when user clicks in the node menu section

Deprecated

• <CodeEditor />
  • onChange property: support for (v: any) => void type will be exchanged to more specific (v: string) => void

v24.3.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.3.0
• Storybook: https://62150dbccb2d77003a2a5093-tgrptcueay.chromatic.com/

Added

• added support for React Flow v12
  • <NodeContent /> can used with flowVersion="v12"
  • more v12-only components: EdgeDefaultV12, NodeDefaultV12, EdgeDefs
    • they may be removed in future version when v12 elements are available direcly via <EdgeDefault /> and <NodeDefault />

Deprecated

• <EdgeDefaultV12 /> and <NodeDefaultV12 /> will be removed when React Flow v12 is supported directly by <EdgeDefault /> and <NodeDefault />
• flowVersion: legacy and next will be removed/replaced by v## values

v24.2.0

• NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/24.2.0
• Storybook: https://62150dbccb2d77003a2a5093-bgjgsuvrsq.chromatic.com/

Added

• <ContextOverlay />
  • usePlaceholder property: can be used to display the target but include the component later when the first interaction happens, this can improve performance
• <ContextMenu />
  • preventPlaceholder property to prevent the default usage of placeholders waiting for the first user interaction before inserting the full context menu
• <Tooltip />
  • usePlaceholder property: can be used to display the target but include the full component later when the first interaction happens, this can improve performance. It is turned on for text tooltips by default.
• <OverviewItemActions />
  • delayDisplayChildren property: set a time (in ms) to delay the actual rendering of elements inside the actions container. When enabled the containing OverviewItem can be displayed faster. Can be used e.g. to boost performance when rendering OverviewItemActions with hiddenInteractions set to true.
  • delaySkeleton property to set the placeholder/skeleton as long as the delayed display is waiting to get processed
• <Button />, <FieldItem />, <FieldSet />, <Notification />, <Spinner />
  • intent property: align intent state usage with other components

Deprecated

• <Markdown />
  • reHypePlugins property now use PluggableList from the unified package. This may require changes if you previously used plugins not conforming to the stricter unified typings. Backward compatibility with the old plugin list type will be removed in the next major version.
• <FieldSet />, <FieldItem />, <MultiSelect />, <Button />
  • hasStatePrimary, hasStateSuccess, hasStateWarning and hasStateDanger properties will be removed, use intent property instead
• <Notification />
  • neutral, success, warning and danger properties will be removed, use intent property instead
• <MultiSelect />
  • data-test-id for clearance button won't be set automatically, only if a test id for MultiSelect is given

Fixed

• <CodeAutocompleteField /> and <AutoSuggestion />:
  • Error highlighting is always visible by underlining the respective text

Changed

• some more interfaces are exposed:
  • IntentBlueprint: BlueprintJS intent types, also available by DefinitionsBlueprint
  • TableDataContainerProps, TableSimpleContainerProps, TableHeadProps, TableBodyProps, TableExpandedRowProps, TableHeaderProps and DataTableRenderProps as interfaces for diverse table components
• <CodeAutocompleteField />
  • memorize handleChange handler to prevent unwanted re-renders

Usage with old application bundlers

Old bundlers like webpack4 do not support the exports field from package.json, so it cannot resolve the correct files that need to be imported from the packages if they do not come with alternate configs like modules or main. Our latest markdown update introduced a few of those packages. So you need to extend your aliases (in webpack4 it is managed in config.resolve.alias) like:

{
    "devlop": "devlop/lib/default.js",
    "unist-util-visit-parents/do-not-use-color": "unist-util-visit-parents/lib/color.js",
    "vfile/do-not-use-conditional-minpath": "vfile/lib/minpath.browser.js",
    "vfile/do-not-use-conditional-minproc": "vfile/lib/minproc.browser.js",
    "vfile/do-not-use-conditional-minurl": "vfile/lib/minurl.browser.js",
}

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