Merge remote-tracking branch 'origin/master' into #13/fix-checkboxgroups-return-value

.gitignore

@@ -27,3 +27,5 @@ build/Release
 node_modules
 
 tmp
+
+dist

README.md

@@ -9,7 +9,7 @@ Clay will by default automatically handle the 'showConfiguration' and 'webviewcl
 
 Clay will eventually be built into the Pebble SDK. However, while it is still in beta you will need to follow the steps shown below:
 
-1. Download the Clay distribution file from: [dist/clay.js](dist/clay.js).
+1. Download the **clay.js** distribution file from the [latest release](https://github.com/pebble/clay/releases/latest).
 2. Drop `clay.js` in your project's `src/js` directory. 
 3. Create a JSON file called `config.json` and place it in your `src/js` directory. 
 4. In order for JSON files to work you may need to change a line in your `wscript` from `ctx.pbl_bundle(binaries=binaries, js=ctx.path.ant_glob('src/js/**/*.js'))` to `ctx.pbl_bundle(binaries=binaries, js=ctx.path.ant_glob(['src/js/**/*.js', 'src/js/**/*.json']))`.
@@ -27,7 +27,7 @@ Clay will eventually be built into the Pebble SDK. However, while it is still in
 Clay will eventually be built into CloudPebble. However while it is still in beta, you will need to follow some steps
 
 1. Create a new JavaScript file called `clay.js`.
-2. Copy the contents of the Clay distribution file from [dist/clay.js](dist/clay.js) into your newly created `clay.js` file.
+2. Copy the contents from the **clay.js** distribution file found in the [latest release](https://github.com/pebble/clay/releases/latest) into your newly created `clay.js` file.
 3. Create another JavaScript file called `config.js` with the following content. This will act as your config's root array element, from which the rest of the page is built up:
 
   ```javascript
@@ -67,7 +67,7 @@ Your root element **must** be an array. This represents the entire page. Inside
 
 ## Components
 
-![Example](src/images/example.png)
+<img src="src/images/example.png" width="360" title="Example">
 
 ### Section
 
@@ -178,6 +178,7 @@ Standard text input field.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default value of the input field. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attributes such as `required` or `type`. |
 
 
@@ -215,6 +216,7 @@ Switch for a single item.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | int\|boolean | The default value of the toggle. Defaults to `false` if not specified. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 
 
@@ -249,6 +251,7 @@ A dropdown menu containing multiple options.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default value of the dropdown menu. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. |
 
@@ -301,6 +304,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
+| description | string | Optional sub-text to include below the component |
 | sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. |
 
 ##### Example
@@ -332,6 +336,7 @@ A list of options allowing the user can only choose one option to submit.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default selected item. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. |
 
@@ -376,6 +381,7 @@ A list of options where a user may choose more than one option to submit.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. |
 
@@ -443,60 +449,75 @@ The submit button for the page. You **MUST** include this component somewhere in
 
 ## Manipulators 
 
-Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. At a minimum, manipulators must have a `.get()` and `.set(value)` method. When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`.
+Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. 
+At a minimum, manipulators must have a `.get()` and `.set(value)` method however there are also methods to assist in interactivity such as `.hide()` and `.disable()`. 
+**NOTE:** There is currently no way to disable or hide an entire section. You must disable/hide each item in the section to achieve this effect. 
+When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. 
+Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`.
 
 #### html
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [string\|HTML] value)` | `ClayItem` | `change` | Sets the content of this item. |
-| `.get()` | `string` | Gets the content of this item. |
+| `.get()` | `string` | | Gets the content of this item. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 #### val
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [string] value)` | `ClayItem` | `change` | Sets the value of this item. |
-| `.get()` |  `string` | Gets the content of this item. |
+| `.get()` |  `string` | | Gets the content of this item. |
 | `.disable()` |  `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` |  `ClayItem` | `enabled` | Allows this item to be edited by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 #### checked
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [boolean\|int] value)` | `ClayItem` | `change` | Check/uncheck the state of this item. |
-| `.get()` | `int` | 1 if checked, 0 if not checked |
+| `.get()` | `int` | | 1 if checked, 0 if not checked |
 | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 #### color
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [string\|int] value)` | `ClayItem` | `change` | Sets the color picker to the provided color. If the value is a string, it must be provided in hex notation eg `'FF0000'`. |
-| `.get()` | `int` | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. |
+| `.get()` | `int` | | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. |
 | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 #### radiogroup
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [string] value)` | `ClayItem` | `change` | Checks the radio button that corresponds to the provided value. |
-| `.get()` |  `string` | Gets the value of the checked radio button in the list. |
+| `.get()` |  `string` | | Gets the value of the checked radio button in the list. |
 | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 #### checkboxgroup
 
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [array] value)` | `ClayItem` | `change` | Checks the checkboxes that corresponds to the provided list of values. |
-| `.get()` |  `Array.<string>` | Gets an array of strings representing the list of the values of the checked items |
+| `.get()` |  `Array.<string>` | | Gets an array of strings representing the list of the values of the checked items |
 | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. |
-
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
 
 # Extending Clay
 
@@ -591,7 +612,13 @@ module.exports = function(minified) {
     var coolStuffToggle = Clay.getItemByAppKey('cool_stuff');
     toggleBackground.call(coolStuffToggle);
     coolStuffToggle.on('change', toggleBackground);
+    
+    // Hide the color picker for aplite
+    if (Clay.meta.activeWatchInfo.platform === 'aplite') {
+      Clay.getItemByAppKey('background').hide();
+    }
   });
+  
 };
 ```
 

dev/config.js

@@ -24,32 +24,31 @@ module.exports = [
         "type": "input",
         "appKey": "email",
         "defaultValue": "",
-        "label": "Email",
+        "label": "Input Field",
+        "description": "This is a description for the input component. " +
+                       "You can add <strong>html</strong> in here too.",
         "attributes": {
-          "placeholder": "eg: name@domain.com",
+          "placeholder": "Placeholder set with attributes"
-          "limit": 10,
-          "required": "required",
-          type: "email"
         }
       },
       {
         "type": "toggle",
         "appKey": "cool_stuff",
-        "label": "Enable Cool Stuff",
+        "label": "This is a Toggle",
         "defaultValue": false
       },
       {
         "type": "color",
         "appKey": "colorTest",
         "defaultValue": "FF0000",
-        "label": "Background Color",
+        "label": "Standard Color Picker",
         "sunlight": false
       },
       {
         "type": "color",
         "appKey": "sunnyColorTest",
         "defaultValue": "00FF00",
-        "label": "Sunny Color",
+        "label": "Sunny Color Picker",
         "sunlight": true
       }
     ]
@@ -64,46 +63,33 @@ module.exports = [
       {
         "type": "radiogroup",
         "appKey": "radiogroup-test",
-        "label": "Radio test",
+        "label": "Radio Group",
         "options": [
-          { "label": "Test thing one", "value": "one" },
+          { "label": "Test thing", "value": "one" },
           { "label": "Another thing", "value": "two" },
-          { "label": "One really long thing that would not fit", "value": "three" },
+          { "label": "Final thing with <em>html</em>", "value": "three" }
-          { "label": "Small", "value": "quote' \"test" },
-          { "label": "Final thing", "value": "three" }
         ]
       },
       {
         "type": "checkboxgroup",
         "appKey": "checkboxgroup-test",
         "defaultValue": ["quote' \"test", "two"],
-        "label": "Checkbox test",
+        "label": "Checkbox Group",
         "options": [
-          { "label": "Test <strong>thing</strong> one", "value": "one" },
+          { "label": "First thing", "value": "three" },
           { "label": "Another thing", "value": "two" },
-          { "label": "One really long thing that would not fit", "value": "three" },
-          { "label": "Small", "value": "quote' \"test" },
           { "label": "Final thing", "value": "three" }
         ]
       },
-      {
-        "type": "input",
-        "appKey": "date",
-        "defaultValue": "",
-        "label": "Range",
-        "attributes": {
-          type: "range"
-        }
-      },
       {
         "type": "select",
         "appKey": "flavor",
         "defaultValue": "grape",
-        "label": "Favorite Flavor",
+        "label": "Select Menu",
         "options": [
           { "label": "", "value": "" },
           { "label": "Berry", "value": "berry" },
-          { "label": "Grape", "value": "grape" },
+          { "label": "This Option is Selected", "value": "grape" },
           { "label": "Banana", "value": "banana" }
         ],
         "attributes": {

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();
     }
   }
 

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/'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-clay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Pebble Config Framework",
   "main": "dist/clay.js",
   "directories": {

src/scripts/components/checkboxgroup.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    description: '',
     attributes: {}
   }
 };

src/scripts/components/color.js

@@ -6,7 +6,8 @@ module.exports = {
   style: require('../../styles/clay/components/color.scss'),
   manipulator: 'color',
   defaults: {
-    label: ''
+    label: '',
+    description: ''
   },
   initialize: function(minified) {
     var HTML = minified.HTML;

src/scripts/components/input.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'val',
   defaults: {
     label: '',
+    description: '',
     attributes: {}
   }
 };

src/scripts/components/radiogroup.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    description: '',
     attributes: {}
   }
 };

src/scripts/components/select.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    description: '',
     attributes: {}
   },
   initialize: function() {
@@ -15,8 +16,10 @@ module.exports = {
 
     var $value = self.$element.select('.value');
 
-    self.on('change', function(ev) {
+    self.on('change', function() {
-      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+      var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
+      var $options = self.$manipulatorTarget.select('option');
+      var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
       $value.set('innerHTML', value);
     });
   }

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: {}

src/scripts/components/toggle.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'checked',
   defaults: {
     label: '',
+    description: '',
     attributes: {}
   }
 };

src/scripts/lib/manipulators.js

@@ -18,6 +18,22 @@ function enable() {
   return this.trigger('enabled');
 }
 
+/**
+ * @returns {ClayEvents}
+ */
+function hide() {
+  this.$element.set('+hide');
+  return this.trigger('hide');
+}
+
+/**
+ * @returns {ClayEvents}
+ */
+function show() {
+  this.$element.set('-hide');
+  return this.trigger('show');
+}
+
 module.exports = {
   html: {
     get: function() {
@@ -26,7 +42,9 @@ module.exports = {
     set: function(value) {
       this.$manipulatorTarget.set('innerHTML', value);
       return this.trigger('change');
-    }
+    },
+    hide: hide,
+    show: show
   },
   val: {
     get: function() {
@@ -37,7 +55,9 @@ module.exports = {
       return this.trigger('change');
     },
     disable: disable,
-    enable: enable
+    enable: enable,
+    hide: hide,
+    show: show
   },
   checked: {
     get: function() {
@@ -48,7 +68,9 @@ module.exports = {
       return this.trigger('change');
     },
     disable: disable,
-    enable: enable
+    enable: enable,
+    hide: hide,
+    show: show
   },
   radiogroup: {
     get: function() {
@@ -61,7 +83,9 @@ module.exports = {
       return this.trigger('change');
     },
     disable: disable,
-    enable: enable
+    enable: enable,
+    hide: hide,
+    show: show
   },
   checkboxgroup: {
     get: function() {
@@ -83,7 +107,9 @@ module.exports = {
       return self.trigger('change');
     },
     disable: disable,
-    enable: enable
+    enable: enable,
+    hide: hide,
+    show: show
   },
   color: {
     get: function() {
@@ -99,6 +125,8 @@ module.exports = {
       return this.trigger('change');
     },
     disable: disable,
-    enable: enable
+    enable: enable,
+    hide: hide,
+    show: show
   }
 };

src/styles/clay/_base.scss

@@ -17,7 +17,24 @@ html, body {
 
 body {
   background-color: $color-gray-2;
-  padding: $item-spacing-v $item-spacing-h;
+  padding: 0 $item-spacing-h $item-spacing-v;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  @include font-pfdin(medium);
+  color: $color-orange;
+}
+
+a {
+  color: $color-gray-8;
+
+  &:hover {
+    color: inherit;
+  }
 }
 
 h1, h2, h3, h4 {
@@ -54,6 +71,7 @@ label {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: $item-spacing-v $item-spacing-h;
 
   .input {
     white-space: nowrap;
@@ -83,35 +101,43 @@ label {
   }
 }
 
-.component {
+.hide {
-  padding-bottom: $item-spacing-v;
+  display: none !important;
+}
+
+.tap-highlight {
   @include tap-highlight();
+}
+
+.component {
+  padding-top: $item-spacing-v;
 
   &.disabled {
-    opacity: 0.25;
     pointer-events: none;
+    > * {
+      opacity: 0.25;
+    }
   }
 }
 
 .section {
   background: $color-gray-4;
   border-radius: 0.25rem;
-  margin-bottom: 1rem;
   box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 
-  .component {
+  > .component {
-    padding-top: $item-spacing-v;
+    padding-bottom: $item-spacing-v;
     padding-right: $item-spacing-h;
     padding-left: $item-spacing-h;
     position: relative;
+    margin-top: 1rem;
 
-    &:last-child,
+    &:not(.hide) ~ .component {
-    &:first-child {
+      margin-top: 0;
-      padding-bottom: $item-spacing-v;
+    }
 
-      &:after {
+    &:first-child:after {
-        display: none;
+      display: none;
-      }
     }
 
     &:after {
@@ -119,7 +145,7 @@ label {
       background: $color-gray-6;
       display: block;
       position: absolute;
-      bottom: 0;
+      top: 0;
       left: $item-spacing-h / 2;
       right: $item-spacing-h / 2;
       height: 1px;
@@ -127,72 +153,41 @@ label {
     }
   }
 
-  .component-heading:first-child {
+  // don't show the separator for the first non-hidden item
+  > .component:not(.hide):after {
+    display: none;
+  }
+
+  > .component:not(.hide) ~ .component:not(.hide):after {
+    display: block;
+  }
+
+  > .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
+
+    // don't show the separator for the first non-hidden item after the heading
+    &:after,
+    ~ .component:not(.hide):after {
+      display: none;
+    }
+
+    ~ .component:not(.hide) ~ .component:not(.hide):after {
+      display: block;
+    }
   }
 
 }
 
-strong {
+.description {
-  @include font-pfdin(medium);
+  padding: 0 $item-spacing-h $item-spacing-v ;
-  color: $color-orange;
+  @include font-size(0.9);
-}
+  color: $color-gray-9;
-
-a {
-  color: $color-gray-8;
-
-  &:hover {
-    color: inherit;
-  }
 }
 
 .inputs {
   display: block;
   width:100%;
   border-collapse: collapse;
-
-  .section & .component {
-    display: table;
-    width:100%;
-
-    .label,
-    .input {
-      display: table-cell;
-    }
-    
-    .input {
-      text-align: right;
-    }
-
-    &.invalid {
-      .input:after {
-        content: "!";
-        display: inline-block;
-        color: $color-white;
-        background: $color-orange;
-        border-radius: $border-radius;
-        width: 1.2em;
-        text-align: center;
-        height: 1.2em;
-        font-size: 1em;
-        vertical-align: middle;
-        line-height: 1.3em;
-        margin-left: -0.7em;
-        position:absolute;
-        @include font-pfdin(regular);
-      }
-
-      .input input {
-        color: $color-orange;
-        padding-right: 1em;
-
-        @include placeholder {
-          color: $color-orange;
-        }
-
-      }
-    }
-
-  }
 }
+

src/styles/clay/_vars.scss

@@ -34,14 +34,7 @@ $color-gray-9: #a4a4a4 ;
 $color-gray-10: #ececec;
 $color-gray-11: #f2f2f2;
 
-
-
-
-$global-margin: 55px;
-$form-margin: 25px;
 $button-padding: 0.7rem;
 $button-padding-ios: 0.6rem;
-$button-line-height: 13px;
-$footer-height-large: 90px;
 
 $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;

src/styles/clay/components/checkboxgroup.scss

@@ -3,9 +3,11 @@
 
 .component-checkbox {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
 
   > .label {
     display: block;
@@ -14,14 +16,14 @@
 
   .checkbox-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
-      @include tap-highlight();
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -39,7 +41,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       background: $color-orange;
       
@@ -59,6 +61,10 @@
 
       }
     }
+  }
 
+  .description {
+    padding-left: 0;
+    padding-right: 0;
   }
 }

src/styles/clay/components/color.scss

@@ -2,11 +2,16 @@
 
 .component-color {
 
+  .section & {
+    padding: 0;
+  }
+
   .value {
     width: $small-component-width;
     height: $base-height;
     border-radius: $base-height / 2;
     box-shadow: $box-shadow-small-components;
+    display: block;
   }
 
   .picker-wrap {

src/styles/clay/components/input.scss

@@ -2,7 +2,13 @@
 
 .component-input {
 
-  display: block;
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    display: block;
+  }
 
   .label {
     padding-bottom: $item-spacing-v;

src/styles/clay/components/radiogroup.scss

@@ -3,9 +3,11 @@
 
 .component-radio {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
 
   > .label {
     display: block;
@@ -14,14 +16,14 @@
 
   .radio-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
-      @include tap-highlight();
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -39,7 +41,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       
       &:after {
@@ -58,4 +60,9 @@
     }
 
   }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

src/styles/clay/components/select.scss

@@ -2,12 +2,20 @@
 @import "clay";
 
 .component-select {
-  position: relative;
+
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    position: relative;
+  }
 
   .value {
     $triangle-size: 0.85rem;
     position: relative;
     padding-right: $triangle-size + 0.25rem;
+    display: block;
 
     &:after {
       content: "";
@@ -15,7 +23,7 @@
       right: 0;
       top: 50%;
       margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-gray-10, down);
+      @include triangle($triangle-size, $color-orange, down);
     }
   }
 

src/styles/clay/components/submit.scss

@@ -0,0 +1,3 @@
+.component-submit {
+  text-align: center;
+}

src/styles/clay/components/toggle.scss

@@ -6,6 +6,10 @@
   $slide-width: $small-component-width;
   $marker-diameter: $base-height;
 
+  .section & {
+    padding: 0;
+  }
+
   input {
     display: none; // @todo make sure this doesn't mess up interactivity on iOS
   }

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;

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"
@@ -15,4 +15,7 @@
       </label>
     {{/each}}
   </div>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
 </div>

src/templates/components/color.tpl

@@ -1,5 +1,5 @@
 <div class="component component-color">
-  <label>
+  <label class="tap-highlight">
     <input
       data-manipulator-target
       type="hidden"
@@ -7,6 +7,9 @@
     <span class="label">{{{label}}}</span>
     <span class="value"></span>
   </label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
   <div class="picker-wrap">
     <div class="picker">
       <div class="color-box-wrap">

src/templates/components/input.tpl

@@ -1,9 +1,15 @@
-<label class="component component-input">
+<div class="component component-input">
-  <span class="label">{{{label}}}</span>
+  <label class="tap-highlight">
-  <span class="input">
+    <span class="label">{{{label}}}</span>
-    <input
+    <span class="input">
+      <input
       data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
-  </span>
+    </span>
-</label>
+  </label>
+
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

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"
@@ -15,4 +15,7 @@
       </label>
     {{/each}}
   </div>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
 </div>

src/templates/components/select.tpl

@@ -1,9 +1,14 @@
-<label class="component component-select">
+<div class="component component-select">
-  <span class="label">{{{label}}}</span>
+  <label class="tap-highlight">
-  <span class="value"></span>
+    <span class="label">{{{label}}}</span>
-  <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
+    <span class="value"></span>
-    {{each options}}
+    <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
-      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+      {{each options}}
-    {{/each}}
+        <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
-  </select>
+      {{/each}}
-</label>
+    </select>
+  </label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

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"

src/templates/components/toggle.tpl

@@ -1,14 +1,19 @@
-<label class="component component-toggle">
+<div class="component component-toggle">
-  <span class="label">{{{label}}}</span>
+  <label class="tap-highlight">
-  <span class="input">
+    <span class="label">{{{label}}}</span>
-    <input
+    <span class="input">
-      data-manipulator-target
+      <input
-      type="checkbox"
+        data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+        type="checkbox"
-    />
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-    <span class="graphic">
+      />
-      <span class="slide"></span>
+      <span class="graphic">
-      <span class="marker"></span>
+        <span class="slide"></span>
+        <span class="marker"></span>
+      </span>
     </span>
-  </span>
+  </label>
-</label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

test/spec/lib/clay-item.js

@@ -77,7 +77,7 @@ describe('ClayItem', function() {
   describe('.$element', function() {
     it('sets $element correctly', function() {
       var clayItem = fixture.clayItem('input');
-      assert.strictEqual(clayItem.$element[0].tagName, 'LABEL');
+      assert.strictEqual(clayItem.$element[0].classList.contains('component'), true);
     });
   });
 

test/spec/lib/manipulators.js

@@ -7,7 +7,7 @@ var fixture = require('../../fixture');
 describe('manipulators', function() {
 
   /**
-   * @param {string|Clay~ConfigItem} itemType
+   * @param {string|Object} itemType
    * @param {*} value
    * @param {*} [expected]
    * @return {void}
@@ -31,7 +31,7 @@ describe('manipulators', function() {
   }
 
   /**
-   * @param {string|Clay~ConfigItem} itemType
+   * @param {string|Object} itemType
    * @return {void}
    */
   function testDisable(itemType) {
@@ -57,7 +57,7 @@ describe('manipulators', function() {
   }
 
   /**
-   * @param {string} itemType
+   * @param {string|Object} itemType
    * @return {void}
    */
   function testEnable(itemType) {
@@ -84,14 +84,71 @@ describe('manipulators', function() {
     });
   }
 
+  /**
+   * @param {string|Object} itemType
+   * @return {void}
+   */
+  function testHide(itemType) {
+    describe('.hide()', function() {
+      it('hides the field then triggers a "hide" event', function() {
+        var handlerSpy = sinon.spy();
+        var clayItem = fixture.clayItem(itemType);
+        clayItem.on('hide', handlerSpy);
+
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('hide'),
+          false
+        );
+        clayItem.hide();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('hide'),
+          true
+        );
+        assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
+        assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
+      });
+    });
+  }
+
+  /**
+   * @param {string|Object} itemType
+   * @return {void}
+   */
+  function testShow(itemType) {
+    describe('.show()', function() {
+      it('shows the field then triggers a "show" event', function() {
+        var handlerSpy = sinon.spy();
+        var clayItem = fixture.clayItem(itemType);
+        clayItem.on('show', handlerSpy);
+
+        clayItem.hide();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('hide'),
+          true
+        );
+        clayItem.show();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('hide'),
+          false
+        );
+        assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
+        assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
+      });
+    });
+  }
+
   describe('html', function() {
-    testSetGet('footer', 'test123');
+    testSetGet('text', 'test123');
+    testShow('text');
+    testHide('text');
   });
 
   describe('val', function() {
     testSetGet('input', 'test321');
     testDisable('input');
     testEnable('input');
+    testShow('text');
+    testHide('text');
   });
 
   describe('checked', function() {
@@ -101,6 +158,8 @@ describe('manipulators', function() {
     testSetGet('toggle', 0);
     testDisable('toggle');
     testEnable('toggle');
+    testShow('toggle');
+    testHide('toggle');
   });
 
   describe('radiogroup', function() {
@@ -118,6 +177,8 @@ describe('manipulators', function() {
     testSetGet(item, 'three "quote');
     testDisable(item);
     testEnable(item);
+    testShow(item);
+    testHide(item);
   });
 
   describe('checkboxgroup', function() {
@@ -136,6 +197,8 @@ describe('manipulators', function() {
     testSetGet(item, false, []);
     testDisable(item);
     testEnable(item);
+    testShow(item);
+    testHide(item);
   });
 
   describe('color', function() {
@@ -149,5 +212,7 @@ describe('manipulators', function() {
     testSetGet('color', undefined, 0x000000);
     testDisable('color');
     testEnable('color');
+    testShow('color');
+    testHide('color');
   });
 });