feat(react diagrams): add support for applying a custom class to the …

…outer node (#1222)

The CardNode component has a `color` prop which can be used to specify the
colour of the border applied on the outer node. However, this requires the
code to be aware of the active theme, handle dark mode, etc. to select an
appropriate colour in some cases.

For component libraries this can be problematic as now both the components
and their consumers need to be aware of theme rather than relying on this
being handled entirely in (S)CSS.

Add support for applying a custom class to the CardNode component which will
be applied to the outer node and can be used to apply styles to the card and
its children, including specifying the border colour for the card.

resolves #1221

Add similar `className` prop to all diagram components for consistency.

packages/react/src/diagrams/CardNode/CardNode.tsx

@@ -13,6 +13,7 @@ const namespace = `${prefix}--cc--card-node`;
 const CardNode = ({
 	as = 'div',
 	children,
+	className,
 	color,
 	href = null,
 	onMouseEnter = null,
@@ -37,6 +38,7 @@ const CardNode = ({
 	const cardClasses = classnames(namespace, {
 		[`${namespace}--stacked`]: stacked,
 		[`${namespace}--${Component}`]: Component,
+		[className]: className,
 	});
 
 	return (
@@ -67,6 +69,11 @@ CardNode.propTypes = {
 	 */
 	children: PropTypes.node,
 
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
 	/**
 	 * Specify the node's border color
 	 */

packages/react/src/diagrams/CardNode/CardNodeColumn.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import classnames from 'classnames';
+
 // @ts-ignore
 import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 const namespace = `${prefix}--cc--card-node`;
 
-const CardNodeColumn = ({ children, farsideColumn }: any) => (
-	<div
-		className={`${namespace}__column ${
-			farsideColumn && `${namespace}__column--farside`
-		}`}>
-		{children}
-	</div>
-);
+const CardNodeColumn = ({ children, className, farsideColumn }: any) => {
+	const classes = classnames(`${namespace}__column`, {
+		[`${namespace}__column--farside`]: farsideColumn,
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
 
 export { CardNodeColumn };
 
@@ -24,6 +27,11 @@ CardNodeColumn.propTypes = {
 	 */
 	children: PropTypes.node,
 
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
 	/**
 	 * Specify whether this is the last column
 	 */

packages/react/src/diagrams/CardNode/CardNodeLabel.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import classnames from 'classnames';
+
 // @ts-ignore
 import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 const namespace = `${prefix}--cc--card-node`;
 
-const CardNodeLabel = ({ children }: any) => (
-	<label className={`${namespace}__label`}>{children}</label>
-);
+const CardNodeLabel = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__label`, {
+		[className]: className,
+	});
+
+	return <label className={classes}>{children}</label>;
+};
 
 export { CardNodeLabel };
 
@@ -18,4 +25,9 @@ CardNodeLabel.propTypes = {
 	 * Pass in the children that will be rendered within the CardNodeLabel
 	 */
 	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
 };

packages/react/src/diagrams/CardNode/CardNodeSubtitle.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import classnames from 'classnames';
+
 // @ts-ignore
 import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 const namespace = `${prefix}--cc--card-node`;
 
-const CardNodeSubtitle = ({ children }: any) => (
-	<div className={`${namespace}__subtitle`}>{children}</div>
-);
+const CardNodeSubtitle = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__subtitle`, {
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
 
 export { CardNodeSubtitle };
 
@@ -18,4 +25,9 @@ CardNodeSubtitle.propTypes = {
 	 * Pass in the children that will be rendered within the CardNodeSubtitle
 	 */
 	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
 };

packages/react/src/diagrams/CardNode/CardNodeTitle.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import classnames from 'classnames';
+
 // @ts-ignore
 import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 const namespace = `${prefix}--cc--card-node`;
 
-const CardNodeTitle = ({ children }: any) => (
-	<div className={`${namespace}__title`}>{children}</div>
-);
+const CardNodeTitle = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__title`, {
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
 
 export { CardNodeTitle };
 
@@ -18,4 +25,9 @@ CardNodeTitle.propTypes = {
 	 * Pass in the children that will be rendered within the CardNodeTitle
 	 */
 	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
 };

packages/react/src/diagrams/Edge/Edge.tsx

@@ -12,6 +12,7 @@ import { buildStraightPathString } from '@carbon/charts/components/diagrams/buil
 const { prefix } = settings;
 
 const Edge = ({
+	className,
 	color,
 	markerEnd,
 	markerStart,
@@ -29,6 +30,7 @@ const Edge = ({
 
 	const pathClasses = classnames(namespace, {
 		[`${namespace}--${variant}`]: variant,
+		[className]: className,
 	});
 
 	const d = path || buildStraightPathString(source, target);
@@ -57,6 +59,11 @@ const Edge = ({
 export default Edge;
 
 Edge.propTypes = {
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
 	/**
 	 * Specify the edge's color
 	 */

packages/react/src/diagrams/Marker/Marker.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// @ts-ignore
+import classnames from 'classnames';
+
 // @ts-ignore
 import settings from 'carbon-components/src/globals/js/settings';
 
@@ -16,8 +19,9 @@ import {
 const { prefix } = settings;
 
 const Marker = ({
-	d,
+	className,
 	color,
+	d,
 	id,
 	orient = 'auto',
 	height,
@@ -27,13 +31,16 @@ const Marker = ({
 	refY,
 }: any) => {
 	const namespace = `${prefix}--cc--marker`;
+	const classes = classnames(namespace, {
+		[className]: className,
+	});
 
 	const xPos = position === 'end' ? width / 2 + 0.5 : 0.5;
 	const yPos = height / 2;
 
 	return (
 		<marker
-			className={namespace}
+			className={classes}
 			markerHeight={height}
 			markerWidth={width}
 			orient={orient}
@@ -65,15 +72,20 @@ export {
 
 Marker.propTypes = {
 	/**
-	 * Specify a path string
+	 * Provide an optional class to be applied on the outer element
 	 */
-	d: PropTypes.string,
+	className: PropTypes.string,
 
 	/**
 	 * Specify the marker's color
 	 */
 	color: PropTypes.string,
 
+	/**
+	 * Specify a path string
+	 */
+	d: PropTypes.string,
+
 	/**
 	 * Specify an ID for the marker
 	 */

packages/react/src/diagrams/ShapeNode/ShapeNode.tsx

@@ -11,6 +11,7 @@ const { prefix } = settings;
 
 const ShapeNode = ({
 	as = 'div',
+	className,
 	href = null,
 	onClick = null,
 	onMouseEnter = null,
@@ -41,6 +42,7 @@ const ShapeNode = ({
 		[`${namespace}--stacked`]: stacked,
 		[`${namespace}--${shape}`]: shape,
 		[`${namespace}--${Component}`]: Component,
+		[className]: className,
 	});
 
 	const titleElement = title ? (
@@ -77,6 +79,11 @@ ShapeNode.propTypes = {
 	/** Provide a custom element to be rendered instead of the default */
 	as: PropTypes.oneOf(['div', 'a', 'button']),
 
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
 	/**
 	 * Optionally specify an href for the CardNode to become an `<a>` element
 	 */