allow collapse on complete card header

[kevinpapst]

Description

Customers mentioned, that it would be much more comfortable, if they could click the entire card header.

So not only the arrow icon, but also the entire title and whitespace in between:

I have to agree, they are not wrong.

WDYT @cavasinf ?

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I updated the documentation (see here)
• I agree that this code will be published under the MIT license

[cavasinf]

TBH, I don't think this should be a card component feature.
I know it's useful for YOU, for ME, and maybe for others, but Tabler.io doesn't have it.
So we're adding something that Tabler doesn't have or doesn't want.

I've implemented this in all my projects because it's a must IMO.
Instead of using a card, I used an accordion with a single element.
By using the accordion, we have a full button to click (which is the title) and a visual information to tell the user the current state: bold + dynamic arrow up or down.

A parent .card is there to have the background and a border.
You can even put a .card-footer inside an accordion element, it works like a charm.

I can give you the code if you want.

[kevinpapst]

Okay, let me try the accordion. Do you use extra code, that is not part of the bundle? If so: yes please share ;)

[cavasinf]

It used the new version of the accordion, I've made a PR for it.

Do you use extra code

Yes we do, but sadly our repo is on a private server..
To summarize, it uses:

• A Symfony Form
• Form buttons
• Multiple subscribers to handle Buttons click, session and cookies (to auto fill inputs).

YOU should maybe replace the filter_footer content by a simple submit_button()

How to use

{% embed '@AllsoftwareSymfony/_partials/embeds/card_filter.html.twig'%}
    {% block filter_body %}
        {% include 'tiers/_partials/_filter.html.twig' %}
    {% endblock %}
{% endembed %}

card_filter.html.twig

{#
** Require **
- formFilter \Symfony\Component\Form\FormView::class
#}

{% set fullsize = true %}
{% extends '@Tabler/embeds/card.html.twig' %}
{% from '@Tabler/components/accordion.html.twig' import accordion %}

{% block box_class %}border-0{% endblock %}
{% block box_header_before %}
    {{ form_start(formFilter) }}
{% endblock %}

{% block filter_title %}
    <i class="fas fa-search me-1"></i>{{ 'label.filter'|trans({}, 'AllsoftwareSymfony') }}
{% endblock %}

{% set footer %}
    {% block filter_footer %}
        <div class="card-footer">
            <div class="d-flex justify-content-between flex-row-reverse">
                {# first here is last in web => flex-row-reverse !! #}
                {% if formFilter.filter_data is defined %}
                    {{ form_widget(formFilter.filter_data) }}
                {% endif %}

                {% if formFilter.reset is defined %}
                    {{ form_widget(formFilter.reset) }}
                {% endif %}
            </div>
        </div>
    {% endblock %}
{% endset %}

{% block filter_body %}
    {# This block should be always AFTER filter_footer #}
    {# If not, form_rest() will render buttons for the footer.. #}
    {{ form_rest(formFilter) }}
{% endblock %}

{% block box_body %}
    {{ accordion(
        [{
            title: block('filter_title'),
            body: block('filter_body'),
            bodyClasses: '',
            bodyAfter: footer,
            options: {
                open: isFiltered ?? formFilter.vars.valid is same as false,
                bodyExtraClass: 'border-top',
            }
        }],
        { }
    ) }}
{% endblock %}

{% block box_footer_after %}
    {{ form_end(formFilter) }}
{% endblock %}

[cavasinf]

Raw HTML: (don't mind stimulus elements)

<div class="card border-0 mb-3" data-controller="card-filter" data-card-filter-auto-search-value="true">
   <form name="tiers_filter" method="post">
      <div class="card-body  p-0 ">
         <div id="accordion_647709f1e0b45" class="accordion  ">
            <div class="accordion-item ">
               <div class="accordion-header " id="accordion_647709f1e0b45-heading-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_647709f1e0b45_collapse_1" aria-expanded="true">
                  <i class="fas fa-search me-1"></i>Filtres
                  </button>
               </div>
               <div id="accordion_647709f1e0b45_collapse_1" data-bs-parent="#accordion_647709f1e0b45" class="accordion-collapse border-top collapse show" style="">
                  <div class="accordion-body ">
                     <div class="row">
                        <div class="col-3">
                           <div class="mb-3">
                              <label class="form-label" for="tiers_filter_types-ts-control" id="tiers_filter_types-ts-label">Type</label>
                              <select id="tiers_filter_types" name="tiers_filter[types][]" class="tom-select form-select tomselected ts-hidden-accessible" data-tom-remove-button="data-tom-remove-button" data-tom-dropdown-input="data-tom-dropdown-input" data-tom-clear-button="data-tom-clear-button" data-tom-query-length="0" data-tom-placeholder="" placeholder="Sélectionner" multiple="multiple" tabindex="-1">
                                 <option value="MOA">MOA</option>
                                 <option value="AMO">AMO</option>
                                 <option value="bureau_etude">Bureau d'étude</option>
                                 <option value="architecte">Architect</option>
                                 <option value="concessionnaire">Concessionnaire</option>
                                 <option value="entreprise">Entreprise</option>
                                 <option value="autre">Autre</option>
                              </select>
                              <div class="ts-wrapper tom-select form-select multi plugin-dropdown_input plugin-remove_button plugin-clear_button">
                                 <div class="ts-control" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="tiers_filter_types-ts-dropdown" id="tiers_filter_types-ts-control" aria-labelledby="tiers_filter_types-ts-label" tabindex="0">
                                    <input class="items-placeholder" tabindex="-1" placeholder="">
                                    <div class="clear-button" title="Supprimer tous les éléments sélectionnés">⨯</div>
                                 </div>
                                 <div class="ts-dropdown multi plugin-dropdown_input plugin-remove_button plugin-clear_button" style="display: none;">
                                    <div class="dropdown-input-wrap"><input type="select-multiple" autocomplete="off" size="1" tabindex="-1" class="dropdown-input"></div>
                                    <div role="listbox" tabindex="-1" class="ts-dropdown-content" id="tiers_filter_types-ts-dropdown" aria-labelledby="tiers_filter_types-ts-label"></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col">
                           <div class="mb-3"><label for="tiers_filter_nom" class="form-label">Nom</label><input type="text" id="tiers_filter_nom" name="tiers_filter[nom]" class="form-control">        </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-3">
                           <div class="mb-3 form-switch" style="height: 30px;">
                              <div class="form-check"><input type="checkbox" id="tiers_filter_withCosu" name="tiers_filter[withCosu]" class="form-check-input form-check-input" value="1">
                                 <label class="form-check-label" for="tiers_filter_withCosu">Inclure les archivés</label>
                              </div>
                           </div>
                        </div>
                        <div class="col"></div>
                     </div>
                  </div>
                  <div class="card-footer">
                     <div class="d-flex justify-content-between flex-row-reverse">
                        <button type="submit" id="tiers_filter_filter_data" name="tiers_filter[filter_data]" data-session-ignore="data-session-ignore" class="btn btn-primary ms-auto btn"><i class="fas fa-search me-1"></i>Filtrer</button>
                        <button type="submit" id="tiers_filter_reset" name="tiers_filter[reset]" data-session-ignore="data-session-ignore" class="btn btn-warning reset-cookie-form-action btn"><i class="fas fa-eraser me-1"></i>Effacer filtre</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <input type="hidden" id="tiers_filter__token" name="tiers_filter[_token]" value="3d4.opRwh5IK6qmaAwzIQLfH0fgyAYE6DPzVO-7lmw9tE2Y.86Mozd1OjfqjTEeYM9bzubZta-VbXLCfC96QzVUaYTfL3zTs30iu29NmNA">
   </form>
</div>

[kevinpapst]

Difference of card and new collapsible component (see below):

WDYT about this templates/embeds/collapsible.html.twig proposal?

{% set collapsed = false %}
{% set fullsize = true %}
{% extends '@Tabler/embeds/card.html.twig' %}
{% block box_title %}{% endblock %}
{% block box_body %}
    {% set _id = id ?? tabler_unique_id('accordion_') %}
    {% set _flush = flush ?? false %}
    {% set _always_open = alwaysOpen ?? false %}
    {% set _open = open ?? false %}
    {% set _id = 'collapsible_' ~ _id %}
    {% set _id_collapse = 'collapsible_' ~ _id ~ '_item' %}

    <div id="{{ _id }}" class="accordion {% if _flush == true %}accordion-flush{% endif %}{% block class %} {% endblock %}">
        <div class="accordion-item {% block item_class %} {% endblock %}">
            <div class="accordion-header" id="{{ _id }}_heading">
                <button class="accordion-button {% if not _open %}collapsed{% endif %}"
                        type="button" data-bs-toggle="collapse" data-bs-target="#{{ _id_collapse }}"
                        aria-expanded="true">
                    {% block title %}{% endblock %}
                </button>
            </div>

            <div id="{{ _id_collapse }}" {% if _always_open == false %}data-bs-parent="#{{ _id }}"{% endif %}
                 class="accordion-collapse collapse {% if _open %}show{% endif %}">
                <div class="accordion-body pt-0">
                    {% block body %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

Can be used like that:

    {% embed '@theme/embeds/collapsible.html.twig' with permissionOpts %}
        {% block title %}File permissions{% endblock %}
        {% block body %}
                   .....
        {% endblock %}
    {% endembed %}

Basically like the card embed, but only body (instead of box_body) and title (instead of box_title) blocks

[cavasinf]

Replying in the new PR.
Do we close that one?