From ca498c6e3cb6a37f7199ce9e37282978cd3dcdb9 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 14:35:39 +1100
Subject: [PATCH 1/6] fix tap-highlight and missing divider

---
 dev/custom-fn.js                              |  4 ++--
 src/styles/clay/_base.scss                    | 19 +++++++++++++------
 src/styles/clay/components/checkboxgroup.scss |  3 ---
 src/styles/clay/components/radiogroup.scss    |  3 ---
 src/templates/components/checkboxgroup.tpl    |  2 +-
 src/templates/components/color.tpl            |  2 +-
 src/templates/components/input.tpl            |  2 +-
 src/templates/components/radiogroup.tpl       |  2 +-
 src/templates/components/select.tpl           |  2 +-
 src/templates/components/toggle.tpl           |  2 +-
 10 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/dev/custom-fn.js b/dev/custom-fn.js
index 4688283..259bc60 100644
--- a/dev/custom-fn.js
+++ b/dev/custom-fn.js
@@ -10,9 +10,9 @@ module.exports = function() {
    */
   function toggleBackground() {
     if (this.get()) {
-      Clay.getItemByAppKey('background').enable();
+      Clay.getItemByAppKey('colorTest').enable();
     } else {
-      Clay.getItemByAppKey('background').disable();
+      Clay.getItemByAppKey('colorTest').disable();
     }
   }
 
diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
index 6a468fa..f39338b 100644
--- a/src/styles/clay/_base.scss
+++ b/src/styles/clay/_base.scss
@@ -83,9 +83,12 @@ label {
   }
 }
 
+.tap-highlight {
+  @include tap-highlight();
+}
+
 .component {
   padding-bottom: $item-spacing-v;
-  @include tap-highlight();
 
   &.disabled {
     opacity: 0.25;
@@ -108,10 +111,10 @@ label {
     &:last-child,
     &:first-child {
       padding-bottom: $item-spacing-v;
-      
-      &:after {
-        display: none;
-      }
+    }
+
+    &:last-child:after {
+      display: none;
     }
 
     &:after {
@@ -130,6 +133,10 @@ label {
   .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
+
+    &:after {
+      display: none;
+    }
   }
 
 }
@@ -160,7 +167,7 @@ a {
     .input {
       display: table-cell;
     }
-    
+
     .input {
       text-align: right;
     }
diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss
index 88585a7..c8b2720 100644
--- a/src/styles/clay/components/checkboxgroup.scss
+++ b/src/styles/clay/components/checkboxgroup.scss
@@ -3,10 +3,8 @@
 
 .component-checkbox {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss
index 2db5ea3..f83bffd 100644
--- a/src/styles/clay/components/radiogroup.scss
+++ b/src/styles/clay/components/radiogroup.scss
@@ -3,10 +3,8 @@
 
 .component-radio {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl
index 203e2d2..f97d9d0 100755
--- a/src/templates/components/checkboxgroup.tpl
+++ b/src/templates/components/checkboxgroup.tpl
@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="checkbox-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="checkbox"
diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl
index 9e985c6..e2c8bae 100755
--- a/src/templates/components/color.tpl
+++ b/src/templates/components/color.tpl
@@ -1,4 +1,4 @@
-<div class="component component-color">
+<div class="component component-color tap-highlight">
   <label>
     <input
       data-manipulator-target
diff --git a/src/templates/components/input.tpl b/src/templates/components/input.tpl
index 7f1a758..de5b932 100755
--- a/src/templates/components/input.tpl
+++ b/src/templates/components/input.tpl
@@ -1,4 +1,4 @@
-<label class="component component-input">
+<label class="component component-input tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input
diff --git a/src/templates/components/radiogroup.tpl b/src/templates/components/radiogroup.tpl
index 93a9667..aa58a46 100755
--- a/src/templates/components/radiogroup.tpl
+++ b/src/templates/components/radiogroup.tpl
@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="radio-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="radio"
diff --git a/src/templates/components/select.tpl b/src/templates/components/select.tpl
index f76e8f3..af2a0ac 100755
--- a/src/templates/components/select.tpl
+++ b/src/templates/components/select.tpl
@@ -1,4 +1,4 @@
-<label class="component component-select">
+<label class="component component-select tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="value"></span>
   <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
diff --git a/src/templates/components/toggle.tpl b/src/templates/components/toggle.tpl
index 1233d08..4381cb4 100755
--- a/src/templates/components/toggle.tpl
+++ b/src/templates/components/toggle.tpl
@@ -1,4 +1,4 @@
-<label class="component component-toggle">
+<label class="component component-toggle tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input

From b50a7dc72d263faa1afec6de224bc0f480d7479f Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 15:45:59 +1100
Subject: [PATCH 2/6] Fix checkboxgroup/radiogroup weirdness on old android

---
 src/styles/clay/components/checkboxgroup.scss | 2 +-
 src/styles/clay/components/radiogroup.scss    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss
index c8b2720..e6d62f2 100644
--- a/src/styles/clay/components/checkboxgroup.scss
+++ b/src/styles/clay/components/checkboxgroup.scss
@@ -36,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       background: $color-orange;
       
diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss
index f83bffd..dc79392 100644
--- a/src/styles/clay/components/radiogroup.scss
+++ b/src/styles/clay/components/radiogroup.scss
@@ -36,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       
       &:after {

From fa72cfb3a33e707e4f44270ee14f299a47d90671 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 15:46:15 +1100
Subject: [PATCH 3/6] fix autoprefixer not working in dev mode

---
 gulpfile.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gulpfile.js b/gulpfile.js
index a65f2a8..5cad718 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -103,6 +103,7 @@ gulp.task('dev-js', ['js', 'sass'], function() {
     .transform(stringify(stringifyOptions))
     .transform('deamdify')
     .transform(sassify, sassifyOptions)
+    .transform(autoprefixify, autoprefixerOptions)
     .bundle()
     .pipe(source('dev.js'))
     .pipe(gulp.dest('./tmp/'));

From d6461e1fb5f35c88a905360bd10db96ba2936981 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 15:54:12 +1100
Subject: [PATCH 4/6] fix missing value display on old android

---
 src/styles/clay/components/color.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss
index 2d0d9d9..272b83d 100644
--- a/src/styles/clay/components/color.scss
+++ b/src/styles/clay/components/color.scss
@@ -7,6 +7,7 @@
     height: $base-height;
     border-radius: $base-height / 2;
     box-shadow: $box-shadow-small-components;
+    display: block;
   }
 
   .picker-wrap {

From eb1d336f8fbc0f582ee744380be13be651c99b42 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 21:54:45 +1100
Subject: [PATCH 5/6] Center align submit button

---
 src/scripts/components/submit.js       | 1 +
 src/styles/clay/components/submit.scss | 3 +++
 src/styles/clay/elements/_button.scss  | 2 +-
 src/templates/components/submit.tpl    | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/clay/components/submit.scss

diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js
index 23ef4df..18c684c 100644
--- a/src/scripts/components/submit.js
+++ b/src/scripts/components/submit.js
@@ -3,6 +3,7 @@
 module.exports = {
   name: 'submit',
   template: require('../../templates/components/submit.tpl'),
+  style: require('../../styles/clay/components/submit.scss'),
   manipulator: 'html',
   defaults: {
     attributes: {}
diff --git a/src/styles/clay/components/submit.scss b/src/styles/clay/components/submit.scss
new file mode 100644
index 0000000..74b11f4
--- /dev/null
+++ b/src/styles/clay/components/submit.scss
@@ -0,0 +1,3 @@
+.component-submit {
+  text-align: center;
+}
diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss
index 8912034..6ece43c 100644
--- a/src/styles/clay/elements/_button.scss
+++ b/src/styles/clay/elements/_button.scss
@@ -9,7 +9,7 @@ button,
   font-size: 1rem;
   line-height: 1;
   border: none;
-  display: block;
+  display: inline-block;
 
   color: $color-white;
   min-width: 12rem;
diff --git a/src/templates/components/submit.tpl b/src/templates/components/submit.tpl
index ca29f7d..872a80d 100755
--- a/src/templates/components/submit.tpl
+++ b/src/templates/components/submit.tpl
@@ -1,4 +1,4 @@
-<div class="component component-button">
+<div class="component component-submit">
   <button
     data-manipulator-target
     type="submit"

From 3b9bf842cb2f0f0ec069f7ee81cd6938469f373e Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 29 Feb 2016 23:18:25 +1100
Subject: [PATCH 6/6] Fix value not showing up for select in old Android
 versions

---
 src/scripts/components/select.js       | 6 ++++--
 src/styles/clay/components/select.scss | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js
index 7cfd71e..919387a 100644
--- a/src/scripts/components/select.js
+++ b/src/scripts/components/select.js
@@ -15,8 +15,10 @@ module.exports = {
 
     var $value = self.$element.select('.value');
 
-    self.on('change', function(ev) {
-      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+    self.on('change', function() {
+      var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
+      var $options = self.$manipulatorTarget.select('option');
+      var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
       $value.set('innerHTML', value);
     });
   }
diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss
index 1b43d93..ca256b5 100644
--- a/src/styles/clay/components/select.scss
+++ b/src/styles/clay/components/select.scss
@@ -8,6 +8,7 @@
     $triangle-size: 0.85rem;
     position: relative;
     padding-right: $triangle-size + 0.25rem;
+    display: block;
 
     &:after {
       content: "";