This is a meta bug collecting all tv_shared components that need to be moved to gaia-components. For now all components are moved to a repository called smart-components: https://github.com/smart-components And we would like to merge them into gaia-components https://github.com/gaia-components

Hello Kevin: To kick it off, we are deciding to move these components into gaia-components first: smart-button (which is a tv-style button) smart-bubbles (which is a component that animates child elements like "bubbling up each of them one-by-one") smart-banner (which is for showing tv pop-up notification) menu-group (which is a menu that expands when focus) After components are ready, we'll modify Gaia code correspondingly. (see depends-on bugs) I guess we need your help to open these repository for us first, may you help?

This plan sounds like a good starting point to me. I can create the repo, or I think we can also just add people to the gaia-components org. It should be totally fine if you're in one of the mozilla-b2g orgs. (In reply to KM Lee [:rexboy] from comment #1) > smart-button (which is a tv-style button) About this specifically, I'm not familiar with the appearance of this button. Should we unify the styling with the gaia-button component? We could have a theme="tv" or similar which would apply the TV styling. What do you think? I think we can probably start this work now, but let's leave the ni? on Wilson and he can chime in when he's back.

For smart-button, you can see one of its use case in this video: https://drive.google.com/a/mozilla.com/folderview?id=0B2-G3kew1WpXTVlQT3lzY1NOWlU&usp=sharing&tid=0B2-G3kew1WpXLURNc29vTWl5eUk The application icons in the video are a type of smart-button. There are also simpler types like icon-only or text-only type. Since it covers more complex structure and keyboard/focus manipulation that matters to TV, it's more than a style-change of a button. I would suggest that it would be better to let merging them to be a future plan.

If you would like to add peole to gaia-components, some of current suggested reviewers in TV apps would be candidates: :rexboy (https://github.com/rexboy7) :tzhuang (https://github.com/dwi2) :johnhu (https://github.com/huchengtw-moz)

(In reply to KM Lee [:rexboy] from comment #4) > If you would like to add peole to gaia-components, some of current suggested > reviewers in TV apps would be candidates: > :rexboy (https://github.com/rexboy7) > :tzhuang (https://github.com/dwi2) > :johnhu (https://github.com/huchengtw-moz) I've added all three accounts to the organization. You should be receiving an e-mail soon to confirm it. Thanks!

Thank you Kevin! We are now moving some already in use components there.

(In reply to Kevin Grandon :kgrandon from comment #2) > This plan sounds like a good starting point to me. I can create the repo, or > I think we can also just add people to the gaia-components org. It should be > totally fine if you're in one of the mozilla-b2g orgs. > > (In reply to KM Lee [:rexboy] from comment #1) > > smart-button (which is a tv-style button) > > About this specifically, I'm not familiar with the appearance of this > button. Should we unify the styling with the gaia-button component? We could > have a theme="tv" or similar which would apply the TV styling. What do you > think? > > > I think we can probably start this work now, but let's leave the ni? on > Wilson and he can chime in when he's back. Can we clarify what the differences are between gaia-button and smart-button? I'd say for now it seems safer to have them separate, but perhaps we can looks towards merging them if they are similar enough. I'd like to see the 'smart-' prefix changed to something more like 'gaia-tv-'. I find 'smart' rather misleading, it suggests the component itself is actually 'smart'.

Looking even further forward I'd like to switch 'gaia-' to 'fxos-' (and thus 'fxos-tv-'). No-one outside Mozilla knows what Gaia is/means.

Hi Wilson, Let me explain a two thoughts while we creating these components. 1. We encourage component users to override our CSS because different apps may have different UI sizes/style in our Visual specs. Unlike gaia-components, we don't use scoped CSS which let users harder to override. I know it is still possible. But users should write longer selector to have higher selectivity. For shadow DOM, we are intent not to use it because the TV product running on 2.1 where we don't have fully-grown css selector for overriding, like: shadow :context, :host, etc. I think this one is the main different between smart components and gaia components. And the main reason, we prefer not to use "gaia-components" module. 2. We must support keyboard because it is TV, of course. So, the main different between `gaia-button` and `smart-button` is that smart button looks like pressed while a user presses "enter" key, bounces back while user releases "enter" key, and a click event is fired after releasing. 3. If possible, we should support mouse, touch, and keyboard at the same time. But it's a pity that we didn't have enough time during to make it happen. So, it's glade to merge these components with gaia components. We are exciting to bring keyboard supports to gaia components. BTW, the reason we use "smart-" is that the UX designed is named as "Smart Screen" instead of TV. They want to have a set of components running on different kind of screens which are beyond phone. I think they will be glade that we use the same components on all of Firefox OS devices, including phone, TV, watch, etc. Another reason we use "smart-" as prefix is that our build system may have some issues to run tests while two apps have the same name. So, you may find some of our apps are leading with "smart-". We all feel it's so stupid to have such kind of prefix, "smart-". I will be very glade to rename the "smart-" to "fxos-tv-" and I will let them know this. Thanks for the suggestion.

(In reply to John Hu [:johnhu][:johu][:醬糊小弟] from comment #9) > Hi Wilson, > > Let me explain a two thoughts while we creating these components. > 1. We encourage component users to override our CSS because different apps > may have different UI sizes/style in our Visual specs. Unlike > gaia-components, we don't use scoped CSS which let users harder to override. > I know it is still possible. But users should write longer selector to have > higher selectivity. For shadow DOM, we are intent not to use it because the > TV product running on 2.1 where we don't have fully-grown css selector for > overriding, like: shadow :context, :host, etc. So if I understand correctly, you don't want to use shadow-dom until it's fully implemented? It would be great if you could add keyboard support to our components. Can we get the merging of smart- and gaia- components on the roadmap for v3?

(In reply to Wilson Page [:wilsonpage] from comment #10) > (In reply to John Hu [:johnhu][:johu][:醬糊小弟] from comment #9) > > Let me explain a two thoughts while we creating these components. > > 1. We encourage component users to override our CSS because different apps > > may have different UI sizes/style in our Visual specs. Unlike > > gaia-components, we don't use scoped CSS which let users harder to override. > > I know it is still possible. But users should write longer selector to have > > higher selectivity. For shadow DOM, we are intent not to use it because the > > TV product running on 2.1 where we don't have fully-grown css selector for > > overriding, like: shadow :context, :host, etc. > > So if I understand correctly, you don't want to use shadow-dom until it's > fully implemented? Yes, you are correct. But the main thought is we want to give component users to have the flexibility to override visual, just like using other HTML DOM elements. > It would be great if you could add keyboard support to our components. Can > we get the merging of smart- and gaia- components on the roadmap for v3? It would be great to propose this task into the roadmap for v3. We will discuss this with EM and others Device Team devs for resource arrangement. The final components should and will have both mouse, touch, and keyboard support once we merge them.

Firefox OS is not being worked on