MozillaWiki

Gaia/Shared/Components: Difference between revisions

Page Discussion

Gaia/Shared/Components (view source)

Revision as of 15:54, 7 January 2016

949 bytes added ,  7 January 2016
→‎Can Use
(up)
 
(23 intermediate revisions by 2 users not shown)
Line 8: Line 8:
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks MDN]
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks MDN]


=== Is Gaia Components Ready? ===
== Is Gaia Components Ready? ==


Here is the [http://gaia-components.github.io/gaia-components/ demo page] of current gaia components.
Here is the [http://gaia-components.github.io/gaia-components/ demo page] of current gaia components.
Line 14: Line 14:
Available components are listed below with readiness matrix.
Available components are listed below with readiness matrix.


==== Progress ====
=== Progress ===
 
Slide for [https://docs.google.com/presentation/d/110vjnTRqUZli1Jz4Qy8zviKIpIMio2lSt84Tpa672jU/edit?usp=sharing current gaia component status] at end of June.


Gaia adaption progress is tracked in {{bug|1002417}} and pending due to wait for decisions of UX style refresh.
Gaia adaption progress is tracked in {{bug|1002417}} and pending due to wait for decisions of UX style refresh.
Line 32: Line 34:
* Syntax check: add basic lint check, example, readme to improve the code maintenance
* Syntax check: add basic lint check, example, readme to improve the code maintenance


==== Web Component support status ====
=== Web Component support status ===


* Firefox: '''Under flag''': [https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox need enable dom.webcomponents.enabled in about:config]
* Firefox: '''Under flag''': need enable [https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox dom.webcomponents.enabled] in about:config


* FirefoxOS: '''Under flag''': use WebIDE to open `preference table` to enable dom.webcomponents.enabled on device
* FirefoxOS: '''permission needed''': add '''"moz-extremely-unstable-and-will-change-webcomponents": {}''' permission in manifest.webapp's '''permissions''' section


Platform support issues are tracked in {{bug|811542}}
Platform support issues are tracked in {{bug|811542}}
Line 44: Line 46:
* ::shadow {{bug|1112251}}
* ::shadow {{bug|1112251}}


==== In Use ====
=== Web Component Specs ===
* Web Components: [http://w3c.github.io/webcomponents/explainer/ http://w3c.github.io/webcomponents/explainer/]
* Shadow DOM: [http://w3c.github.io/webcomponents/spec/shadow/ http://w3c.github.io/webcomponents/spec/shadow/]
* HTML Import: [http://w3c.github.io/webcomponents/spec/imports/ http://w3c.github.io/webcomponents/spec/imports/]
* Custom Element: [http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/]
 
== Component Readiness Level ==
 
=== In Use ===


These elements already used in gaia
These elements already used in gaia
Line 58: Line 68:
| [http://www.github.com/gaia-components/gaia-theme/ gaia-theme] || O || - || - || - || ? || x || [http://gaia-components.github.io/gaia-theme/ O] || x
| [http://www.github.com/gaia-components/gaia-theme/ gaia-theme] || O || - || - || - || ? || x || [http://gaia-components.github.io/gaia-theme/ O] || x
|-
|-
| [http://www.github.com/gaia-components/gaia-toast/ gaia-toast] || O || ? || ? || {{bug|1162043}} || ? || x || [http://gaia-components.github.io/gaia-toast/ O] || {{bug|1160022}}
| [http://www.github.com/gaia-components/gaia-toast/ gaia-toast] || O || ? || ? || O || ? || x || [http://gaia-components.github.io/gaia-toast/ O] || {{bug|1160022}}
|-
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_confirm gaia-confirm]* || O || ? || ? || ? || ? || x || x || {{bug|1160024}}
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_confirm gaia-confirm]* || O || ? || ? || ? || ? || x || x || {{bug|1160024}}
|-
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_subheader gaia-subheader]* || O || ? || ? || ? || ? || x || x || x
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_subheader gaia-subheader]* || O || ? || ? || O || ? || x || x || x
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_switch gaia-switch]* || O || ? || ? || O || ? || x || x || x}
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_radio gaia-radio]* || O || ? || ? || O || ? || x || x || x
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_checkbox gaia-checkbox]* || O || ? || ? || O || ? || x || x || x
|-
| [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements/gaia_menu gaia-menu]* || O || ? || ? || O || ? || x || x || x
|}
|}


* gaia-confirm is mimic Building Block style and now only located in gaia/shared/elements
* gaia-confirm, gaia-subheader, gaia-switch, gaia-radio, gaia-checkbox, gaia-menu are Building Block style component and now only located in gaia/shared/elements
* gaia-subheader is mimic Building Block style and now only located in gaia/shared/elements (don't miss it with gaia-sub-header, which comes with new style)
* (try not mix gaia-subheader with gaia-sub-header, they are totally different)


==== Can Use ====
=== Can Use ===


These elements UX is correct, encourage to be used in master to improve element quality and maintainance
These elements UX is correct, encourage to be used in master to improve element quality and maintainance
Line 76: Line 94:
! Name !! UX !! RTL !! Perf !! Accessibility !! Syntax !! Cross !! Preview !! Meta Bugs
! Name !! UX !! RTL !! Perf !! Accessibility !! Syntax !! Cross !! Preview !! Meta Bugs
|-
|-
| [http://www.github.com/gaia-components/gaia-button/ gaia-button] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Buttons X] || O || ? || {{bug|1162138}} || O || x || [http://gaia-components.github.io/gaia-button O] || {{bug|1160032}}
| [http://www.github.com/gaia-components/gaia-button/ gaia-button] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Buttons X] || O || ? || O || O || x || [http://gaia-components.github.io/gaia-button O] || {{bug|1160032}}
|-
|-
| [http://www.github.com/gaia-components/gaia-checkbox/ gaia-checkbox] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Switches O] || ? || ? || {{bug|1162094}} || ? || x || x || {{bug|1160021}}
| [http://www.github.com/gaia-components/gaia-checkbox/ gaia-checkbox] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Switches O] || ? || ? || O || ? || x || x || {{bug|1160021}}
|-
|-
| [http://www.github.com/gaia-components/gaia-toolbar gaia-toolbar] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Toolbars O] || ? || ? || {{bug|1162096}} || ? || x || [http://gaia-components.github.io/gaia-toolbar O] || {{bug|1160018}}
| [http://www.github.com/gaia-components/gaia-toolbar gaia-toolbar] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Toolbars O] || ? || ? || O || ? || x || [http://gaia-components.github.io/gaia-toolbar O] || {{bug|1160018}}
|-
|-
| [http://www.github.com/gaia-components/gaia-text-input/ gaia-text-input] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Input_area O] || O || ? || {{bug|1162103}} || ? || x || [http://gaia-components.github.io/gaia-text-input O] || {{bug|1160012}}
| [http://www.github.com/gaia-components/gaia-text-input/ gaia-text-input] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Input_area O] || O || ? || O || ? || x || [http://gaia-components.github.io/gaia-text-input O] || {{bug|1160012}}
|-
|-
| [http://www.github.com/gaia-components/gaia-subheader gaia-sub-header]* || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Subheader P] || ? || ? || {{bug|1162130}} || ? || ? || x || x
| [http://www.github.com/gaia-components/gaia-subheader gaia-sub-header]* || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Subheader P] || ? || ? || O || ? || ? || x || x
|}
|}


* UX: gaia-sub-header 's slide menu part is not ready for use.
* UX: gaia-sub-header 's slide menu part is not ready for use.


==== Not Ready But in Use ====
=== Not Ready But in Use ===


Spark already use some of components that can not pass UX review.
Spark already use some of components that can not pass UX review.
Line 106: Line 124:
|}
|}


==== Not Ready ====
=== Not Ready ===


Others components are not ready yet (can not pass UX review), if you want to use them, please ni UX review first.
Others components are not ready yet (can not pass UX review), if you want to use them, please ni UX review first.
Line 123: Line 141:
|}
|}


==== Utility ====
=== Utility ===


{| class="wikitable sortable"
{| class="wikitable sortable"
Line 132: Line 150:
|}
|}


==== ChangeLog ====
=== ChangeLog ===
* 2015/5/8 gaia-button change from Not Ready to Can Use state
* 2015/5/8 gaia-button change from Not Ready to Can Use state
* 2015/5/21 add `basic treatment` and `Not ready but in use` section
* 2015/5/21 add `basic treatment` and `Not ready but in use` section
* 2015/5/26 gaia-icon accessibility is ready
* 2015/5/26 gaia-icon accessibility is ready
* 2015/5/29 gaia-switch accessibility is ready
* 2015/5/29 gaia-switch accessibility is ready
* 2015/10/30 Settings is migrated to gaia-radio*/gaia-checkbox*/gaia-switch* (with Building Block style)


== Gaia Components Basic Treatments ==
== Gaia Components Basic Treatments ==
Line 170: Line 189:
=== Performance ===
=== Performance ===


Always measuring then improving.
Always '''measuring then improving'''.


You can compare the component created time by browse your FxOS device to `http://localhost:8000/test/stress.html` (run on local server). Make sure you measure the performance with real device. Or the result will be not really useful.
You can compare the component created time by browse your FxOS device to `http://localhost:8000/test/stress.html` (run on local server). Make sure you measure the performance with real device. Or the result will be not really useful.
Line 178: Line 197:
Most of accessibility(a11y) enhancements could be pre-defined by component. The component user could benefit from a11y automatically.
Most of accessibility(a11y) enhancements could be pre-defined by component. The component user could benefit from a11y automatically.


The component should inherit from proper native element, and add proper role of aria.
The '''component should inherit from proper native element''', and add proper role of aria.
http://rawgit.com/w3c/aria/master/aria/aria.html
http://rawgit.com/w3c/aria/master/aria/aria.html


For example, button should inherit from `HTMLButtonElement` and have `role=button` attribute.
For example, button should inherit from `HTMLButtonElement` and have `role=button` attribute.


The current name or state should be exposed to ScreenReader as well. For example, button should have `aria-checkd="true" aria-disabled="true"` when button is checked and disabled.
The '''current name or state should be exposed''' to ScreenReader as well. For example, button should have `aria-checkd="true" aria-disabled="true"` when button is checked and disabled.
 
* '''use setAttribute''' to set aria attribute to host element but not inner element to prevent double trigger the related event.


PS: To enable Screen reader on FxOS device, tap up then down button trice. then tap up then down button trice again.
PS: To enable Screen reader on FxOS device, tap up then down button trice. then tap up then down button trice again.
== Specs ==
* Web Components: [http://w3c.github.io/webcomponents/explainer/ http://w3c.github.io/webcomponents/explainer/]
* Shadow DOM: [http://w3c.github.io/webcomponents/spec/shadow/ http://w3c.github.io/webcomponents/spec/shadow/]
* HTML Import: [http://w3c.github.io/webcomponents/spec/imports/ http://w3c.github.io/webcomponents/spec/imports/]
* Custom Element: [http://w3c.github.io/webcomponents/spec/custom/ http://w3c.github.io/webcomponents/spec/custom/]
Yzen
64

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1077532...1111735"