v13.0.0
Feature Enhancements
In this new major version, Elyra Canvas supports:
- Carbon 11
- React 18
- Node 20
Documentation
The Elyra Canvas documentation has moved and is now available at a new location: https://elyra-ai.github.io/canvas/ .
We are using GitHub pages for the documentation. Users can now easily search for a word in the entire documentation. Each page shows index on left-side and contents within the page on right-side for better navigation.
The Elyra Canvas Wiki is deprecated and will be removed soon. Please start using the new link.
Elyra.canvas.documentation.mov
Developer Notes
We will continue to support two versions of @elyra/canvas
until September 2024. All consuming applications should plan to upgrade to Carbon 11 within this time.
- @elyra/canvas - v12.x uses Carbon 10 - Support will end on 30 September 2024
- @elyra/canvas - v13.x uses Carbon 11
12.x versions will be in maintenance mode supporting bugs and security fixes. Any new features will be available in 13.x versions. Both versions support consuming applications running on React 16, 17 and 18.
General
Carbon 11 and React 18 for elyra-canvas
Carbon has been updated to the latest version v1.55.0. All the consuming applications using @elyra/canvas v13.x must be using Carbon 11. @carbon/react package is added as a peerDependency in v13.x. Please follow carbon v10 to v11 migration guide for more details.
Elyra canvas is now using React 18. However, we continue to support consuming applications running on React 16, 17 and 18.
Upgrade Elyra canvas and Test harness to Node 20.x.
Elyra Canvas has been upgraded from Node 16.x to 20.x.
Common-Canvas
#1865 Add dividers for the context toolbar
Dividers are now supported in the context toolbar. To add a divider, specify the following in the array returned by the contextMenuHandler
callback:
<divider: true, toolbarItem: true />
See details here: https://elyra-ai.github.io/canvas/03.03.01-context-menu-handler/#return-array-for-context-toolbar
#1891 Enable multiple undo/redo button and panel
The common-canvas toolbar now supports a “dual-purpose” button. That is, a single button that has two parts, the left side of the button can be clicked to perform the action indicated by the button’s icon and the right side of the button, shown as a chevron, can be clicked to open a panel underneath the chevron that will allow what ever additional function the application developer wishes to present to the user that is connected with the action.
For example, this dual-purpose button, which can be seen in the ‘Stages’ sample app in the test harness, will perform the ‘undo’ action if clicked on the left-hand side:
and will display an additional panel when clicked on the right-hand side:
A dual-purpose button can be specified in the toolbar config like this:
const toolbarConfig = {
leftBar: [
{
action: "undo",
label: "Undo",
purpose: "dual",
subPanel: MultiUndoPanel,
subPanelData: { canvasController: this.canvasController }
}
],
rightBar: []
};
where:
purpose
can be either “single” (the default) or “dual”subPanel
is the React object to be inserted into the panelsubPanelData
is an object that is passed into the panel when it is created
#1888 Enable HTML code in Comments when Markdown is Enabled
When the enableMarkdownInComments
config field is set to true
, common-canvas allows the user to enter markdown syntax into the comment text which is used to format the text output.
The Markdown support in comments has been extended in this release, to allow the user to enter HTML into the markdown text. This is then run, when the comment is presented in display mode. HTML support allows the user more extensive customization capabilities including the specification of CSS for the text.
For example, specifying this will color the word Red:
Some <span style="color: red">Red</span> text
Common-Properties
#1646 Use Carbon 11 Accordions in Common Properties Panels
Common properties now uses Carbon 11 Accordions for displaying categories in flyout view. Multiple categories can be opened at once.
Note - If consuming application has added any unit tests related to right flyout categories, please update them as now Common Properties is using Carbon 11 Accordion so class names should be updated if needed.
Issues Resolved
- #1851 Tiny app not working by @tomlyn in #1852
- #1855 generated_values with start_value=0 works by @nmgokhale in #1856
- #1854 Fix Annotation Warnings by @Paul-Kawalkowski in #1853
- #1860 Improvements to docs by @tomlyn in #1861
- #1862 Fix docs - home page not coming up when running on github.io by @tomlyn in #1863
- #1862 Fix docs - home page not coming up when running on github.io by @tomlyn in #1864
- #1772 Replace React-hot-loader with React-fast-refresh by @srikant-ch5 in #1773
- #1865 Add dividers for the context toolbar by @tomlyn in #1866
- #1872 Use React Testing Library for Toolbar Tests by @srikant-ch5 in #1873
- More docs changes by @tomlyn in #1871
- #1867 Fixed left nav subtabs CSS in tearsheet by @nmgokhale in #1875
- #1878 Don't createRoot every time node data changes in SvgCanvasExternal by @tomlyn in #1879
- #1876 'Cannot read properties of null' errors in console using contex… by @tomlyn in #1877
- #1881 Added Layer component at control level by @nmgokhale in #1882
- #1883 Fix Tooltips Test Harness Top Toolbar icons in v13 by @srikant-ch5 in #1885
- #1886 Don't run jest tests while deploying test harness by @nmgokhale in #1887
- #1635 use Carbon RadioButtonGroup in RadiosetControl instead of custom grouping code by @veenas1 in #1814
- #1888 Enable HTML in Markdown by @JesusGuerrero in #1889
- #1646 Panel accordions are not using the carbon standards by @srikant-ch5 in #1648
- #1828 Resolve Cypress Test Issues by @srikant-ch5 in #1843
- #1891 Enable multiple undo/redo button and panel by @tomlyn in #1892
- #1893 New common-canvas documentation required by @tomlyn in #1894
- Fix image URLs in docs by @tomlyn in #1898
Full Changelog: v13.0.0-alpha.1...v13.0.0