Releases · eccenca/gui-elements

13 Apr 11:54

github-actions

v25.1.0

a6610a7

v25.1.0 Latest

Latest

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.1.0
Storybook: https://62150dbccb2d77003a2a5093-yllzyjdntj.chromatic.com/

Added

<ActivityControlWidget />
- Add parameter active to activity control action to set the active state of its button.
- action now can have a active and notification property
<ApplicationViewability />
- component for hiding elements in specific media
<InlineText />
- force children to get displayed as inline content
<DecoupledOverlay />
- similar to ContextOverlay component but not directly linked to a React element, it specifies the target in the DOM to get connected lazy
<StringPreviewContentBlobToggler />
- useOnly property: specify if only parts of the content should be used for the shortened preview, this property replaces firstNonEmptyLineOnly
<ContextOverlay />
- paddingSize property to add easily some white space
<CodeEditor />
- toolbar in markdown mode provides a user config menu for the editor appearance
<RadioButton />
- hideIndicator property: hide the radio inout indicator but click on children can be processed via onChange event
<ColorField />
- input component for colors
- uses a subset from the configured color palette by default, but it also allows to enter custom colors
<MultiSuggestField />
- MultiSuggestFieldSelectionProps provides newlyRemoved for callbacks set when removing a selected item
<HtmlContentClock />
- inline code uses same gray background highlighting like code blocks
CSS custom properties
- beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
new icons:
- state-confirmed-all
- state-declined-all
- data-sourceschema
- data-targetschema
- operation-ai-generate
- operation-filterreset
- toggler-pin-empty
- toggler-pin-filled

Fixed

<Tag />
- create more whitespace inside small tag
- reduce visual impact of border
<StringPreviewContentBlobToggler />
- take Markdown rendering into account before testing the maximum preview length
<CodeEditor />
- fix disabled property update
<VisualTour />
- fix color of buttons to move to previous/next step
- take Markdown rendering into account before testing the maximum preview length
<NodeContent />
- header-menu items are vertically centered now
<Link />
- stabilize font size for on hover state
- use correct font sizes when size property is set
Typography
- adjust displaying fallback symbols in different browsers
<CodeMirror />
- use the latest provided onChange function
<TextField />, <TextArea />
- fix emoji false-positives in invisible character detection
<MultiSuggestField />
- onSelection now sets newlySelected only for add actions and no longer sets it to the last element
- border of the BlueprintJS Tag elements were fixed
<Modal />
- fix specificity for pointer-events rules on SVG
<Button />
- badge is correctly displayed when badge={0}
Focus outlines
- we use again bold focus outlines for input elements
- they are also used for clickable elements that are focused via keyboard (tab navigation)

Changed

<MultiSelect />:
- Change default filter predicate to match multi-word queries.
<EdgeDefault />
- reduce stroke width to only 1px
<CodeMirror />
- wrapLines and preventLineNumber do not use false default value but if not set then it will be interpreted as false
- in this way it can be overwritten by new user config for the markdown mode
automatically hide user interaction elements in print view
- all application header components except <WorkspaceHeader />
- <CardActions /> and <CardOptions />
- actionOptions of <ContentGroup />
- actions of <Notification />
- <OverviewItemActions />
automatically serialize display of layout elements in print view
- <FlexibleLayoutItem />
- <GridColumn />
- <PropertyName /> and <PropertyValue />

Deprecated

<StringPreviewContentBlobToggler />
- firstNonEmptyLineOnly will be removed, is replaced by useOnly="firstNonEmptyLine"

Assets 2

01 Apr 11:11

github-actions

v25.1.0-rc.4

a490e44

v25.1.0-rc.4 Pre-release

Pre-release

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.1.0-rc.4
Changelog: https://github.com/eccenca/gui-elements/blob/v25.1.0-rc.4/CHANGELOG.md#unreleased

Assets 2

25 Mar 16:00

github-actions

v25.1.0-rc.3

a91d5c0

v25.1.0-rc.3 Pre-release

Pre-release

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/25.1.0-rc.3
Changelog: https://github.com/eccenca/gui-elements/blob/v25.1.0-rc.3/CHANGELOG.md#unreleased

Assets 2

17 Mar 17:17

github-actions

v25.1.0-rc.2

806b1e6

v25.1.0-rc.2 Pre-release

Pre-release

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

Assets 2

10 Mar 13:27

github-actions

v25.1.0-rc.1

f4961a4

v25.1.0-rc.1 Pre-release

Pre-release

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

Assets 2

24 Feb 10:02

github-actions

v25.1.0-rc.0

8a670e6

v25.1.0-rc.0 Pre-release

Pre-release

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

Assets 2

01 Dec 10:50

github-actions

v25.0.0

7d1d5db

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