patternfly / patternfly/patternfly-react

Table - add docs for using with container queries

Aperta Adatta ai principianti
#12,550 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

PF Team Stale
Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Leggi la documentazione esistente di Table e confrontala con l’uso del modificatore di layout responsive di core Table collegato nell’issue. Individua la sezione delle classi grid, aggiungi indicazioni ricercabili sulle container queries e l’esempio CSS pf-v6-contain-table, quindi verifica che la pagina renderizzata includa il nuovo titolo e la spiegazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
css
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
78/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.