v23.7.0-rc.0

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

Added

• <ReactFlow/>, <StickyNoteModal/>, <EdgeDefault/>, <EdgeLabel/>, <HandleContent/>, <HandleTools/>, <MiniMap/>
  • all react flow components are now be able to process test ids as data attributes, e.g. data-test-id and data-testid, sometimes as direct property, in other cases as part of properties routed to the wrapper elements
  • storybook documentation was enhanced by demonstration the usage of test ids
• <Markdown />
  • Do syntax highlighting when a class name is set in the form language-<LANGUAGE_NAME>.

Fixed

• <MultiSuggestField />
  • Added logic for contolled state for the component if selectedItems and onSelection passed.
• <StickyNoteModal/>
  • static test id data-test-id="sticky-note-modal" will be removed with next major version

v23.6.0

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

Added

• <BreadcrumbList/>, <MultiSuggestField/>, <Notification/>, <Select/>, <Tabs/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • wrapperProps: can be defined by using div attributes, and if given a div element with wrap the component. This wrapper is also used for test ids because the underlaying BlueprintJS components do not forward data attributes to the DOM.
  • if a test id is used on <Select/> or <MultiSuggestField/> then the toggle button, the dropdown and the search filter get automatically their own test id, suffixed by _togger, _drowpdown and _searchinput.
• <CodeMirror />:
  • Added support for N-triples and Mathematica modes.
  • Allow direct access to the underlying code mirror instance.
  • Allow to register a scroll handler.
  • Support code folding for some modes, e.g. xml, json.
• <Modal/>, <SimpleDialog/>, <AlertDialog/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
• <MultiSuggestField />
  • selectedItems can be used to set default selected items
• new use hook
  • useApplicationHeaderOverModals: forces the application header to be displayed over modal backgrounds
• ClassNames now forwards all BlueprintJS CSS class names

  • import { ClassNames } from "@eccenca/gui-elements";
    export const bpButtonClass = ClassNames.Blueprint.BUTTON;
    

• new icons: state-locked, state-unlocked, application-notification

Fixed

• <Card />
  • fix styles for selected=true, allow it without interactive functionality on card element
  • align colors with active menu items
• <MultiSuggestField />
  • reset the list of options when the query is cleared but nothing from the list is selected
  • add the created element to the list of filtered elements immediately after its creation
  • block input if disabled property is set
• <TagList />
  • vertical alignment fixed in nowrap containers and for tags with icons

Changed

• BlueprintJS libraries was updated to v5
  • Popover2 lib was removed because we can now again use the internal component from core lib again
• <ApplicationContainer />
  • <OverlaysProvider /> from BlueprintJS is now used
  • @see https://github.com/palantir/blueprint/wiki/Overlay2-migration
• <Tag />
  • included icons are always limited to the height of the text label

Deprecated

• <Button />
  • interface AnchorOrButtonProps is currently exported together with the component but it will be removed with the next major version
  • there won't be a replacement or alternate interface because ButtonProps should be enough
• <BreadcrumbList/>
  • property htmlUlProps: this is going to be removed because the BlueprintJS Breadcrumbs component does not support native ul attributes. The element provides a new wrapperProps property.
• <MultiSuggestField />
  • static usage of data-test-id="clear-all-items" for the clearance button is deprecated, will be replaced by a test id later that is created from the given test id for the component plus a _clearance suffix

v23.6.0-rc.2

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

Added

• ClassNames now forwards all BlueprintJS CSS class names

  • import { ClassNames } from "@eccenca/gui-elements";
    export const bpButtonClass = ClassNames.Blueprint.BUTTON;
    

• <MultiSuggestField />
  • selectedItems can be used to set default selected items
• <BreadcrumbList/>, <Notification/>, <MultiSuggestField/>, <Select/>, <Tabs/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • wrapperProps: can be defined by using div attributes, and if given a div element with wrap the component. This wrapper is also used for test ids because the underlaying BlueprintJS components do not forward data attributes to the DOM.
  • if a test id is used on <Select/> or <MultiSuggestField/> then the toggle button, the dropdown and the search filter get automatically their own test id, suffixed by _togger, _drowpdown and _searchinput.
• <Modal/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • as <Modal/> is used for <AlertDialog/> and <SimpleDialog/>, the property can also be used directly on those components.
• new icons: state-locked, state-unlocked, application-notification
• new use hook
  • useApplicationHeaderOverModals: forces the application header to be displayed over modal backgrounds
• <CodeMirror />:
  • Added support for N-triples and Mathematica modes.
  • Allow direct access to the underlying code mirror instance.
  • Allow to register a scroll handler.
  • Support code folding for some modes, e.g. xml, json.

Fixed

• <TagList />
  • vertical alignment fixed in nowrap containers and for tags with icons
• <MultiSuggestField />
  • reset the list of options when the query is cleared but nothing from the list is selected
  • add the created element to the list of filtered elements immediately after its creation

Changed

• BlueprintJS libraries was updated to v5
  • Popover2 lib was removed because we can now again use the internal component from core lib again
• <ApplicationContainer />
  • <OverlaysProvider /> from BlueprintJS is now used
  • @see https://github.com/palantir/blueprint/wiki/Overlay2-migration
• <Tag />
  • included icons are always limited to the height of the text label

Deprecated

• AnchorOrButtonProps
  • currently exported together with the <Button /> component
  • will be removed with the next major version
  • there won't be a replacement or alternate interface as ButtonProps should be always enough
• <BreadcrumbList/>
  • property htmlUlProps: this is going to be removed because the BlueprintJS Breadcrumbs component does not support native ul attributes. The element provides a new wrapperProps property.
• <MultiSuggestField />
  • static usage of data-test-id="clear-all-items" for the clearance button is deprecated, will be replaced by a test id later that is created from the given test id for the component plus a _clearance suffix

v23.6.0-rc.1

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

Added

• ClassNames now forwards all BlueprintJS CSS class names

  • import { ClassNames } from "@eccenca/gui-elements";
    export const bpButtonClass = ClassNames.Blueprint.BUTTON;
    

• <MultiSuggestField />
  • selectedItems can be used to set default selected items
• <BreadcrumbList/>, <Notification/>, <Select/>, <Tabs/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • wrapperProps: can be defined by using div attributes, and if given a div element with wrap the component. This wrapper is also used for test ids because the underlaying BlueprintJS components do not forward data attributes to the DOM.
  • if a test id is used on <Select/> then the toggle button, the dropdown and the search filter get automatically their own test id, suffixed by _togger, _drowpdown and _searchinput.
• <Modal/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • as <Modal/> is used for <AlertDialog/> and <SimpleDialog/>, the property can also be used directly on those components.
• new icons: state-locked, state-unlocked, application-notification
• new use hook
  • useApplicationHeaderOverModals: forces the application header to be displayed over modal backgrounds

Fixed

• <TagList />
  • vertical alignment fixed in nowrap containers and for tags with icons

Changed

• BlueprintJS libraries was updated to v5
  • Popover2 lib was removed because we can now again use the internal component from core lib again
• <ApplicationContainer />
  • <OverlaysProvider /> from BlueprintJS is now used
  • @see https://github.com/palantir/blueprint/wiki/Overlay2-migration
• <Tag />
  • included icons are always limited to the height of the text label

Deprecated

• AnchorOrButtonProps
  • currently exported together with the <Button /> component
  • will be removed with the next major version
  • there won't be a replacement or alternate interface as ButtonProps should be always enough
• <BreadcrumbList/>
  • property htmlUlProps: this is going to be removed because the BlueprintJS Breadcrumbs component does not support native ul attributes. The element provides a new wrapperProps property.

v23.6.0-rc.0

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

Added

• ClassNames now forwards all BlueprintJS CSS class names

  • import { ClassNames } from "@eccenca/gui-elements";
    export const bpButtonClass = ClassNames.Blueprint.BUTTON;
    

• <BreadcrumbList/>, <Notification/>, <Select/>, <Tabs/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • wrapperProps: can be defined by using div attributes, and if given a div element with wrap the component. This wrapper is also used for test ids because the underlaying BlueprintJS components do not forward data attributes to the DOM.
  • if a test id is used on <Select/> then the toggle button, the dropdown and the search filter get automatically their own test id, suffixed by _togger, _drowpdown and _searchinput.
• <Modal/>
  • data-test-id (and data-testid as alias of it): can be defined to add test ids to the DOM elements
  • as <Modal/> is used for <AlertDialog/> and <SimpleDialog/>, the property can also be used directly on those components.

Changed

• BlueprintJS libraries was updated to v5
  • Popover2 lib was removed because we can now again use the internal component from core lib again
• <ApplicationContainer />
  • <OverlaysProvider /> from BlueprintJS is now used
  • @see https://github.com/palantir/blueprint/wiki/Overlay2-migration

Deprecated

• AnchorOrButtonProps
  • currently exported together with the <Button /> component
  • will be removed with the next major version
  • there won't be a replacement or alternate interface as ButtonProps should be always enough
• <BreadcrumbList/>
  • property htmlUlProps: this is going to be removed because the BlueprintJS Breadcrumbs component does not support native ul attributes. The element provides a new wrapperProps property.

v23.5.0

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

Added

• <CodeEditor />
  • visualize the usage of tabulator chars by background color and arrow symbol
  • new tabIntentSize, tabIntentStyle, tabForceSpaceForModes properties to give better control over tabulator usage

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.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