From 64fa83528ea74438da379b6ad438f6271b6f38e1 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Sun, 14 Feb 2016 17:14:19 -0800
Subject: [PATCH] more concistent disable function

---
 src/scripts/lib/manipulators.js       |  2 ++
 src/styles/clay/_base.scss            |  5 +++++
 src/styles/clay/components/color.scss |  8 +-------
 test/spec/lib/manipulators.js         | 22 +++++++++++++++++++---
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js
index c68eab6..e117b2c 100755
--- a/src/scripts/lib/manipulators.js
+++ b/src/scripts/lib/manipulators.js
@@ -4,6 +4,7 @@
  * @returns {ClayEvents}
  */
 function disable() {
+  this.$element.set('+disabled');
   this.$manipulatorTarget.set('disabled', true);
   return this.trigger('disabled');
 }
@@ -12,6 +13,7 @@ function disable() {
  * @returns {ClayEvents}
  */
 function enable() {
+  this.$element.set('-disabled');
   this.$manipulatorTarget.set('disabled', false);
   return this.trigger('enabled');
 }
diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
index 120f4a4..6a468fa 100644
--- a/src/styles/clay/_base.scss
+++ b/src/styles/clay/_base.scss
@@ -86,6 +86,11 @@ label {
 .component {
   padding-bottom: $item-spacing-v;
   @include tap-highlight();
+
+  &.disabled {
+    opacity: 0.25;
+    pointer-events: none;
+  }
 }
 
 .section {
diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss
index 241a78f..2d0d9d9 100644
--- a/src/styles/clay/components/color.scss
+++ b/src/styles/clay/components/color.scss
@@ -9,15 +9,9 @@
     box-shadow: $box-shadow-small-components;
   }
 
-  input:disabled ~ .value,
-  input:disabled ~ .label {
-    opacity: 0.25;
-  }
-
   .picker-wrap {
     left: 0;
     top: 0;
-    top: 0;
     right: 0;
     bottom: 0;
     position: fixed;
@@ -47,7 +41,7 @@
     height: 0;
     width: 100%;
     padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0em;
+    margin: 0.6em 0 0;
 
     .color-box-container {
       position: absolute;
diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js
index 878e84b..5b3eb48 100644
--- a/test/spec/lib/manipulators.js
+++ b/test/spec/lib/manipulators.js
@@ -40,8 +40,15 @@ describe('manipulators', function() {
         var handlerSpy = sinon.spy();
         var clayItem = fixture.clayItem(itemType);
         clayItem.on('disabled', handlerSpy);
-
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          false
+        );
         clayItem.disable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          true
+        );
         assert.strictEqual(clayItem.$manipulatorTarget.get('disabled'), true);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
@@ -54,13 +61,22 @@ describe('manipulators', function() {
    * @return {void}
    */
   function testEnable(itemType) {
-    describe('.disable()', function() {
-      it('disables the field then triggers an "enabled" event', function() {
+    describe('.enable()', function() {
+      it('enables the field then triggers an "enabled" event', function() {
         var handlerSpy = sinon.spy();
         var clayItem = fixture.clayItem(itemType);
         clayItem.on('enabled', handlerSpy);
 
+        clayItem.disable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          true
+        );
         clayItem.enable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          false
+        );
         assert.strictEqual(clayItem.$manipulatorTarget.get('disabled'), false);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');