v23.4.2-rc.0

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.4.2-rc.0
Storybook:

Fixed

• <Depiction />
  • images representing SVG without width property on their root element are displayed with a minimal forced dimension to prevent that they are hidden in some browsers

v23.4.1

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

Fixed

• icons
  • use older version of icon library to prevent typescript issues after changes in recent versions

v23.4.0

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

Added

• <PropertyValuePair />, <PropertyName />, <PropertyValue />
  • nowrap: force display on one line without breaks
• <Skeleton />
  • provides a loading state display of its children elements
• <TableCell />
  • alignHorizontal: allow to center cell contents
• <ActivityControlWidget />
  • added extra line to show timer for execution period
• <ExtendedCodeEditor />
  • replaces <SingleLineCodeEditor /> to get used for the <AutoSuggestion /> component
• new icons
  • data-string, data-date, data-time, data-datetime, data-number

Fixed

• <Pagination />
  • adjust color of arrow in disabled navigation button

v23.4.0-rc.0

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.4.0-rc.0
Storybook:

Added

• <PropertyValuePair />, <PropertyName />, <PropertyValue />
  • nowrap: force display on one line without breaks
• <Skeleton />
  • provides a loading state display of its children elements
• <TableCell />
  • alignHorizontal: allow to center cell contents

Fixed

• <Pagination />
  • adjust color of arrow in disabled navigation button

v23.3.1

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

Fixed

• <ContextOverlay />
  • remove always white space at start of portalClassName to prevent runtime error in BlueprintJS

v23.3.1-rc.2

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.3.1-rc.2
Storybook:

Fixed

• <ContextOverlay />
  • remove always white space at start of portalClassName to prevent runtime error in BlueprintJS

v23.3.1-rc.1

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.3.1-rc.1
Storybook:

Fixed

• <ContextOverlay />
  • remove always white space at start of portalClassName to prevent runtime error in BlueprintJS

v23.3.1-rc.0

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.3.1-rc.0
Storybook:

Fixed

• <ContextOverlay />
  • remove always white space at start of portalClassName to prevent runtime error in BlueprintJS

v23.3.0

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

Added

• <PropertyName />
  • labelProps: configure the automatically injected Label element when PropertyName is only a string
• <TextField />
  • escapeToBlur: if set to true the input field blurs/de-focuces when the Escape key is pressed.
• <CodeEditor />
  • support for additional modes: jinja2, yaml and json
  • add read-only mode
  • height: set a fixed height of the editor
  • wrapLines: control auto-wrapping long lines (the default for wrap long lines is set to false now)
• <Modal />
  • modalFocusable: when true the outer div element of the modal can be focused by clicking on it.
    This is needed e.g. when key (down, up) events should trigger on the modal in order to bubble up to its parent elements.
  • forceTopPosition: when true then the z-index of the modal's portal element is recalculated, so that the modal is always displayed on top of all other visible elements. Use with care, see documentation.
• <ContextOverlay />
  • preventTopPosition: when true then the z-index is decreased to the value for modals. Use it when you need to display modal dialogs out of the context overlay. Type of counter property to Modal.forceTopPosition.
• <ReactFlow />
  • support disabling the react-flow hot keys via a React context, e.g. Delete etc.
• <HandleDefault />
  • new category options that lead to different handle layouts: dependency, fixed, flexible and unknown
  • intent option with defined colors for: primary, accent, info, success, warning, danger
• <HandleTools />
  • can be used as single handle content to add an context menu to handles
• <NodeContent />
  • introductionTime: can be used to visualize the node was added or updated
• <EdgeLabel />
  • loose: can be set to true to prevent the box with border on the label component
• <TableExpandHeader />
  • toggleIcon: optional icon that should be displayed instead of the default ones.
• Utilities
  • getGlobalVar and setGlobalVar: can be used to manage global variables indepentently from component states. They are stored to the window object under a eccgui "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!
• canonical icons for artefact-chatlog, entity-human, entity-robot and operation-magic

Changed

• <SimpleDialog />
  • by default, prevent certain (React) events from bubbling up through the dialog (backdrop is not affected):
    • event handler: onContextMenu, onDrag, onDragStart, onDragEnd, onMouseDown, onMouseUp, onClick
    • handlers can be overwritten via wrapperDivProps
• <ApplicationHeader />
  • it is now possible to overwrite the background color by setting --eccgui-appheader-color-background in its style attribute
• <Modal />
  • new xlarge size option
  • re-configure appearance of the sizes, small is displayed a bit smaller, large a bit larger than before

Fixed

• <Modal />
  • Escape key to close does not work anymore after clicking on the backdrop for canOutsideClickClose=false and canEscapeKeyClose=true.
• <Spacing />
  • allow other div attributes, e.g. style
• tooltips of Carbon based elements are displayed correctly in position and layout
• <PropertyValuePair />
  • force maximum width for situation when the block could be wider, e.g. inside a flex layout, otherwise name and value could be wrongly aligned in a list with other property value pairs

v23.3.0-rc.1

NPM package: https://www.npmjs.com/package/@eccenca/gui-elements/v/23.3.0-rc.1
Storybook:

Added

• <PropertyName />
  • provide labelProps to configure the automatically injected Label element when PropertyName is only a string
• <TextField />
  • Parameter escapeToBlur: If set to true the input field blurs/de-focuces when the Escape key is pressed.
• <CodeEditor />
  • support for additional modes: jinja2, yaml and json
  • add read-only mode
  • add height parameter to set a fixed height of the editor
  • add wrapLines option to control auto-wrapping long lines (the default for wrap long lines is set to false now)
• <Modal />
  • modalFocusable: when true the outer div element of the modal can be focused by clicking on it.
    This is needed e.g. when key (down, up) events should trigger on the modal in order to bubble up to its parent elements.
  • forceTopPosition: when true then the z-index of the modal's portal element is recalculated, so that the modal is always displayed on top of all other visible elements. Use with care, see documentation.
• <ReactFlow />
  • Support disabling the react-flow hot keys via a React context, e.g. Delete etc.
• <HandleDefault />
  • new category options that lead to different handle layouts: dependency, fixed, flexible and unknown
  • intent option with defined colors for: primary, accent, info, success, warning, danger
• <HandleTools />
  • can be used as single handle content to add an context menu to handles
• <NodeContent />
  • introductionTime parameter could be used to visualize the node was added or updated
• <EdgeLabel />
  • loose property can be set to true to prevent the box with border on the label component
• <TableExpandHeader />
  • toggleIcon: Optional icon that should be displayed instead of the default ones.
• Utilities
  • methods getGlobalVar and setGlobalVar can be used to manage global variables indepentently from component states. They are stored to the window object under a eccgui "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!

Changed

• <SimpleDialog />:
  • By default, prevent certain (React) events from bubbling up through the dialog (backdrop is not affected):
    • Event handler: onContextMenu, onDrag, onDragStart, onDragEnd, onMouseDown, onMouseUp, onClick
    • The handlers can be overwritten via wrapperDivProps.
• <ApplicationHeader />
  • it is now possible to overwrite the background color by setting --eccgui-appheader-color-background
• <Modal />
  • new xlarge size option
  • re-configure appearance of the sizes, small is displayed a bit smaller, large a bit larger than before

Fixed

• <Modal />
  • Escape key to close does not work anymore after clicking on the backdrop for canOutsideClickClose=false and canEscapeKeyClose=true.
• <Spacing />
  • allow other div attributes, e.g. style
• Tooltips of Carbon based elements display correctly in position and layout
• <PropertyValuePair />
  • force maximum width for situation when the block could be wider, e.g. inside a flex layout, otherwise name and value could be wrongly aligned in a list with other property value pairs