Deprecation of `Toolbar` in favor of new `Flex` component

Offen
  • Stimmt etwas nicht?
#600 1 Kommentar 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@adamkudrna arbeitet bereits daran.

Seit 10.3.2025.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

feature

Today we discussed that Toolbar and ToolbarGroup have dense prop (and that we would like to get rid of ToolbarItem in future if possible). When we look at Grid component, we can see that there are columnGap and rowGap props available. We decided we want to deprecate dense prop and replace it with gap prop. If we want to match Grid props, I would suggest to have columnGap and rowGap instead of gap as it would be better for end-user and we currently have scenarios in which those two gaps can differs.

I thought I would be able to introduce those props easily, but I found out that it would be better to refactor whole Toolbar component and its subcomponents. Why? If you compare Toolbar and Grid props, you can spot the difference:

Grid:

Image

Toolbar:

Image

Grid is far more advanced than Toolbar is. It would be better to abstract logic from Grid and use it with Toolbar. That would cleanToolbar code, but it would require the change of shape of the props as Grid allows to specify value per breakpoint.

If we touch the props, it would be also good to unify naming to have same props for Grid and for Toolbar as they are same on CSS level.

That being said, this would require far more work than simply deprecating dense prop. At this stage, it would be better (in my opinion) to deprecate whole Toolbar component and to finally introduce Flex component we wanted to introduce anyway.

We wanted Flex component and this is the time we can solve more problems with it. We should leave Toolbar deprecated until 1.0.0 is released for smoother transition.

This is my recommendation after quick attempt to solve dense-related issue. What do you think @adamkudrna @mbohal?

Vorherrschende Sprache
TypeScript
Sterne
23
Forks
10
Ø Merge
5 T. 14 Std.
Gemergte PRs (30 T.)
9

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

  • Kein Dockerfile und keine Docker-Compose-Datei
  • Keine Pull-Request-Vorlage
  • Kein Beitragsleitfaden

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-ui-org/react-ui

Alle Issues in react-ui-org/react-ui

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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