@eccenca/gui-elements - npm Package Versions

[23.0.0] - 2022-11-18

Added

• <CodeEditor /> element based on CodeMirror library, supporting Markdown, Python, Sparql, SQL, Turtle and XML syntax
• <HoverToggler /> element that allows to switch elements when hovered over.
• <InteractionGate /> element that can wrap content that need to be blocked from user interactions, it also has options to display a spinner as overlay
• <Tree /> component
• <TabPanel /> component that can be used if <Tabs /> is used in uncontrolled mode.
• <ReactFlowMarkers /> custom markers for ReactFlow edges, currently one new marker arrowClosed-inverse available
• <StickyNoteNode />, usable by stickynote type in react flow editors for workflows and linking rules
• CssCustomProperties and getColorConfiguration utilities can be used to exchange color configurations between SCSS and JS
• decideContrastColorValue method to get a second color related to the lightness of the testes input color
• <SimpleDialog />: properties showFullScreenToggler and startInFullScreenMode
• <EdgeDefault />: new properties for the edge data
  • markerStart allows to add a marker to the edge starting point
  • inversePath allows to inverse the edge direction
  • renderLabel function to render fully custom edge label including any ReactNode
• <NodeContent />: property footerContent to add footer content to a react flow node
• <AutoSuggestion>: properties autoCompletionRequestDelay and validationRequestDelay, to configure the delay when a request is sent after nothing is typed in anymore.
• <FieldItemRow: property justifyItemWidths to display all children using equal width inside the row
• <BreadcrumbList />: properties ignoreOverflow and latenOverflow, that can be used to implement a second overflow strategy beside BlueprintJS overflow list, for example in case the overflow list leads to re-rendering loops
• <Spinner />: showLocalBackdrop property to include backdrop behind spinner making the background less visible
• <ContextMenu />: disabled property that disables the button to open the menu.
• <Tooltip />: properties markdownEnabler and markdownProps to enable better formatted tooltips with options for line breaks, etc.
• <AutoCompleteField />: onlyDropdownWithQuery property to prevent dropdown as long as the input field is empty
• large addition to the Storybook, we almost doubled available components and stories

Fixed

• allow children of <Accordion /> item to get calculated based on their DOM sizes
• add borders to CodeMirror editor area and include display of focused state
• GUI elements library can be now used easier in applications because it does not force usage of SCSS modules via JS/Webpack4
• fixed ReactFlow stories re-rerender on configuration change
• fix used font family and layout of <AutoSuggestion /> element, and justify it with the other single line text inputs
• fix condition to include the class name of a <TagList /> and set maximum width for the items
• fixed <MultiSelect /> to correctly update created items that are selected while still maintaining a cache of all newly created items
• do not change cursor to pointer by default on tooltip targets

Changed

• move style imports of CodeMirror layout to extensions
• color configurations for react flow editor are not exported as modules anymore, they need to be fetched by getColorConfiguration method in JS directly
• BlueprintJS was upgraded to a recent v4
  • elements were also upgraded to usage of Popover2, Tooltip2, Select2, MultiSelect2 and Breadcrumbs2
  • this comes also with a necessary switch from node-sass to sass package, a javascript port from the original dart sass library, see migration notes to update your build process
• <TextField /> and <AutoCompleteField /> now include a title attribute on the natively used input element to show the value if it is disabled or readOnly
• flashing color regarding the intent state of a <TextField />
• <AutoCompleteField />: Add 'hasBackDrop' parameter to use a backdrop for its popover in order for outside clicks to always close the popover. Default: false

Migration notes

• old { colors } imports for cmem/react-flow/configurations/* do not keep working anymore, use getColorConfiguration method now
• <IconButton>: tooltipOpenDelay was removed, use tooltipProps.hoverOpenDelay directly
• <FieldItem>: labelAttributes was renamed to labelProps
• <MenuItem>: this element now extends directly the Blueprint element, so internalProps was removed, use properties directly on MenuItem
• <AutoCompleteField>: popoverProps was renamed to contextOverlayProps
• <Button>: tooltipProperties was renamed to tooltipProps
• <ContextMenu>: use contextOverlayProps to route properties to the overlay element
• <Icon>: tooltipProperties was renamed to tooltipProps, tooltipOpenDelay was removed, use tooltipProps.hoverOpenDelay directly
• <Label>: tooltipProperties was renamed to tooltipProps
• <MultiSelect>: popoverProps was renamed to contextOverlayProps
• <Select>: popoverProps was renamed to contextOverlayProps
• <Tooltip>: this element now extends directly the Blueprint element, so tolltipProps was removed, use properties directly on Tooltip
• <BreadcrumbItem>: IBreadcrumbItemProps interface was renamed to BreadcrumbItemProps
• BreadcrumbList: IBreadcrumbListProps interface was renamed to BreadcrumbListProps

Switch from node-sass to sass

1. Remove node-sass and add sass package via npm or yarn:

   $ yarn remove node-sass && yarn add --dev sass
   

2. Include sass and our configuration

   const sass = require('sass');
   const sassRenderSyncOptions = require("@eccenca/gui-elements/config/sassOptions");
   

3. Configure the webpack sass-loader, you can extend this by options regarding the provided loader interface

   {
       loader: "sass-loader",
       options: {
           implementation: sass,
           sassOptions: sassRenderSyncOptions,
       },
   }