feat(react diagrams): add support for applying a custom class to the outer node #1222
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AlanGreene
requested review from
Akshat55,
theiliad and
a team
as code owners
AlanGreene
requested review from
zvonimirfras and
Donisius
and removed request for
a team
theiliad
requested changes
Nov 22, 2021
AlanGreene
force-pushed
the
cardnode_custom_class
branch
from
19db904
to
5bdbf7c
Compare
theiliad
requested changes
Dec 1, 2021
There was a problem hiding this comment.
Thank you @AlanGreene looks good, however I think in 1 of the instances you've added the prop but just not applying it.
…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 carbon-design-system#1221 Add similar `className` prop to all diagram components for consistency.
AlanGreene
force-pushed
the
cardnode_custom_class
branch
from
5bdbf7c
to
441285f
Compare
Akshat55
approved these changes
Dec 1, 2021
theiliad
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates
The CardNode component has a
colorprop which can be used to specify thecolour 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
classNameprop to all diagram components for consistency.Demo screenshot or recording
Review checklist (for reviewers only)