v24.2.0-rc.2

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

v24.1.0

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

Added

• <CardActions />
  • noWrap property to display them without wrapping its children on multiple lines
• <ContentGroup /> component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
    • turtle and javascript are currently supported languages for linting
  • useToolbar property to display toolbar if the mode is supported
    • currently markdown mode is integrated, including support for headlines <h1-6>, <blockquote>, <code> block and inline, <b> bold, <i>, italic, <del> strike through, <ul>, <ol> and checkbox lists, <a> links and <img> images
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor
• <Label />
  • additionalElements property to display elements at the end of the label
  • inline property to display the label component as inline block
• <MenutItem />
  • tooltip property to dislay tooltip on menu item label
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <OverviewItem />
  • hasCardWrapper property to use a Card component as wrapper around it, simplifies the process to put it in a box, use cardProps to forward basic properties to that Card wrapper
• <SimpleDialog />
  • actionsProps property to forward CardActions properties, e.g. noWrap
• New icons:
  • artefact-task-concatenatetofile
  • artefact-task-pivot
  • artefact-task-unpivot
  • item-magic-edit
  • operation-format-text-code
  • operation-format-text-bold
  • operation-format-text-italic
  • operation-format-text-strikethrough
  • operation-format-list-bullet
  • operation-format-list-checked
  • operation-format-list-numbered

Fixed

• <CodeAutocompleteField />:
  • Code editor resets to initial value on every code editor instance re-init
• <CodeEditor />
  • re-render the component if the wrapLines property is changed after the component's render
  • only fire onChange event when the document has actually changed
• <OverviewItem />
  • whitespace after Depiction element when the OverviewItem ist used with densityHigh and hasSpacing
• <OverviewItemActions />
  • hiddenInteractions stay visible if they contain focused elements or opened overlays (e.g. context menus)
• <TagList />
  • do not create empty list items
• <SearchField />
  • allow to use onClearanceHandler and rightElement together
  • fix display of Icon with tooltipText as direct child in rightElement

Changed

• <ActivityControlWidget />
  • display running time after label if there is an status info to prevent a third line
• <ReactFlow />
  • property color for graph configuration was adjusted
• <SearchField />
  • internally forced to be managed controlled to keep onClearanceHandler independent from outer value property
• <Switch />
  • use always <Label/> component for label value
• <StickyNoteNode />
  • Refactored data structure position and dimension (breaking change)

Deprecated

• <CodeEditor />
  • fallback of static test id is removed, need then always to be set if necessary
• <OverflowText />
  • component won't accept properties of any name in future, only data attributes for test IDs and basic HTML element properties
• <OverviewItemList />
  • densityHigh property will be removed, use it directly on OverviewItem children

v24.1.0-rc.6

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

Added

• <ContentGroup /> component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor
• <Label />
  • additionalElements property to display elements at the end of the label
  • inline property to display the label component as inline block
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <CardActions />
  • noWrap property to display them without wrapping its children on multiple lines
• <SimpleDialog />
  • actionsProps property to forward CardActions properties, e.g. noWrap
• <MenutItem />
  • tooltip property to dislay tooltip on menu item label
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <CodeEditor />
  • useToolbar property to display toolbar if the mode is supported
    • currently markdown mode is integrated, including support for headlines <h1-6>, <blockquote>, <code> block and inline, <b> bold, <i>, italic, <del> strike through, <ul>, <ol> and checkbox lists, <a> links and <img> images
• <OverviewItem />
  • hasCardWrapper property to use a Card component as wrapper around it, simplifies the process to put it in a box, use cardProps to forward basic properties to that Card wrapper
• New icons:
  • artefact-task-concatenatetofile
  • artefact-task-pivot
  • artefact-task-unpivot
  • item-magic-edit
  • operation-format-text-code
  • operation-format-text-bold
  • operation-format-text-italic
  • operation-format-text-strikethrough
  • operation-format-list-bullet
  • operation-format-list-checked
  • operation-format-list-numbered

Fixed

• <CodeAutocompleteField />:
  • Code editor resets to initial value on every code editor instance re-init
• <OverviewItem />
  • whitespace after Depiction element when the OverviewItem ist used with densityHigh and hasSpacing
• <OverviewItemActions />
  • hiddenInteractions stay visible if they contain focused elements or opened overlays (e.g. context menus)
• <TagList />
  • do not create empty list items
• <CodeEditor />
  • re-render the component if the wrapLines property is changed after the component's render
  • only fire onChange event when the document has actually changed
• <SearchField />
  • allow to use onClearanceHandler and rightElement together
  • fix display of Icon with tooltipText as direct child in rightElement

Changed

• <ReactFlow />
  • property color for graph configuration was adjusted
• <Switch />
  • use always <Label/> component for label value
• <StickyNoteNode />
  • Refactored data structure position and dimension (breaking change)
• <ActivityControlWidget />
  • display running time after label if there is an status info to prevent a third line
• <SearchField />
  • internally forced to be managed controlled to keep onClearanceHandler independent from outer value property

Deprecated

• <OverflowText />
  • component won't accept properties of any name in future, only data attributes for test IDs and basic HTML element properties
• <OverviewItemList />
  • densityHigh property will be removed, use it directly on OverviewItem children

v24.1.0-rc.5

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

Added

• <ContentGroup /> component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor
• <Label />
  • additionalElements property to display elements at the end of the label
  • inline property to display the label component as inline block
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <CardActions />
  • noWrap property to display them without wrapping its children on multiple lines
• <SimpleDialog />
  • actionsProps property to forward CardActions properties, e.g. noWrap
• <MenutItem />
  • tooltip property to dislay tooltip on menu item label
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <CodeEditor />
  • useToolbar property to display toolbar if the mode is supported
    • currently markdown mode is integrated, including support for headlines <h1-6>, <blockquote>, <code> block and inline, <b> bold, <i>, italic, <del> strike through, <ul>, <ol> and checkbox lists, <a> links and <img> images
• New icons:
  • artefact-task-concatenatetofile
  • artefact-task-pivot
  • artefact-task-unpivot
  • item-magic-edit
  • operation-format-text-code
  • operation-format-text-bold
  • operation-format-text-italic
  • operation-format-text-strikethrough
  • operation-format-list-bullet
  • operation-format-list-checked
  • operation-format-list-numbered

Fixed

• <CodeAutocompleteField />:
  • Code editor resets to initial value on every code editor instance re-init
• <OverviewItemActions />
  • hiddenInteractions stay visible if they contain focused elements or opened overlays (e.g. context menus)
• <TagList />
  • do not create empty list items
• <CodeEditor />
  • re-render the component if the wrapLines property is changed after the component's render

Changed

• <ReactFlow />
  • property color for graph configuration was adjusted
• <Switch />
  • use always <Label/> component for label value
• <StickyNoteNode />
  • Refactored data structure position and dimension (breaking change)
• <ActivityControlWidget />
  • display running time after label if there is an status info to prevent a third line

Deprecated

• <OverflowText />
  • component won't accept properties of any name in future, only data attributes for test IDs and basic HTML element properties

v24.1.0-rc.4

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

Added

• <ContentGroup /> component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor
• <Label />
  • additionalElements property to display elements at the end of the label
  • inline property to display the label component as inline block
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• <CardActions />
  • noWrap property to display them without wrapping its children on multiple lines
• <SimpleDialog />
  • actionsProps property to forward CardActions properties, e.g. noWrap
• <MenutItem />
  • tooltip property to dislay tooltip on menu item label
• <NodeContent />
  • resizeDirections to specifiy the axis that can be used to resize the node
  • resizeMaxDimensions to add maximum values for resizing height/width
• New icons:
  • "item-magic-edit": icon for "magic" edit suggestions
  • "artefact-task-concatenatetofile": icon for "Concatenate to file" operator

Fixed

• <CodeAutocompleteField />:
  • Code editor resets to initial value on every code editor instance re-init
• <OverviewItemActions />
  • hiddenInteractions stay visible if they contain focused elements or opened overlays (e.g. context menus)
• <TagList />
  • do not create empty list items

Changed

• <ReactFlow />
  • property color for graph configuration was adjusted
• <Switch />
  • use always <Label/> component for label value
• <StickyNoteNode />
  • Refactored data structure position and dimension (breaking change)

v24.1.0-rc.3

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

Added

• ContentGroup component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor
• <Label />
  • added additionalElements property to display elements at the end of the label

v24.1.0-rc.2

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

Added

• CntentGroup component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor

v24.0.1

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

Changed

• eslint libraries were upgraded to v9, so node v18.18 or higher is required

Fixed

• MultiSelect:
  • Old suggestions might be shown for a very short time when typing in a new search query.
• CodeEditor:
  • Broken highlighting for editor modes that leveraged adapted legacy modes.

v24.1.0-rc.1

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

Added

• CntentGroup component
  • Manage display of a grouped content section.
  • Add info, actions and context annotations by using its properties.
  • Can be nested into each other.
• <CodeEditor />
  • implemented support for linting which is enabled via useLinting prop
  • turtle and javascript are currently supported languages for linting
  • editor is focused on load if autoFocus prop is set to true
  • implemented support for disabled state in code editor
  • implemented support for intent states in code editor

Fixed

• MultiSelect:
  • Old suggestions might be shown for a very short time when typing in a new search query.

Changed

• eslint libraries were upgraded to v9, so node v18.18 or higher is required

v24.1.0-rc.0

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

Changed

• eslint libraries were upgraded to v9, so node v18.18 or higher is required

Fixed

• MultiSelect:
  • Old suggestions might be shown for a very short time when typing in a new search query.