From 19db90443a7fef9c0da483608d36dc177cbb4062 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Sat, 20 Nov 2021 13:57:13 +0000 Subject: [PATCH] feat(react cardnode): add support for applying a custom class to the outer node 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 --- packages/react/src/diagrams/CardNode/CardNode.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react/src/diagrams/CardNode/CardNode.tsx b/packages/react/src/diagrams/CardNode/CardNode.tsx index 4d54ca8a38..3206a71b74 100644 --- a/packages/react/src/diagrams/CardNode/CardNode.tsx +++ b/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 */