feat(buttons): Add property for title attribute on button components (#…

…102)

README.md

@@ -155,6 +155,10 @@ Requires two properties:
 * `for`, the name of the tag
 * `editor`, the `editor` instance from `mobiledoc-editor`
 
+And accepts one optional property:
+
+* `title`, added as the `title` attribute on the `button` element
+
 Creates a `<button>` element that has a class of `active` when the provided
 section tag is used in the current selection. For example:
 
@@ -179,6 +183,10 @@ Requires two properties:
 * `for`, the name of the tag
 * `editor`, the `editor` instance from `mobiledoc-editor`
 
+And accepts one optional property:
+
+* `title`, added as the `title` attribute on the `button` element
+
 Creates a `<button>` element that has a class of `active` when the provided
 markup tag is used in the current selection. For example:
 
@@ -202,6 +210,10 @@ Requires one property:
 
 * `editor`, the `editor` instance from `mobiledoc-editor`
 
+And accepts one optional property:
+
+* `title`, added as the `title` attribute on the `button` element
+
 Creates a `<button>` element that has a class of `active` when the an `a`
 tag is used in the current selection. For example:
 

addon/components/mobiledoc-link-button/component.js

@@ -6,7 +6,7 @@ let { computed, Component } = Ember;
 export default Component.extend({
   tagName: 'button',
   layout,
-  attributeBindings: ['type'],
+  attributeBindings: ['type', 'title'],
   classNameBindings: ['isActive:active'],
   type: 'button',
   isActive: computed.bool('editor.activeMarkupTagNames.isA'),

addon/components/mobiledoc-markup-button/component.js

@@ -7,7 +7,7 @@ let { computed, observer, defineProperty, Component } = Ember;
 export default Component.extend({
   tagName: 'button',
   layout,
-  attributeBindings: ['type'],
+  attributeBindings: ['type', 'title'],
   classNameBindings: ['isActive:active'],
   type: 'button',
   init() {

addon/components/mobiledoc-section-button/component.js

@@ -7,7 +7,7 @@ let { computed, observer, defineProperty, Component } = Ember;
 export default Component.extend({
   tagName: 'button',
   layout,
-  attributeBindings: ['type'],
+  attributeBindings: ['type', 'title'],
   classNameBindings: ['isActive:active'],
   type: 'button',
   init() {

tests/integration/components/mobiledoc-link-button/component-test.js

@@ -33,6 +33,23 @@ test('it displays button', function(assert) {
     'button activates');
 });
 
+test('it includes `title` attribute when provided', function(assert) {
+  this.render(hbs`{{mobiledoc-link-button title=title}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.attr('title'),
+    undefined,
+    'button does not have a `title` attribute by default');
+
+  this.set('title', 'Link');
+
+  assert.equal(
+    button.attr('title'),
+    'Link',
+    'button has `title` attribute when provided');
+});
+
 test('it yields for html', function(assert) {
   this.set('editor', {
     toggleLink() {},

tests/integration/components/mobiledoc-markup-button/component-test.js

@@ -33,6 +33,23 @@ test('it displays button', function(assert) {
     'button activates');
 });
 
+test('it includes `title` attribute when provided', function(assert) {
+  this.render(hbs`{{mobiledoc-markup-button for="strong" title=title}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.attr('title'),
+    undefined,
+    'button does not have a `title` attribute by default');
+
+  this.set('title', 'Bold');
+
+  assert.equal(
+    button.attr('title'),
+    'Bold',
+    'button has `title` attribute when provided');
+});
+
 test('it yields for html', function(assert) {
   this.set('editor', {
     toggleMarkup() {},

tests/integration/components/mobiledoc-section-button/component-test.js

@@ -33,6 +33,23 @@ test('it displays button', function(assert) {
     'button activates');
 });
 
+test('it includes `title` attribute when provided', function(assert) {
+  this.render(hbs`{{mobiledoc-section-button for="strong" title=title}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.attr('title'),
+    undefined,
+    'button does not have a `title` attribute by default');
+
+  this.set('title', 'Bold');
+
+  assert.equal(
+    button.attr('title'),
+    'Bold',
+    'button has `title` attribute when provided');
+});
+
 test('it yields for html', function(assert) {
   this.set('editor', {
     toggleSection() {},