Gaia/Shared/Components
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 https://github.com/gaia-components
The new Building Block style guide is located in MDN https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
Is Gaia Components Ready?
Here is the demo page of current gaia components http://gaia-components.github.io/gaia-components/
Available components are listed below with readiness matrix.
Progress
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
- Overall Performance: use raptor to check if it lag the current app
- 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.
- Syntax check: add basic lint check and improve the code maintainance
Web Component support status
- Firefox: Under flag: need enable dom.webcomponents.enabled in about:config
- FirefoxOS: Under flag: use WebIDE to open `preference table` to enable dom.webcomponents.enabled on device
Platform support issues are tracked in bug 811542
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 | - | - | bug 1162040 | - | x | O | x |
| gaia-theme | O | - | - | - | ? | x | O | x |
| gaia-toast | O | ? | ? | bug 1162043 | ? | x | O | bug 1160022 |
| gaia-confirm* | O | ? | ? | ? | ? | x | x | bug 1160024 |
| gaia-subheader* | O | ? | ? | ? | ? | x | x | x |
- gaia-confirm is mimic Building Block style 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)
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 | ? | bug 1162138 | O | x | O | bug 1160032 |
| gaia-checkbox | O | ? | ? | bug 1162094 | ? | x | x | bug 1160021 |
| gaia-toolbar | O | ? | ? | bug 1162096 | ? | x | O | bug 1160018 |
| gaia-text-input | O | O | ? | bug 1162103 | ? | x | O | bug 1160012 |
| gaia-sub-header* | P | ? | ? | bug 1162130 | ? | ? | x | x |
- UX: gaia-sub-header 's slide menu part is not ready for use.
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-list | X | ? | ? | bug 1162152 | ? | x | O | bug 1160040 |
| gaia-progress | X | ? | ? | bug 1162159 | ? | x | O | bug 1160033 |
| gaia-tabs | X | ? | ? | bug 1162170 | ? | x | X | bug 1160034 |
| gaia-slider | X | ? | ? | bug 1162175 | ? | x | x | bug 1160035 |
| gaia-switch | X | ? | ? | bug 1162180 | O | x | O | bug 1160036 |
| gaia-dialog | X | ? | ? | bug 1162184 | ? | x | x | bug 1160037 |
| 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
Gaia Components Basic Treatments
Visual
The elements UX and visual should be correct, please contact Harly (hhsu@mozilla.com, UX) or Przemek (pabratowski@mozilla.com, UI) for prove.
RTL
There's theme-selector in each component's exmaple page. Use it to check RTL support status and think about what can be supported by the component itself.
Syntax
Basic lint and unit test is required. Run `npm run lint` for link check, run `npm test` for unit test.
Performance
Create a local web server and browse your FxOS device to `http://localhost:8000/test/stress.html`. Make sure you measure the performance with real device. Or the result will not really useful.
Accessibility
Most of accessibility(a11y) enhancements could be pre-defined by component designer. The component user could benifit from a11y automatically.
To enable screen reader on FxOS, tap up then down button trice. then tap up then down button trice again.
The component should inherit proper role of aria. http://rawgit.com/w3c/aria/master/aria/aria.html
For example, button should have `role=button`.
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.