Table vereinfachen (schlankeres Markup)

Joschka de Cuvelandrequested to merge
joschka/kern-ux-plain:simplify-table into main

Mir sind ein paar mögliche Verbesserungen an der Table aufgefallen. Alles rückwärtskompatibel, also auch "altes" Markup funktioniert weiter (hat dann nur ein paar überflüssige Klassen).

Ich würde mich freuen, wenn ihr das in Betracht zieht. Gerne auch Feedback, wie ihr euch so eine Zuarbeit wünscht.

Schlankeres Markup mit weniger Klassen

Ich glaube, bei der Table-Komponente kann das Markup etwas schlanker ausfallen. Aktuell muss ich eine Reihe von Klassen im Markup setzen:

  • <thead>: kern-table__head
  • <tbody>: kern-table__body
  • <tfoot>: kern-table__footer
  • <tr>: kern-table__row
  • <th>: kern-table__header
  • <td>: kern-table__cell

Das ist eigentlich redundant und ich schlage vor, im CSS direkt die Elemente per Element-Selektor anzusprechen, ohne die Klassen. So machen es z.B. auch:

Interessanterweise macht govuk das auch mit den Klassen: https://design-system.service.gov.uk/components/table/ (nicht optimal, wie ich finde)

So muss ich als Nutzender nur beachten, die "kern-table"-Klasse zu setzen, ansonsten "eine normale HTML-Tabelle".

Überschrift ohne kern-title

Bisher braucht die <caption> die Klasse "kern-title". Ich glaube, dass ist ein Detail, welches ich als Nutzender nicht wissen müssen sollte. Zumal aus kern-title bei der "small" Variante eine heading-small wird, was unerwartet ist. Aktuell suggeriert mir "kern-title", dass ich die Klasse ändern kann. Ich schlage vor, die Information "caption = title" ins CSS zu verlagern. (Das gleiche Muster ist mir das auch bei anderen Komponenten aufgefallen, z.B. beim Button, wo ich kern-label setzen muss.)

Sass Nesting

Ich musste die Varianten (--small, --striped) nach unten ziehen, damit sie die default styles überschreiben. Außerdem hab ich die "kern-table-responsive" rausgezogen. Ich bin darüber gestolpert, dass ich dachte -responsive wäre eine Variante wie --small und --striped und es fehlt nur ein Bindestrich. Aber eigentlich ist es ja eine eigene Komponente und nicht Teil der kern-table. Ich denke Sass Nesting ist dann am lesbarsten, wenn es die HTML-Struktur spiegelt.

Numeric modifier

Die finde ich noch etwas umständlich. Also, dass ich verschiedene Klassen für td und th setzen muss. Sie sollten wegen Rückwärtskompatibilität drinbleiben, aber vielleicht gibt es eine Idee, dass zukünftig etwas einfacher zu gestalten. Vielleicht so was wie "kern-table-numeric-field" oder einfach "text-right"...

Merge request reports