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
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).
Now we identify header, list, button as first batch to improve its 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
- CSS Animation: Apply smoother Animation from TV experience.
- 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
In Use
These elements already used in gaia
| Name | UX | RTL | Perf | Accessibility | Syntax | Cross | Preview | Meta Bugs |
|---|---|---|---|---|---|---|---|---|
| gaia-header | O | ? | ? | O | ? | O | O | x |
| gaia-icons | O | - | - | bug 1162040 | - | ? | 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 |
- 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-checkbox | O | ? | ? | bug 1162094 | ? | x | x | bug 1160021 |
| gaia-toolbar | O | ? | ? | bug 1162096 | ? | x | O | bug 1160018 |
| gaia-text-input | O | ? | ? | bug 1162103 | ? | x | O | bug 1160012 |
| gaia-sub-header* | P | ? | ? | bug 1162130 | ? | O | 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-button | X | O | ? | ? | O | x | O | bug 1160032 |
| gaia-list | X | ? | ? | ? | ? | x | O | bug 1160040 |
| gaia-progress | X | ? | ? | ? | ? | x | O | bug 1160033 |
| gaia-tabs | X | ? | ? | ? | ? | x | X | bug 1160034 |
| gaia-slider | X | ? | ? | ? | ? | x | x | bug 1160035 |
| gaia-switch | X | ? | ? | ? | ? | x | O | bug 1160036 |
| gaia-dialog | X | ? | ? | ? | ? | x | x | bug 1160037 |
| gaia-picker | X | ? | ? | ? | ? | x | O | bug 1160038 |
| gaia-value-selector | X | ? | ? | ? | ? | x | O | bug 1160039 |
Utility
| Name | UX | RTL | Perf | Accessibility | Syntax | Cross | Preview | Meta Bugs |
|---|---|---|---|---|---|---|---|---|
| gaia-component | - | - | O | ? | ? | O | x | x |