patternfly / patternfly/react-data-view

DataViewToolbar: Pagination misaligned from rest of toolbar

Aperta Adatta ai principianti
#692 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
4
Fork
21
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Hey PatternFly team!😁

I was recently working with the DataViewToolbar component attempting to align the toolbar with the pagination in the same row. Currently, when passing a pagination prop to the component the pagination is not aligned in the same row as the rest of the toolbar. Example (and this same behavior is displayed in the examples in the component's docs):

Image

PatternFly's toolbar design guidelines recommend these be aligned in the same row.

After some investigation, I found the pagination is wrapped in a div that uses flex with a set width of 100%. This causes the pagination to render in its own row distinct from the rest of the toolbar. Link to code referenced

Please implement a fix that aligns the pagination in the same row as the rest of the toolbar. Thank you!😄


Jira Issue: PF-4529

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

Inizia in packages/module/src/DataViewToolbar/DataViewToolbar.tsx, nel pagination wrapper indicato nell’issue, quindi confronta il comportamento del componente con gli esempi della documentazione di DataViewToolbar. Conferma la correzione verificando che la paginazione venga renderizzata sulla stessa riga del resto del contenuto della toolbar, in linea con le linee guida di progettazione della toolbar.

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

Valutazione

Stack tecnologico
typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Tranquilla
Chiarezza
Specificata chiaramente
Idoneità per principianti
78/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.