gaia-button syntax proposal v2

gaiabutton.md

<gaia-button>

Installation

$ bower install gaia-components/gaia-button

Then include folowing files in HTML

<link href="bower_components/gaia-icons/gaia-icons.css"></link>
<script src="bower_components/gaia-list/gaia-button.js"></script>

You don't have to include gaia-icon.css if you does not use icon in button.

Examples

• Example

Usage

Button that contain text needs to include data-l10n-id attribute for localization.

<gaia-button data-l10n-id="">normal button<gaia-button>

With icon

• {Start icon} button text

Button can show with icon at left

<button data-icon="back-light" data-l10n-id="back">Back</button>

• button text {End icon}

Button can show with icon at right

<button data-icon-end="forward-light" data-l10n-id="forward">Forward</button>

• {Start icon} button text {End icon}

Button can show with icon on both side

<button data-icon="" data-icon-end="" data-l10n-id="quote">Quote</button>

disable

Add disabled attribute to disable the button.

<gaia-button disabled>button disabled</gaia-button>

Circular

Add circular attribute to turn button into circular form.

<gaia-button data-icon="camera" circular data-l10n-id="camera"></gaia-button>

RTL

gaia-button is RTL ready. The icon and text position will be changed base on RTL settings.

Accessibility

aria-disabled="true" is added automatically when button comes with disabled attribute. So the screen reader will read the button text and note it was disabled.

• standalone icon butotn:

<gaia-button data-l10n-id=""><gaia-button>

When the button only contains an icon, adding data-l10n-id to the element with data-icon that points to {property}.ariaLabel in the properties file (that will add an aria-label attribute to the same element and will not touch inner HTML).

• {Start icon} {End icon}

Screen reader can not read anything. Like above case, You can add data-l10n-id in gaia-button and add {property}.ariaLabel in the properties file.

• {Meaningful icon} button text

Meaningful icon is where the icon complements text in a meaningful way, ex: ♥ location. You can add data-l10n-id in gaia-button and add {property}.ariaLabel in the properties file to make Screen reader read proper text.

Tests

1. Ensure Firefox Nightly is installed on your machine.
2. $ npm install
3. $ npm test

If your would like tests to run on file change use:

$ npm run test-dev

Lint check

Run lint check with command:

$ npm run lint