search

mui / toolpad

Toolpad: Full stack components and low-code builder for dashboards and internal apps.
https://mui.com/toolpad/
MIT License
1.28k stars 283 forks source link

[RFC] UI Terminology #878

Closed bytasv closed 2 years ago

bytasv commented 2 years ago

What's the problem? šŸ¤”

While working on Toolpad documentation (https://github.com/mui/mui-toolpad/pull/859) we kicked off a discussion about what should be the right name to call certain sections of Toolpad app.

image

What are the requirements? ā“

What are our options? šŸ’”

Left and Right

Left:

Right

Top

Middle

Components drawer

This is not a finite list, we can keep adding options to consider

Proposed solution šŸŸ¢

Left - Explorer Right - Inspector Top - Navigation Middle - Canvas Component drawer - Component library

Relevant resources/benchmarks šŸ”—

image

image

image

bytasv commented 2 years ago

My personal preference for each:

Left

  1. Explorer - because we can "explore" and select instances of our app. I also think that maybe it would be good to have queries and mutations selectable in the explorer in the future (but that's another topic)
  2. Left sidebar - my 2nd option - left because it's immediately clear which side and sidebar well because it's side and sidebar is also pretty common term to know that it takes entire height of something šŸ¤”

Right

  1. Inspector - because we can "inspect" and change properties of selected components
  2. Properties - different variation instead of inspector šŸ˜…
  3. Right sidebar - if we choose to call left as Left sidebar

Top

  1. Navigation - we kinda navigate between releases/editor/preview
  2. Toolbar - would be my primary choice but we don't really expose much "tooling" there so doesn't seem exactly correct to use this

Middle Editor - seems it's also consistently used in many other IDEs

Components drawer

  1. Components' library - IMO this is implementation agnostic name
  2. UI Library - same as 1st and also either of two sounds good to me
Janpot commented 2 years ago

Middle: I'd call it "canvas". I'd reserve "Editor" or "Studio" for the combination of "left"+"center"+"right". figma for instance uses canvas. framer as well. It's the "canvas" that you draw your UI on.

Top: I'd go with "Navigation bar" because it's about navigating toolpad as a whole. I'd reserve "toolbar" for future use. e.g. inside of the aforementioned "Editor"

apedroferreira commented 2 years ago

I like "app canvas" too for the middle section. I would also change Component's library to just Component library, without the 's, seems better and more correct that way. About the top, "navbar" or "navigation" sound good. Not too sure about the left section, "app explorer" doesn't sound bad.

prakhargupta1 commented 2 years ago

Left: Left sidebar Right: Right sidebar Top: Header bar Middle: Canvas Component library

Janpot commented 2 years ago

Left: Left sidebar Right: Right sidebar

Would we ever consider a right-to-left mode for the UI?

bytasv commented 2 years ago

Would we ever consider a right-to-left mode for the UI?

I have no idea, but wondering have you ever seen software with such mode? (curious, because I haven't, just heard about webpages for content that do that)

samuelsycamore commented 2 years ago

+1 for "Component library" / "Component drawer" as the grammatically correct phrasing! :)

Janpot commented 2 years ago

It just seems suboptimal to me to describe the segments by "where" they are instead of "what" they are. Describing them by "what" they are could also serve as a forcing function for us to think about what function they have within the hierarchy of the application, and help us decide where to add certain future features.

samuelsycamore commented 2 years ago

It just seems suboptimal to me to describe the segments by "where" they are instead of "what" they are.

Agreed!

I like Explorer for the left sidebar (this is the same term that VS Code uses for this) and Inspector or Properties for the right. Explorer / Inspector has a nice parallel structure, but Properties might be more accurate for the right side.

bytasv commented 2 years ago

@Janpot what's your vote for left/right then?

Janpot commented 2 years ago

"Explorer"/"Inspector" makes sense. But I have no strong preference, as long as it's describing the "what" and not the "where".

prakhargupta1 commented 2 years ago

The reason I said left and right sidebar was that we may put something on the left that may not qualify to be put under Explorer, or something on the right that may not qualify for Inspector. Though these two terms seem appropriate.

Janpot commented 2 years ago

we may put something on the left that may not qualify to be put under Explorer

Yes, that's a good concern. We could also think differently about it. As in "if we can't come up with a good descriptive name for what's under this panel, perhaps that means the way we are structuring our application is not logical". It could go both ways. Explorer/Inspector are quite broad terms though, but as far as I'm concerned, we can also just change them if we start radically changing what's inside of them.

bytasv commented 2 years ago

IMO if we start seeing more items that could be put on the left side, maybe it would be worth to explore UI as in VS code where you have "activity bar" - that way we could group certain functionality under different names, but explorer would still live as is šŸ¤” Anyways, lets proceed with explorer and inspector and as Jan mentioned change it if we see it become problematic

bytasv commented 2 years ago

@mui/toolpad based on our conversation I've put a following proposal up:

Left - Explorer Right - Inspector Top - Navigation Middle - Canvas Component drawer - Component library

Lemme know if you have any concerns, if not I will close this issue and proceed with updating terminology in the docs