FirefoxUX / photon-components-web

INACTIVE - http://mzl.la/ghe-archive - Photon versions of the some common WebComponents

https://FirefoxUX.github.io/photon-components-web/

Mozilla Public License 2.0

29 stars 11 forks source link

Initial implementation of Tab and TabSet components #71

Closed lmorchard closed 5 years ago

lmorchard commented 5 years ago

Fixes #2

lmorchard commented 5 years ago

GitHub Pages Deployment

Storybook: https://FirefoxUX.github.io/photon-components-web/commits/735176153be96dec80b0441fa2fdef92fa156854/ Build: https://FirefoxUX.github.io/photon-components-web/commits/735176153be96dec80b0441fa2fdef92fa156854/dist.zip

lmorchard commented 5 years ago

Still a work in progress, but I'm opening the PR to maybe get some feedback.

This is about 80% done, except for the parts related to "many tabs" and "long labels". I'm not sure when those aspects of the design come into play. Some kind of responsive layout that should apply on a certain max width? Do we have an example of this in action somewhere already, by chance?

/cc @aminalhazwani

aminalhazwani commented 5 years ago

Cool @lmorchard, thanks for reaching out!

Some minor things we noticed during a first review with @shorlander:

we could remove the focus on pressed/active state, this happens on other components too, we opened #72
as you said the label overflow is missing when the viewport is small. Could we assign a min-width to the tabs?
regarding the tab scrolling it depends on the container. it could be triggered on a mobile-like size, we will investigate this more!
we are going to do some explorations to better mark active tabs even when they are in focus. Eg move the tab selector higher to make it visible during focus.

lmorchard commented 5 years ago

Removing the "WIP" from the title - per the last status chat we had, I think we want to start getting these PRs merged earlier & more often and continue to iterate, rather than letting them just stay open.

lmorchard commented 5 years ago

GitHub Pages Deployment

Storybook: https://FirefoxUX.github.io/photon-components-web/commits/2e37aa250dc46f24ba7670adaf8fe9cd31228717/ Build: https://FirefoxUX.github.io/photon-components-web/commits/2e37aa250dc46f24ba7670adaf8fe9cd31228717/dist.zip