Problem/Motivation
Card SDC: card_body_utility_classes not working when card_image_overlays is true.
See: https://git.drupalcode.org/project/radix/-/blob/6.0.x/components/card/ca...
Steps to reproduce
{% include 'radix:card' with {
card_body: "Lorem ipsum dolar",
card_image_overlays: true,
card_body_utility_classes : [
'bg-primary',
] %}
Proposed resolution
Merge card_body_utility_classes no matter if card_image_overlays is true or not.
Not sure whats the best approach here:
{%
set card_body_classes = [
card_image_overlays ? 'card-img-overlay' : 'card-body'
]|merge(card_body_utility_classes ?: [])
%}
or stick with the card_body_classes override and simply add the merge.
{% if card_image_overlays %}
{% if card_media|render %}
{{ card_media }}
{% elseif card_image_src %}
{%
include 'radix:image' with {
src: card_image_src,
image_utility_classes: card_image_classes|merge(['card-img'])
}
%}
{% endif %}
{%
set card_body_classes = [
'card-img-overlay'
]|merge(card_body_utility_classes ?: [])
%}
{% endif %}
To me, the first one seems a bit cleaner.
Remaining tasks
User interface changes
API changes
Data model changes
Issue fork radix-3537368
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
thomas.frobieterComment #3
anirudhsingh19 commentedWorking on it.
Comment #5
anirudhsingh19 commented@thomas.frobieter I tried using your solutions. It was successful in adding the card_body_utility_classes but the card-body class was still getting overridden here. Thanks for the Input, I have made the additional changes accordingly. Please review it.
Comment #6
anirudhsingh19 commentedOk thanks, will work on it.
Comment #7
anirudhsingh19 commented@thomas.frobieter I have made the suggested changes. I think the second approach is better because in the first one, the card_image_overlays condition will always be true.
Comment #8
anirudhsingh19 commentedComment #11
nitinkumar_7 commentedI tested the patch from MR !146 against the steps to reproduce in the issue summary (card_image_overlays: true with card_body_utility_classes: ['bg-primary']). The bg-primary class is now correctly merged onto the card-img-overlay element instead of being dropped. Works as expected, setting to RTBC.
Comment #12
nitinkumar_7 commentedComment #14
doxigo commentedThanks everyone, merged.