mozilla-b2g / gaia-ui-building-blocks

DEPRECATED - UI Building Blocks for Mozilla Boot to Gecko Gaia project

Gaia UI Building Blocks

gaia-ui-building-blocks's Issues

[header] Using header bb will cause root region to be larger then viewport frame disallowing async animations.

To see this in action turn on layers.offmainthreadcomposition.log-animations and do an animation on a section with a header building block applied. This greatly effect the performance of any app with a "drawer" (about a 30 fps difference when animating that region).

Here are the relevant rules and how to disable them:

/* actually for issue https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/issues/37 */
.icon {
  text-indent: 0 !important;
  font-size: 0px;
  line-height: 2.5rem;
  margin-left: 0 !important;
}

body[role="application"] section[role="region"] > header h1 {
  margin-left: 0 !important;
}

body[role="application"] section[role="region"] > header {
  margin-left: 0px !important;
}

section[role="region"] > header:first-child h1 {
  margin: 0 !important;
}

Hopefully some of this is fixable in gecko upstream but if possible we should try to fix it here first so our animations perform better.

make Building-Blocks bower installable

I tried to register buildingblocks to bower, so user can run bower install buildingblocks to get the UI blocks.
https://github.com/bower/bower

To auto update the Building-Blocks version, the git tag need to use the formalized format defined in http://semver.org/
such as 1.0.0 or 1.0.0-alpha.1 or v1.0.0 (v will be ignored)

Why using body[role="application"] in almost all selectors

May I know if there is any specific purpose we are using body[role="application"] in the CSS selectors of building blocks?

e.g.

  body[role="application"] [role="dialog"] {
   ... 
  }

I think only "[role="dialog"]" is enough for what we want to achieve.

The actual case affected by this in Gaia is System app.
apps/system/index.html
We may not want to add [role="application"] to its body.

Thanks.

404 on the gihub page

Page: http://mozilla-b2g.github.com/Gaia-UI-Building-Blocks/index.html
When I go to the github page, the phone displays the following message:

404
There isn't a GitHub Page here.
Are you trying to publish one? We'll send you an email when your page has been built. It may take up to ten minutes until your page is available.

input areas' use of reset inputs resets entire form

The input area building blocks example shows an idiom of using multiple <p><input /><button type="reset"></p> blocks within a single "form" tag. While the reset button is styled in such a way that implies it resets only the input box in question, it will in fact reset every input within the form.

Based on how "reset" works, it seems like the example should be updated to contain each input within its own form (although that seems semantically ugly), or a JS helper is required.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of mozilla-b2g/Gaia-UI-Building-Blocks!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mozilla-b2g/Gaia-UI-Building-Blocks is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mozilla-b2g/Gaia-UI-Building-Blocks",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Lack of documentation

I don’t understand the file structure. Having a README.md file in the root directory and in every child directory would help a lot.

Experimenting with vertical alignment for the listitems

We might need some more markup.

Come up with a file structure that simplifies using the BB in apps

it is necessary to define a file structure that allows to use and replace easily the Gaia Building Blocks in apps. Should we have a folder per building block, a folder containing all building blocks? How this relates to the standard layout of files in Gaia?

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

Avoid `class` and `data-*` attributes as much as possible!

I see a lot of i-* classes and data-* attributes in this repository. This leads to a point where we have all the drawbacks of a framework. We really don’t want that to happen.

I might be missing a point here, but I have the impression that many of these class/data-* attributes are completely useless, and that many of them could be replaced by aria-* roles.

If there are some remaining cases where classes are required, they should be filed very specifically and sharply documented.

stable example links broken because gaia's gh-pages branch is gone?

If you browse to http://mozilla-b2g.github.com/Gaia-UI-Building-Blocks/ and try and look at any of the stable examples, you will just get a 404 in the little phone iframe. I no longer see a gh-pages branch in gaia, so I presume this is the problem...

Duplicate repository

What is the difference between this repository and https://github.com/buildingfirefoxos/Building-Blocks?

It looks like this one is not maintained anymore. I nominate this repository either be deleted or point to https://github.com/buildingfirefoxos/Building-Blocks in the README. Doing this would reduce confusion which repository is the source of truth.

I discovered this repo when searching for the bower project which is supposed to host it: http://bower.io/search/?q=building

What do you think?

Markup for lists

This issue is for starting a discussion on the markup to be used for Lists. Lists are an important building block for B2G UI as they will be used in many different apps such as Contacts, Call Log, SMS, and more.

Here are some proposed principles: anything with a role="list" that is a descendent of <body role="application"> will be considered as a list in terms of styling.

<body role="application">

<ul role="list">
<li role="listitem"></li>
</ul>

I know it is a bit redundant as ul, ols and li has this intrinsically this role but it allows to avoid using arbitrary class names in our markup.

There are lists in which the user can make a selection (for instance to select a set of FB contacts to be synchronized). In that particular case the correct role to be used is 'listbox'. In that case the markup will include the <input type="checkbox" necessary.

now the next discussion is what markup should be used for what it is inside a listitem. This can be tricky, because it depends on the different variants for lists (see visual designs). The first thing we need to support is a figure associated to the list item that should be floated to the right. This can be done by using the figure element

<li role="listitem">
<figure><img src=""></figure>
</li>

We can have different icons within a list item

<li role="listitem">
<span class="icon left missed-call">Missed Call</span>
</li>

We can have also time elements that denote when an specific event happened. For doing so the time element should be used.

Now that we have defined the auxiliary items within a listitem We need to make a decision on how to define the markup for the text.

One option is to use the <dl><dt><dd> pattern. Being the dt the main content and the rest content that complements it

<dl>
<dt>Mark Alfenito</dt>
<dd>Family</dd>
</dl>

We can have also

<dl>
<dt>Mark alfenito</dt>
<dd><time>4:00</time></dd>
<dd>Vivo</dd>
</dl>

Another example could be something like

<dl>
<dt>John Doe</dt>
<dd><time>2:00 PM</dd>
<dd>
<hgroup>
<h1>This is the subject of the message</h1>
<h2>This is an extract of the message</h2>
</hgroup>
</dd>
</dl>

Missing markup for the tabs (+tabbars)

Kaze proposed to work on this.

Need to add him as a repo collab.

Project should start using git tags.

It's hard to use this project as a external library - project folders structure changes without making a new tag in repository! Now our build is broken!

When master changes new release should be made (new tag).

• Tagging.
• Versioning.
• Project could be also added to Bower repository.

Using text-indent -9999px to hide text can cause element not to be pre-rendered.

When using a building block icon you will start getting async log warning about some element in your document that can no longer run async animations because its frame is larger then the viewport. This can cause slow animations when using drawer (and any other animation that effects the main role="region").

This probably need to be paired with a gecko bug?

indentation should follow the Gaia guidelines

= 2 spaces, no tabs. Many HTML and CSS files are concerned.

Radio/checkboxes: where should we put the spans?

Looks like we're going to need to add a span in order to style everything.

Should it be:

• Around the input?
• Next to the input?

HTML templates should pass the W3C validator

I’ve found (and corrected) a few HTML files where the opening <html> tag was missing. There are invalid attributes in other HTML files.

I understand running a local HTML5 validator isn’t trivial. At the very least, HTML files should be checked against an HTML5 validator after they’re published on gh-pages.