Add a labelClass property to Node (#446)

* Add a labelClass property to Node

The `labelClass` property can be used to pass a CSS class name to
the node, and it will be applied to its label.

* Update jest snapshots

Co-authored-by: Diogo André de Assumpção <daa@fb.com>

Author: DiogoAndre

sandbox/data/custom-node/custom-node.config.js

@@ -25,6 +25,7 @@ export default {
         highlightStrokeColor: "SAME",
         highlightStrokeWidth: 1.5,
         labelProperty: "name",
+        labelClass: "person-node-label",
         mouseCursor: "pointer",
         opacity: 1,
         renderLabel: false,

sandbox/data/custom-node/res/styles/custom-node.css

@@ -65,3 +65,12 @@
     width: 80%;
     height: 30%;
 }
+
+/* --- Node label style --- */
+
+.person-node-label {
+    fill: black;
+    text-shadow: rgb(255, 255, 255) 0px -2px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) 2px 0px 0px,
+        rgb(255, 255, 255) -2px 0px 0px;
+    transform: rotate(-25deg) translateX(40px) translateY(15px);
+}

src/components/graph/graph.builder.js

@@ -236,6 +236,11 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
     renderLabel = node.renderLabel;
   }
 
+  var labelClass = config.node.labelClass;
+  if (node.labelClass !== undefined && typeof node.labelClass === "string") {
+    labelClass = node.labelClass;
+  }
+
   return {
     ...node,
     className: CONST.NODE_CLASS_NAME,
@@ -253,6 +258,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
     opacity,
     overrideGlobalViewGenerator: !node.viewGenerator && node.svg,
     renderLabel,
+    labelClass,
     size: isSizeNumericValue ? nodeSize * t : { height: nodeSize.height * t, width: nodeSize.width * t },
     stroke,
     strokeWidth: strokeWidth * t,

src/components/graph/graph.config.js

@@ -137,6 +137,7 @@
  *   - "top"
  *   - "bottom"
  *   - "center"
+ * @param {string} [node.labelClass=""] - <a id="node-label-class href="#node-label-class">🔗</a> 🔍 CSS class to apply to the node label.
  *
  * <b>[note]</b> not specifying a label position will fallback to the original placement scheme of to the right of the node. This is different than the implementation for "right", which has the label shifted very slightly upward compared to the original.
  * @param {string|Function} [node.labelProperty="id"] - <a id="node-label-property" href="#node-label-property">🔗</a> this is the node property that will be used in runtime to</br>
@@ -312,6 +313,7 @@ export default {
     highlightStrokeWidth: "SAME",
     labelProperty: "id",
     labelPosition: null,
+    labelClass: "",
     mouseCursor: "pointer",
     opacity: 1,
     renderLabel: true,

src/components/node/Node.jsx

@@ -94,6 +94,7 @@ export default class Node extends React.Component {
       fontSize: this.props.fontSize,
       fontWeight: this.props.fontWeight,
       opacity: this.props.opacity,
+      ...(this.props.labelClass !== "" && { className: this.props.labelClass }),
     };
 
     let size = this.props.size;

test/graph/__snapshots__/graph.builder.spec.js.snap

@@ -15,6 +15,7 @@ Object {
   "highlighted": false,
   "id": "id",
   "label": "id",
+  "labelClass": "",
   "labelPosition": null,
   "onClickNode": undefined,
   "onMouseOut": undefined,
@@ -50,6 +51,7 @@ Object {
   "highlighted": false,
   "id": "id",
   "label": "id",
+  "labelClass": "",
   "labelPosition": null,
   "onClickNode": undefined,
   "onMouseOut": undefined,
@@ -85,6 +87,7 @@ Object {
   "highlighted": true,
   "id": "id",
   "label": "id",
+  "labelClass": "",
   "labelPosition": null,
   "onClickNode": undefined,
   "onMouseOut": undefined,