patternfly / patternfly/patternfly-react

Table - add docs for using with container queries

Offen Anfängerfreundlich
#12,550 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

PF Team Stale
Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

A short version of it is in core here - https://www.patternfly.org/components/table/html#responsive-layout-modifier-usage

IMO I'd like to at least update the wording so that "container queries" or "container query" are on the page somewhere in case someone searches for it. From the core docs, instead of this

Note: If a wrapping element creates an inline-size or size container with the container name pf-v6-contain-table, the breakpoints will apply to the container's width.

I'd advocate we add another h3 under the grid classes table with "Container queries" and some text like

To base the table's responsive classes on a container's width rather than the viewport, apply a CSS container named pf-v6-contain-table to the target ancestor element. For example:

.my-table-wrapper {
  container: pf-v6-contain-table / inline-size;
}

Jira Issue: PF-4418

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Lesen Sie die vorhandene Table-Dokumentation und vergleichen Sie sie mit der im Issue verlinkten Verwendung des responsive-layout-Modifikators von core Table. Suchen Sie den Abschnitt zu den Grid-Klassen, fügen Sie durchsuchbare Hinweise zu Container Queries und das CSS-Beispiel pf-v6-contain-table hinzu und überprüfen Sie anschließend, dass die gerenderte Seite die neue Überschrift und Erklärung enthält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
78/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.