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

Command icon 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

thomas.frobieter created an issue. See original summary.

thomas.frobieter’s picture

Issue summary: View changes
anirudhsingh19’s picture

Assigned: Unassigned » anirudhsingh19

Working on it.

anirudhsingh19’s picture

Assigned: anirudhsingh19 » Unassigned
Status: Active » Needs review

@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.

anirudhsingh19’s picture

Assigned: Unassigned » anirudhsingh19

Ok thanks, will work on it.

anirudhsingh19’s picture

@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.

anirudhsingh19’s picture

Assigned: anirudhsingh19 » Unassigned

liam morland made their first commit to this issue’s fork.

doxigo made their first commit to this issue’s fork.

nitinkumar_7’s picture

Status: Needs review » Reviewed & tested by the community

I 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.

nitinkumar_7’s picture

Status: Reviewed & tested by the community » Needs review

doxigo’s picture

Status: Needs review » Fixed

Thanks everyone, merged.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.