Skip to content

v25.0.0

Latest
Latest

Choose a tag to compare

View all tags
@github-actions github-actions released this 01 Dec 10:50
· 51 commits to develop since this release
v25.0.0
7d1d5db

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 />
Assets 2
Loading