Gaia/Shared/Components: Difference between revisions

From MozillaWiki
< Gaia‎ | Shared
Jump to navigation Jump to search
 
(64 intermediate revisions by 3 users not shown)
Line 3: Line 3:
Gaia components mainly contains the web components used around gaia, which are included in [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements shared/elements]
Gaia components mainly contains the web components used around gaia, which are included in [https://github.com/mozilla-b2g/gaia/tree/master/shared/elements shared/elements]


The remote repository is used to host all components in development
The [https://github.com/gaia-components remote repository] is used to host all components in development.
https://github.com/gaia-components


The new Building Block style guide is located in MDN
Gaia components follow the new Building Block style guide, which is located in
https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks MDN]


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


Here is the demo page of current gaia components
Here is the [http://gaia-components.github.io/gaia-components/ demo page] of current gaia components.
http://gaia-components.github.io/gaia-components/


Available components are listed below with readiness matrix.
Available components are listed below with readiness matrix.


==== Progress ====
=== Progress ===


We start from UX review to make sure the component's UI/UX behavior is correct. we'll test other perspective such as RTL support, performance, accessibility, CSS naming & overall syntax check (and the cross browser support if possible).
Slide for [https://docs.google.com/presentation/d/110vjnTRqUZli1Jz4Qy8zviKIpIMio2lSt84Tpa672jU/edit?usp=sharing current gaia component status] at end of June.


Now we identify '''header, list, button''' as first batch to improve its overall readiness state.
Gaia adaption progress is tracked in {{bug|1002417}} and pending due to wait for decisions of UX style refresh.
Project [https://wiki.mozilla.org/Firefox_OS/Spark Spark] is using gaia-components as its main UI elements.
 
At this time we restart the gaia web component related work from UX review to make sure the component's UI/UX behavior is matching new UX style. We'll test other perspective such as RTL support, performance, accessibility, CSS naming & overall syntax check (and the cross browser support if possible).
 
To apply those work on real environment, we identify '''header, list, button''' as frequently used elements from spark project, initiate the first batch to improve their overall readiness state.


Fields to improve:
Fields to improve:


* UX: check if components are following the [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks UX spec]
* UX: check if components are following the [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks UX spec]
* Overall Performance: use raptor to check if it lag the current app
* RTL: check syntax is RTL compatible
* RTL: check syntax is RTL compatible
* Accessibility: check syntax is aria friendly
* Accessibility: check syntax is [https://webaccessibility.withgoogle.com/unit?unit=6 aria friendly] and inherit from correct element
* CSS Animation: Apply smoother [https://drive.google.com/a/mozilla.com/file/d/0B7NOVVetxTlTS24wZFl4OHlHVm8/view Animation] from TV experience.
* CSS Animation: Apply smoother [https://drive.google.com/a/mozilla.com/file/d/0B7NOVVetxTlTS24wZFl4OHlHVm8/view Animation] from TV experience.
* Syntax check: add basic lint check and improve the code maintainance
* Performance: create a set of performance evaluation tests to make sure the component readiness. Use raptor to check if it lag the current app
* Syntax check: add basic lint check, example, readme to improve the code maintenance
 
=== Web Component support status ===
 
* 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


==== Web Component support status ====
* FirefoxOS: '''permission needed''': add '''"moz-extremely-unstable-and-will-change-webcomponents": {}''' permission in manifest.webapp's '''permissions''' section


* Firefox: '''Under flag: need enable dom.webcomponents.enabled in about:config'''
Platform support issues are tracked in {{bug|811542}}
* :host-context() {{bug|1082060}}
* :host {{bug|992245}}
* ::content {{bug|992249}}
* ::shadow {{bug|1112251}}


* FirefoxOS: '''Under flag: use WebIDE to open `preference table` to enable dom.webcomponents.enabled on device'''
=== 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/]


==== In Use ====
== Component Readiness Level ==
 
=== In Use ===


These elements already used in gaia
These elements already used in gaia
Line 45: Line 62:
! 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-header gaia-header] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Header O] || ? || ? || O || ? || O || [http://gaia-components.github.io/gaia-header/ O] || x
| [http://www.github.com/gaia-components/gaia-header gaia-header] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Header O] || X || ? || O || O || O || [http://gaia-components.github.io/gaia-header/ O] || x
|-
|-
| [http://www.github.com/gaia-components/gaia-icons/ gaia-icons] || O || - || - || {{bug|1162040}} || - || x || [http://gaia-components.github.io/gaia-icons/ O] || x
| [http://www.github.com/gaia-components/gaia-icons/ gaia-icons] || O || - || - || O || - || x || [http://gaia-components.github.io/gaia-icons/ 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-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
| [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 69: 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-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-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] || ? || ? || 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] || ? || ? || {{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}} || ? || O || 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 ====
=== Not Ready But in Use ===


Others components are not ready yet (can not pass UX review), if you want to use them, please ni UX review first.
Spark already use some of components that can not pass UX review.


{| class="wikitable sortable"
{| class="wikitable sortable"
|-
|-
! 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-list/ gaia-list] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/List_items X] || ? || ? || {{bug|1162152}} || ? || x || [http://gaia-components.github.io/gaia-list O] || {{bug|1160040}}
| [http://www.github.com/gaia-components/gaia-list/ gaia-list] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/List_items X] || ? || ? || {{bug|1162152}} || ? || x || [http://gaia-components.github.io/gaia-list O] || {{bug|1160040}}
|-
|-
| [http://www.github.com/gaia-components/gaia-progress/ gaia-progress] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Progress_and_activity X] || ? || ? || {{bug|1162159}} || ? || x || [http://gaia-components.github.io/gaia-progress O] || {{bug|1160033}}
| [http://www.github.com/gaia-components/gaia-progress/ gaia-progress] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Progress_and_activity X] || ? || ? || {{bug|1162159}} || ? || x || [http://gaia-components.github.io/gaia-progress O] || {{bug|1160033}}
|-
| [http://www.github.com/gaia-components/gaia-switch/ gaia-switch] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Switches X] || ? || ? || O || O || x || [http://gaia-components.github.io/gaia-switch O] || {{bug|1160036}}
|-
| [http://www.github.com/gaia-components/gaia-dialog/ gaia-dialog] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Dialog X] || ? || ? || {{bug|1162184}} || ? || x || x || {{bug|1160037}}
|}
=== Not Ready ===
Others components are not ready yet (can not pass UX review), if you want to use them, please ni UX review first.
{| class="wikitable sortable"
|-
! Name !! UX !! RTL !! Perf !! Accessibility !! Syntax !! Cross !! Preview !! Meta Bugs
|-
|-
| [http://www.github.com/gaia-components/gaia-tabs/ gaia-tabs] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Tab_Filter X] || ? || ? || {{bug|1162170}} || ? || x || X || {{bug|1160034}}
| [http://www.github.com/gaia-components/gaia-tabs/ gaia-tabs] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Tab_Filter X] || ? || ? || {{bug|1162170}} || ? || x || X || {{bug|1160034}}
Line 98: Line 136:
| [http://www.github.com/gaia-components/gaia-slider/ gaia-slider] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Slider X] || ? || ? || {{bug|1162175}} || ? || x || x || {{bug|1160035}}
| [http://www.github.com/gaia-components/gaia-slider/ gaia-slider] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Slider X] || ? || ? || {{bug|1162175}} || ? || x || x || {{bug|1160035}}
|-
|-
| [http://www.github.com/gaia-components/gaia-switch/ gaia-switch] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Switches X] || ? || ? || ? || ? || x || [http://gaia-components.github.io/gaia-switch O] || {{bug|1160036}}
| [http://www.github.com/gaia-components/gaia-picker/ gaia-picker] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Picker X] || ? || ? || {{bug|1162186}} || ? || x || [http://gaia-components.github.io/gaia-picker O] || {{bug|1160038}}
|-
|-
| [http://www.github.com/gaia-components/gaia-dialog/ gaia-dialog] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Dialog X] || ? || ? || {{bug|1162180}} || ? || x || x || {{bug|1160037}}
| [http://www.github.com/gaia-components/gaia-value-selector/ gaia-value-selector] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Value_selector X] || ? || ? || {{bug|1162188}} || ? || x || [http://gaia-components.github.io/gaia-value-selector O] || {{bug|1160039}}
|-
| [http://www.github.com/gaia-components/gaia-picker/ gaia-picker] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Picker X] || ? || ? || ? || ? || x || [http://gaia-components.github.io/gaia-picker O] || {{bug|1160038}}
|-
| [http://www.github.com/gaia-components/gaia-value-selector/ gaia-value-selector] || [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/Value_selector X] || ? || ? || ? || ? || x || [http://gaia-components.github.io/gaia-value-selector O] || {{bug|1160039}}
|}
|}


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


{| class="wikitable sortable"
{| class="wikitable sortable"
Line 113: Line 147:
! 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-component gaia-component] || - || - || O || ? || ? || O || x || x
| [http://www.github.com/gaia-components/gaia-component gaia-component] || - || - || - || ? || O || O || x || x
|}
|}
=== ChangeLog ===
* 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/26 gaia-icon 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 ==
=== Visual ===
The elements UX and visual should be follow the spec on [https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks MDN]. Please contact Harly (hhsu@mozilla.com, UX) or Przemek (pabratowski@mozilla.com, UI) for provement.
=== RTL ===
There's theme-selector in each component's example page. Use it to check RTL support status and think about what can be supported by the component itself.
Make sure the style use `-moz-margin-start` instead of `margin-left`, and so on.
=== Syntax ===
Basic lint and unit test is required. Run `npm run lint` for link check, run `npm test` for unit test.
* '''Stop overriding component's CSS elements'''.
When you tempt to override component's style, DONT do it.
Firstly you can double check with UX team if this new design is follow their convention. If so, opt in to a specific style configuration that defined inside of the component (eg. `<gaia-button circular>`)
* Icon related design
Read [https://github.com/gaia-components/gaia-icons#accessibility gaia icons accessibility] for designing icon related syntax.
* Don't embed l10n directly into component
For l10n, don't embed l10n directly into component itself. l10n will work properly in the content elements. such as
  <gaia-button>
    <span data-l10n-id="ok"/>
  </gaia-button>
=== Performance ===
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.
=== Accessibility ===
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.
http://rawgit.com/w3c/aria/master/aria/aria.html
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.
* '''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.

Latest revision as of 15:54, 7 January 2016

Overview

Gaia components mainly contains the web components used around gaia, which are included in shared/elements

The remote repository is used to host all components in development.

Gaia components follow the new Building Block style guide, which is located in MDN

Is Gaia Components Ready?

Here is the demo page of current gaia components.

Available components are listed below with readiness matrix.

Progress

Slide for 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. Project Spark is using gaia-components as its main UI elements.

At this time we restart the gaia web component related work from UX review to make sure the component's UI/UX behavior is matching new UX style. We'll test other perspective such as RTL support, performance, accessibility, CSS naming & overall syntax check (and the cross browser support if possible).

To apply those work on real environment, we identify header, list, button as frequently used elements from spark project, initiate the first batch to improve their overall readiness state.

Fields to improve:

  • UX: check if components are following the UX spec
  • RTL: check syntax is RTL compatible
  • Accessibility: check syntax is aria friendly and inherit from correct element
  • CSS Animation: Apply smoother Animation from TV experience.
  • Performance: create a set of performance evaluation tests to make sure the component readiness. Use raptor to check if it lag the current app
  • Syntax check: add basic lint check, example, readme to improve the code maintenance

Web Component support status

  • 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

Web Component Specs

Component Readiness Level

In Use

These elements already used in gaia

Name UX RTL Perf Accessibility Syntax Cross Preview Meta Bugs
gaia-header O X ? O O O O x
gaia-icons O - - O - x O x
gaia-theme O - - - ? x O x
gaia-toast O ? ? O ? x O bug 1160022
gaia-confirm* O ? ? ? ? x x bug 1160024
gaia-subheader* O ? ? O ? x x x
gaia-switch* O ? ? O ? x x x}
gaia-radio* O ? ? O ? x x x
gaia-checkbox* O ? ? O ? x x x
gaia-menu* O ? ? O ? x x x
  • 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
  • (try not mix gaia-subheader with gaia-sub-header, they are totally different)

Can Use

These elements UX is correct, encourage to be used in master to improve element quality and maintainance

Name UX RTL Perf Accessibility Syntax Cross Preview Meta Bugs
gaia-button X O ? O O x O bug 1160032
gaia-checkbox O ? ? O ? x x bug 1160021
gaia-toolbar O ? ? O ? x O bug 1160018
gaia-text-input O O ? O ? x O bug 1160012
gaia-sub-header* P ? ? O ? ? x x
  • UX: gaia-sub-header 's slide menu part is not ready for use.

Not Ready But in Use

Spark already use some of components that can not pass UX review.

Name UX RTL Perf Accessibility Syntax Cross Preview Meta Bugs
gaia-list X ? ? bug 1162152 ? x O bug 1160040
gaia-progress X ? ? bug 1162159 ? x O bug 1160033
gaia-switch X ? ? O O x O bug 1160036
gaia-dialog X ? ? bug 1162184 ? x x bug 1160037

Not Ready

Others components are not ready yet (can not pass UX review), if you want to use them, please ni UX review first.

Name UX RTL Perf Accessibility Syntax Cross Preview Meta Bugs
gaia-tabs X ? ? bug 1162170 ? x X bug 1160034
gaia-slider X ? ? bug 1162175 ? x x bug 1160035
gaia-picker X ? ? bug 1162186 ? x O bug 1160038
gaia-value-selector X ? ? bug 1162188 ? x O bug 1160039

Utility

Name UX RTL Perf Accessibility Syntax Cross Preview Meta Bugs
gaia-component - - - ? O O x x

ChangeLog

  • 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/26 gaia-icon 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

Visual

The elements UX and visual should be follow the spec on MDN. Please contact Harly (hhsu@mozilla.com, UX) or Przemek (pabratowski@mozilla.com, UI) for provement.

RTL

There's theme-selector in each component's example page. Use it to check RTL support status and think about what can be supported by the component itself.

Make sure the style use `-moz-margin-start` instead of `margin-left`, and so on.

Syntax

Basic lint and unit test is required. Run `npm run lint` for link check, run `npm test` for unit test.

  • Stop overriding component's CSS elements.

When you tempt to override component's style, DONT do it. Firstly you can double check with UX team if this new design is follow their convention. If so, opt in to a specific style configuration that defined inside of the component (eg. `<gaia-button circular>`)

  • Icon related design

Read gaia icons accessibility for designing icon related syntax.

  • Don't embed l10n directly into component

For l10n, don't embed l10n directly into component itself. l10n will work properly in the content elements. such as 

 <gaia-button>
   
 </gaia-button>

Performance

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.

Accessibility

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. http://rawgit.com/w3c/aria/master/aria/aria.html

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.

  • 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.

Retrieved from "https://wiki.mozilla.org/index.php?title=Gaia/Shared/Components&oldid=1111735"