Polymer-based web components for D2L buttons
AdmiralCoco Merge pull request #142 from AdmiralCoco/minor-fixes-for-p3-conversion
Add minor fixes to prepare for Polymer 3 conversion
Latest commit 25f04d4 Nov 14, 2018
Permalink
Failed to load latest commit information.
demo Minor fixes to floating-buttons-helper Nov 13, 2018
screenshots using a smaller file for the floating buttons screenshot (previous wa… Aug 27, 2018
test a11ySuite works best inside a suite Aug 24, 2018
.editorconfig Use consistent naming for eslint config. Jan 11, 2018
.eslintrc.json Use consistent naming for eslint config. Jan 11, 2018
.gitattributes using a smaller file for the floating buttons screenshot (previous wa… Aug 27, 2018
.gitignore Adding package-lock.json to .gitignore. Feb 16, 2018
.travis.yml Fix local chrome tests Jul 11, 2018
CODEOWNERS fixing owners Aug 11, 2017
LICENSE updating license file Feb 10, 2016
README.md using a smaller file for the floating buttons screenshot (previous wa… Aug 27, 2018
all-imports.html initial icon work May 7, 2018
bower.json Update to latest version of d2l-polymer-behaviors. Aug 20, 2018
d2l-button-behavior.html prevent user tapping and triggering action when a button is disabled Oct 12, 2018
d2l-button-icon.html prevent user tapping and triggering action when a button is disabled Oct 12, 2018
d2l-button-shared-styles.html update styles to be consistent with design May 9, 2018
d2l-button-subtle.html add a slot to d2l-button-subtle Sep 5, 2018
d2l-button.html Updated tests. I added display none to the other elements. Aug 24, 2018
d2l-button.scss Fix Sass for translucent icon button. Aug 16, 2018
d2l-floating-buttons.html Add minor fixes to prepare for Polymer 3 conversion Nov 14, 2018
index.html Update title in index.html. Jan 11, 2018
package.json Add minor fixes to prepare for Polymer 3 conversion Nov 14, 2018
polymer.json Hybridize Jun 26, 2017
wct.conf.json prevent user tapping and triggering action when a button is disabled Oct 12, 2018

README.md

d2l-button

Published on webcomponents.org Bower version Build status

A series of Polymer-based web components and Sass mixins for D2L buttons.

screenshot of button component

screenshot of subtle button component

screenshot of icon button component

For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.

Installation

d2l-button can be installed from Bower:

bower install d2l-button

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-button.html:

Button

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-button/d2l-button.html">
</head>

The <d2l-button> element can be used just like the native button element, but also supports the primary attribute for denoting the primary button.

Normal button:

screenshot of normal buttons

Primary button:

screenshot of primary buttons

<d2l-button primary>Primary</d2l-button>
<d2l-button>Secondary</d2l-button>
<d2l-button disabled>Disabled</d2l-button>

As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:

@import 'bower_components/d2l-button/d2l-button.scss';

.my-button {
	@include d2l-button();
}

The primary and disabled attributes work the same way as they do with the web component.

Subtle Button

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-button/d2l-button-subtle.html">
</head>

The subtle button shows text with an optional icon, and can be added by using the <d2l-button-subtle> custom element. It should be used for advanced or de-emphasized actions.

Without icon:

screenshot of subtle buttons without icons

With icon:

screenshot of subtle buttons with icons

With icon on right:

screenshot of subtle buttons with icon on the right

Alignment (bottom uses h-align="text")

screenshot of subtle buttons with different alignments

<d2l-button-subtle text="Subtle Button"></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:bookmark-hollow" text="Subtle Button with Icon"></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:bookmark-hollow" text="Subtle Button with Right Icon" icon-right></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:gear" text="Disabled Button" disabled></d2l-button-subtle>
<d2l-button-subtle icon="d2l-tier1:gear" text="Text Aligned" h-align="text"></d2l-button-subtle>

As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:

@import 'bower_components/d2l-button/d2l-button.scss';

.my-button {
	@include d2l-button-subtle();
}

Usage is slightly different in that the text and icon attributes are not used, and instead their content is added within the button. For example:

<button class="my-button">
	<d2l-icon icon="d2l-tier1:gear"></d2l-icon>
	Subtle Button with icon
</button>

Icon Button

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-button/d2l-button-icon.html">
</head>

The icon button shows an icon with an aria-label, and can be added by using the <d2l-button-icon> custom element. It should be used when icons perform a clickable action.

screenshot of icon buttons

Alignment (bottom uses h-align="text")

screenshot of icon buttons with different alignments

Translucent (for use on rich/busy backgrounds, specify the translucent attribute)

screenshot of icon buttons with different alignments

<d2l-button-icon icon="d2l-tier1:bookmark-hollow" text="Bookmark"></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Translucent" translucent></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Settings (disabled)" disabled></d2l-button-icon>
<d2l-button-icon icon="d2l-tier1:gear" text="Text Aligned" h-align="text"></d2l-button-icon>

As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements:

@import 'bower_components/d2l-button/d2l-button.scss';

.my-button-icon {
	@include d2l-button-icon();
}

Usage is slightly different in that the text and icon attributes are not used. Instead, the icon is added within the button and the aria-label is added as a button attribute. For example:

<button class="my-button-icon" aria-label="Settings">
	<d2l-icon icon="d2l-tier1:gear"></d2l-icon>
</button>

Floating Workflow Buttons

Floating workflow buttons behavior can be added by using the <d2l-floating-buttons> custom element. When the normal position of the workflow buttons is below the bottom edge of the view-port, they'll dock at the bottom edge. When the normal position becomes visible, they'll undock.

screenshot of floating buttons

<head>
	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-button/d2l-button.html">
	<link rel="import" href="../d2l-button/d2l-floating-buttons.html">
</head>

Include the <d2l-floating-buttons> container at the bottom of the page, and add your workflow button elements:

<d2l-floating-buttons>
	<d2l-button primary>Save</d2l-button>
	<d2l-button>Cancel</d2l-button>
</d2l-floating-buttons>

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test