[1.1.2] Introduire composant(s) tableau ?

Upstream documentation: https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tab...

We don't need a "Table row" component because there is no specific markup there:

<div class="fr-table">
    <div class="fr-table__wrapper">
        <div class="fr-table__container">
            <div class="fr-table__content">
                <table>
                    <caption>
                        Titre du tableau (caption)
                    </caption>
                    <thead>
                        <tr>
                            <th scope="col">
                                th0
                            </th>
                            <th scope="col">
                                th1
                            </th>
                            <th scope="col">
                                th2
                            </th>
                            <th scope="col">
                                th3
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                Lorem [...] elit ut.
                            </td>
                            <td>
                                Lorem [...] elit ut.
                            </td>
                            <td>
                                Lorem [...] elit ut.
                            </td>
                            <td>
                                Lorem [...] elit ut.
                            </td>
                        </tr>
                        ...
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

So, the table's <code>body

slot can expect a list of a list of renderables. We will need to check the 2 levels structure in the Twig template.

If this make using this component in Views rows more difficult, let's address this in UI Patterns module.

I will review this before merge

we are maybe not ready yet, but we are taking a specific direction, that would be good to validate the direction :)
for example for props being array of attributes

let's not forget to use sdc_devel

let's not forget to use sdc_devel<

And vincentlanglet/twig-cs-fixer for linting the Twig. And pretttier for linting the YAML.

pdureau → credited goz → .

pdureau → credited mogtofu33 → .

Finally, we have 2 components: table & cell because of this kind of markup:

fr-cell--top : Alignement vertical en haut.
fr-cell--bottom : Alignement vertical en bas.
...

And maybe other fr-cell modifiers, lets check: https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tab...

By the way, can we also add the block class (fr-cell)? Missing from examples but not BEM compliant.

There is also fr-col--xs, fr-col--sm, fr-col--md or fr-col--lg in 1.14 (not documented but found in the preview). But that doesn't necessary mean it will be an additional component, because it follows HTML logic with colgroup & col, so a mechanism inside table component.

It would be great to test those 2 components with Views, to check if UI Patterns 2 is already able to manage tables without specific row component.

I work on top of Mikael work on his MR.

I add the cell component.

Remove row and cell attributes which are not defined by dsfr.
Cell attributes are now directly managed by cell component.

Provide 3 stories :

• Preview
• Fixed headers (but with dsfr, only column can be fixed)
• Alignments (vertical and horizontal)

By default with component integration in views, i cannot produce a working view with table/cell component. Some errors occures

May be i'm wrong, here is how i configure my view :

Format with table component, display cell component

Format settings :

Display settings, i cannot configure to display the rendered field without defining a specific field

In any case, submitting generate an error

InvalidArgumentException: "component_id" is an invalid render array key. Value should be an array but got a string. in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).

Drupal\Core\Render\Renderer->doRender() (Line: 222)
Drupal\Core\Render\Renderer->render() (Line: 491)
Drupal\Core\Template\TwigExtension->escapeFilter() (Line: 194)

I have know no errors on display, but can only have one cell/field in a row (here title)

Now we have a pretty OK compoennt structure, let's check if it is usable by UI Patterns before merging.

Proposals:

1. At the ViewRow level, add a new ViewRow plugin which is removing the view_fieldstheme wrapper
2. At the ViewRow level, alter ViewRow::render() outputs to remove view_fields theme wrapper
3. At the ViewStyle level, remove the view_fields theme wrapper from ViewRowsSource::getPropValue()