patternfly / patternfly/patternfly-react

ToolbarItem - expand-all variant should include expand all icon

Offen
#9,641 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

re: https://github.com/patternfly/patternfly-react/pull/9605/files

The expand all icon is currently something the user passes, but for us to mirror it automatically in RTL in the CSS, our component should be updated to include it for the user. This button is primarily for an expandable data-list and table, and the expand toggles in those components supply the icon, so the toolbar probably should, too, and would provide consistency in the icons used. We could probably do it a couple of ways:

  1. Keep everything the way it is now, but update <ToolbarExpandIconWrapper> to include the icon for the user. And rename it to <ToolbarExpandAllIcon>? That aligns with the core class. IMO that should be updated whether we use it as a wrapper or not.
  2. Update <ToolbarItem variant="expand-all"> to bundle the 1) toggle button, 2) <ToolbarExpandIconWrapper>/<ToolbarExpandAllIcon>, and 3) the icon. Chatting with @thatblindgeye, we could also allow tooltip props in case someone wants a tooltip for the button.

As far as I can tell, the data list and table do not allow the user to pass their own icon to the expandable toggle, so I don't know that we need to allow for that in the toolbar, either? If we do, there is a question of whether it should go in <ToolbarExpandIconWrapper>/<ToolbarExpandAllIcon> or not, which will rotate (when expanded) and mirror (in RTL) the icon the user passes.

My vote would be for the second option.


Jira Issue: PF-118

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

Beginne mit der Untersuchung der expand-all-Variante von ToolbarItem und der Implementierung von ToolbarExpandIconWrapper. Vergleiche sie anschließend mit den erweiterbaren Toggles in den data-list- und table-Komponenten. Kläre, welche der vorgeschlagenen APIs verwendet werden soll, und überprüfe, dass das resultierende Icon in erweiterten und RTL-Zuständen konsistent ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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