Merge pull request yapplabs#81 from yapplabs/document-checked-class

add `checkedClass` to the readme and touch-up some tests

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 1.2.3
+ - adds `checkedClass` to override the default "checked" classname on the label when it is checked
+
 ### 1.2.2
  - adds `ariaDescribedby`
 

README.md

@@ -65,16 +65,17 @@ If you want more control over the DOM, the non-block form only emits a single in
 
 | name       | type      | description            |
 |------------|-----------|------------------------|
+| ariaDescribedby | string | applies an `aria-describedby` attribute to the input element |
+| ariaLabelledby | string | applies an `aria-labelledby` attribute to the input element |
 | autofocus  | boolean   | applies the `autofocus` property to the input element |
+| checkedClass | string  | classname to apply to the `label` element when the input it wraps is checked. block form only. defaults to `"checked"` |
 | classNames | string    | applies additional classnames to the `label` element (block form only) |
 | disabled   | boolean   | applies the `disabled` property to the input element  |
 | name       | string    | applies the `name` property to the input element      |
 | radioClass | string    | applies additional classnames to the input element    |
 | radioId    | string    | sets the `id` of the input element and the `for` property to the label element |
 | required   | boolean   | applies the `required` property to the input element  |
 | tabindex   | number    | applies a `tabindex` property to the input element    |
-| ariaLabelledby | string | applies an `aria-labelledby` attribute to the input element |
-| ariaDescribedby | string | applies an `aria-describedby` attribute to the input element |
 
 *Actions:*
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-radio-button",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "provides a radio-button component",
   "keywords": [
     "ember-addon",

tests/unit/components/labeled-radio-button-test.js

@@ -38,8 +38,8 @@ test('it gives the label of a wrapped checkbox a `checked` className', function(
   assert.equal(this.$('label').hasClass('checked'), true);
 });
 
-test('it gives the label of a wrapped checkbox a user supplied `checked` className', function(assert) {
-  assert.expect(2);
+test('supplying `checkedClass` gives the label a custom classname when the radio is checked', function(assert) {
+  assert.expect(3);
 
   this.set('value', 'component-value');
 
@@ -53,11 +53,12 @@ test('it gives the label of a wrapped checkbox a user supplied `checked` classNa
     {{/labeled-radio-button}}
   `);
 
-  assert.equal(this.$('label').hasClass('my-custom-class'), false);
+  assert.equal(this.$('label').hasClass('my-custom-class'), false, 'does not have user-provided checkedClass');
+  assert.equal(this.$('label').hasClass('checked'), false, 'does not have the `checked` class');
 
   this.set('value', 'initial-group-value');
 
-  assert.equal(this.$('label').hasClass('my-custom-class'), true);
+  assert.equal(this.$('label').hasClass('my-custom-class'), true, 'has user-provided checkedClass');
 });
 
 test('it gives the label of a wrapped radio button a `for` attribute', function(assert) {

tests/unit/components/radio-button-test.js

@@ -109,8 +109,8 @@ test('it gives the label of a wrapped checkbox a `checked` className', function(
   assert.equal(this.$('label').hasClass('blue-radio'), true, 'has class `blue-radio`');
 });
 
-test('it gives the label of a wrapped checkbox the user supplied `checked` className', function(assert) {
-  assert.expect(4);
+test('providing `checkedClass` gives the label a custom classname when the radio is checked', function(assert) {
+  assert.expect(5);
 
   this.set('groupValue', 'initial-group-value');
   this.set('value', 'component-value');
@@ -127,11 +127,12 @@ test('it gives the label of a wrapped checkbox the user supplied `checked` class
     {{~/radio-button}}
   `);
 
-  assert.equal(this.$('label').hasClass('my-custom-class'), false);
+  assert.equal(this.$('label').hasClass('my-custom-class'), false, 'does not have user-provided checkedClass');
 
   this.set('value', 'initial-group-value');
 
-  assert.equal(this.$('label').hasClass('my-custom-class'), true, 'has `checked` class');
+  assert.equal(this.$('label').hasClass('checked'), false, 'does not have the `checked` class');
+  assert.equal(this.$('label').hasClass('my-custom-class'), true, 'has user-provided checkedClass');
   assert.equal(this.$('label').hasClass('ember-radio-button'), true, 'has class `ember-radio-button`');
   assert.equal(this.$('label').hasClass('blue-radio'), true, 'has class `blue-radio`');
 });