search

openui / open-ui

Maintain an open standard for UI and promote its adherence and adoption.
https://open-ui.org
Other
3.59k stars 191 forks source link

Tabs: Provide better use cases #189

Open matthewp opened 4 years ago

matthewp commented 4 years ago

The proposals doc has a few use cases but we can find more / better ones. Examples: from open-source implementation guides, from apps that use tabs such as Twitter, etc.

bkardell commented 4 years ago

There are currently two examples in the doc:

  1. Steve is researching for an upcoming vacation for him and his family. He opens his web browser and opens a new tab to make a rental car reservation and another for his flight information. Steve can quickly switch back and fourth (sic) between tabs to get the information he needs for the rental car reservation.

  2. Monika visits a website to learn how to fix her leaky sink. The website displays a vertical tab interface with each step. Monika can jump ahead steps or go back to previous steps by selecting various tabs.

Thanks to whoever put this together, and please read this as trying to be constructive and not just negative, but I think we should have more and different use cases...

Do we expect that people will be able to make browser tabs with these? Like, does that belong under use cases? Am I misunderstanding the scope of open-ui maybe? If not, I think this is just noise. While we might popularly call browser tabs 'tabs', many operating systems and UI toolkits there have evolved numerous 'tab-like' things which aren't quite the same at all[1] - in much the same way that navigation on the web is sometimes rendered in things that 'look like' tabs, but aren't really what we're discussing at all. I'd rather avoid these problems to start with if possible.

While it 2 seems actually really reasonable to me, since it involves something with 'steps' I feel like it's not the best example to use if we have better ones. The reason I mention this is that every design guide I see from material (used by android) to salesforce to apple to even old things like this SAP experience guide goes out of their way to say something about don't use it for things where order matter.[2]

What I think is worth stressing is that the use cases are really anything which intends to provide thematically grouped, independent, non-sequential, labelled, one at a time views, such as:

Any group of independent, labelled sections about

[1] I'm not an expert, but just as an exampIe, following MS's Fluent links it seems to me like their TabView defined in Windows UI Library is one thing, but they also have Navigation and Pivot. Looking at them and their guidance and limits, 'tabs on the web' seem more like Pivot component. That might be entirely wrong, of course, be wrong as I am not well-versed on those.. I guess my question stands though about whether that is actually a use case and is it also 'more' than basic tabs?

[2] While I expect that what the use case means to explain is something which would probably be just fine, it seems to require the clear definition of why that matters (as I tried to provide a little in #192) -it is independent, stateless sections, etc . But everyone has something like "We don't recommend using tabs to define a linear, ordered process since each tab functions independently of the others." (salesforce) "Don’t use tabs to move through sequential content that needs to be read in a particular order." (material) and so on. However, even having said, material's "don't" example just uses chapters which I think could be fine for the same reasons tbh in most books... But, why include an example that is potentially question raising/entices rabbit hole diving if we don't have to, I guess, is my point.

matthewp commented 4 years ago

@bkardell can you explain the difference between tabs and what is used for browser tabs?

bkardell commented 4 years ago

@matthewp as I linked in the footnotes above, just in the one MS toolkit one you have

All of which we might somehow think about as 'tabs' but which have developed into independent controls for a reason, with their own qualities and advice about when to use them. Again note that the one that is common in the web browser seems (to me, ianae on this system) more like what they call pivot than what they call a tab tho. I just think we need to be careful and clear about what we are aiming for and it wasn't my impression someone would be building browser tabs, I guess? If so, it seems we might have a lot more work to do/a harder time than if that wasn't a use case.

matthewp commented 4 years ago

I don't see how the fact that they have multiple tabs components means that the browser tabs aren't tabs. For all I know those might be wrapping a common tabs component. Or they might just be named differently because different teams created them (big org). Unless there are specific differences between what the OS uses for browser tabs than what we know as tabs on the web, then I think it stands as a good use-case.

Beaker Browser is implemented using web components and has a tabs implementation for its browser tabs: https://github.com/beakerbrowser/beaker/blob/master/app/fg/shell-window/tabs.js . I think we should explore if there's reason why these tabs can/cannot share an implementation.

bkardell commented 4 years ago

Beaker Browser is implemented using web components and has a tabs implementation for its browser tabs: https://github.com/beakerbrowser/beaker/blob/master/app/fg/shell-window/tabs.js . I think we should explore if there's reason why these tabs can/cannot share an implementation.

It's not that they can't share implementation, I guess -- at some level it all shares the DOM, but that's not super helpful. It's also not that I don't think you might be able to - what I am talking about is focusing on what are the in scope abstraction features OOTB and not something you could maybe potentially add more on top of to make something like browser tabs. Of all of the linked research ones (which we can link to now yay) in , it seems that they share the qualities more like pivot ootb (in fact, one of them is pivot). Not all of them even have space for an icon built in, but above and beyond that, browser tabs commonly also have

They also don't have the same keyboard controls as ones in a browser usually afaik, allow some cooperation with the containing window about the stuff inside the active panel, have and, probably more. I'd like to say "while you might be able to build that or any other number of things on top - that stuff is out of scope for native implementations, at least initially". So, if browser tabs are the rare case, and you could only build them with tabs+custom code to add that other stuff, they seem like not the best example. If we want to be able to make all of that built in power, we need super capable tabs that yes, also exist... But I think it's a distraction and probably harms ability to make good progress. Maybe I'm wrong - I'm happy to be wrong too - I'm just offering thoughts.

github-actions[bot] commented 2 years ago

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.