Problem/Motivation

We have both https://git.drupalcode.org/project/ui_suite_bootstrap/-/tree/5.0.x/templ... and https://git.drupalcode.org/project/ui_suite_bootstrap/-/tree/5.0.x/templ...

The split was done very early in the 5.0.x branch

It is not the only component from upstream we have split like that, but the other ones are related to the need of stacking multiple "sub" components into a container (accordion_item, list_group_item, carousel_item, toast_container....).

It is not the case here. So, do we keep such a component which seems to be useless and is asking the site builders to do extra work to build 2 different dispalys and nest them?

Proposed resolution

Move card_body slots & props to card definition and templates, and display the card-body wrapper only if one of title, subtitle, text, content (to be renamed to not mess with the current content slot) or link slot is filled.

API changes

Breaking by nature, but we can avoid it by keep card's content slot and card_body component and marking them as deprecated. We can remove them in 5.1.x branch for example.

Issue fork ui_suite_bootstrap-3427151

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:

About issue forks

Comments

pdureau created an issue. See original summary.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Hi,

I remember why it has been splitted.

In a card you can place stuff not in card-body div:
- https://getbootstrap.com/docs/5.3/components/card/#list-groups
- https://getbootstrap.com/docs/5.3/components/card/#kitchen-sink

Also it seems that card has some new features since, not implemented: https://getbootstrap.com/docs/5.3/components/card/#image-overlays

pdureau’s picture

pdureau commented

Proposals, in order to be able to handle non-body and additional stuff.

Proposal 1

Split content slot between content_before and content_after
Move card_body slots & props to card component.

In Card template, replace {{ content }} by:

{{ content_before }}
{% if title or subtitle or text or content or links %}
<div class="card-body">
  {% if title %}
    <h{{ heading_level }} class="card-title">{{ title }}</h{{ heading_level }}>
  {% endif %}
  {% if subtitle %}
    <h{{ heading_level + 1 }} class="card-subtitle">{{ subtitle }}</h{{ heading_level + 1 }}>
  {% endif %}
  {% if text %}
    <p class="card-text">{{ text }}</p>
  {% endif %}
  {{ content }}
  {{ links|add_class('card-link') }}
</div>
{% endif %}
{{ content_after }}

This change will be breaking.

Proposal 2

In order to avoid moving data currently mapped to card content slot inside card-body markup.

Split content slot between content and content_after
Move card_body slots & props to card component, while renaming content slot to body.

In Card template, replace {{ content }} by:

{{ content }}
{% if title or subtitle or text or body or links %}
<div class="card-body">
  {% if title %}
    <h{{ heading_level }} class="card-title">{{ title }}</h{{ heading_level }}>
  {% endif %}
  {% if subtitle %}
    <h{{ heading_level + 1 }} class="card-subtitle">{{ subtitle }}</h{{ heading_level + 1 }}>
  {% endif %}
  {% if text %}
    <p class="card-text">{{ text }}</p>
  {% endif %}
  {{ body }}
  {{ links|add_class('card-link') }}
</div>
{% endif %}
{{ content_after }}
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Do we still need card_body component? » Put card_body into card
Assigned: Unassigned » grimreaper

Go for proposal 2

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » pdureau

Sorry to go back on our discussion.

But in https://getbootstrap.com/docs/5.3/components/card/#kitchen-sink, we can see that a card can have multiple card-body. I think that's why the "content before"/"content after" had not been chosen previously.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: pdureau » grimreaper

As discussed. Let's keep card body as it is and document in the description why it exists.

Also implement missing features.

Grimreaper opened merge request !170

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » pdureau
Status: Active » Needs review
pdureau’s picture

pdureau commented
Assigned: pdureau » grimreaper
Status: Needs review » Needs work

1. Create an other issue about card overlay.

2. Proposal for description:

description: "Internal: to be used in the 'Card' component, because a card can have multiple 'Card body' components."

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Put card_body into card » Document why card_body exists
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs work » Fixed

  • Grimreaper committed 8633c4d2 on 5.0.x 
    Issue #3427151 by Grimreaper, pdureau: Document why card_body exists

Status: Fixed » Closed (fixed)

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