release_12.30.0

Feature Enhancements

Common-Canvas

#1470 Enable JSX decorations

Decorations for nodes and links can now be created using JSX. The JSX is provided in a field called jsx in the decoration specification. If you want to programmatically set JSX decorations, it can be provided using the canvas controller API like this:

     import { Play16 } from "@carbon/icons-react";

     const decorations = [
         {
             jsx: (<Play16 />),
             position: “topLeft”,
             x_pos: 0,
             y_pos: -20
         }
     ];

     canvasController.setNodeDecorations(“node1”,  decorations);

or returned by the layoutHandler callback if you want different nodes to have different decorations based on some property of the node:

     import { Play16 } from "@carbon/icons-react";

     layoutHandler(node) {
         const nodeLayout = {};

         if (node.app_data.isPlayable) {               
             nodeLayout = {
                 decorations: [
                     {
                          jsx: (<Play16 />),
                          position: “topLeft”,
                          x_pos: 0,
                          y_pos: -20
                     }
                 ]
             };
         }

         return nodeLayout; 

or, if you want each node to have the same decoration, in the node layout field of the canvas configuration object, like this:

     import { Play16 } from "@carbon/icons-react";     

     const canvasConfig = {
         enableNodeLayout: {
             decorations: [
                 {
                     jsx: (<Play16 />),
                     position: “topLeft”,
                     x_pos: 0,
                     y_pos: -20
                 }
             ]
         }
     };

     ...
     ...

    return (<CommonCanvas config={canvasConfig} ... />);

Note: JSX decorations are not serialized into the pipelineFlow document when canvasController.getPipelineFlow() is called even if the temporoary field is set to false.

Common-Properties

#1466 Support custom classes for action buttons and images

An optional config option called class_name was added in uiHints action_info section.

If provided, a custom class will be added to elements, like this:

For action button - <div class="properties-action-button <customClass>" />
For action image - <div class="properties-action-image <customClass>" />

Issues Resolved

#1474 Canvas crash - Cannot read properties of undefined (reading x1) (#1475)
#1470 Enable JSX decorations (#1471)
#1466 Support custom class for action button and image (#1467)
#1468 Datepicker controls are in the wrong color within a Tearsheet (#1469)
#1464 Fixed issue sort icon outside table header (#1465)