Merge pull request #24 from pebble/#11/description-for-input-components

Add description field to all input type components.

README.md

@@ -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. |
 

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

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() {

src/scripts/components/toggle.js

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

src/styles/clay/_base.scss

@@ -20,6 +20,23 @@ body {
   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 {
   text-transform: uppercase;
   @include font-pfdin(medium);
@@ -50,23 +67,11 @@ h6 {
   @include font-size(0.8);
 }
 
-strong {
-  @include font-pfdin(medium);
-  color: $color-orange;
-}
-
-a {
-  color: $color-gray-8;
-
-  &:hover {
-    color: inherit;
-  }
-}
-
 label {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: $item-spacing-v $item-spacing-h;
 
   .input {
     white-space: nowrap;
@@ -131,11 +136,6 @@ label {
       margin-top: 0;
     }
 
-    &:last-child,
-    &:first-child {
-      padding-bottom: $item-spacing-v;
-    }
-
     &:first-child:after {
       display: none;
     }
@@ -179,52 +179,15 @@ label {
 
 }
 
+.description {
+  padding: 0 $item-spacing-h $item-spacing-v ;
+  @include font-size(0.9);
+  color: $color-gray-9;
+}
+
 .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/components/checkboxgroup.scss

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +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;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -56,6 +61,10 @@
 
       }
     }
+  }
 
+  .description {
+    padding-left: 0;
+    padding-right: 0;
   }
 }

src/styles/clay/components/color.scss

@@ -2,6 +2,10 @@
 
 .component-color {
 
+  .section & {
+    padding: 0;
+  }
+
   .value {
     width: $small-component-width;
     height: $base-height;

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

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +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;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -55,4 +60,9 @@
     }
 
   }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

src/styles/clay/components/select.scss

@@ -2,7 +2,14 @@
 @import "clay";
 
 .component-select {
-  position: relative;
+
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    position: relative;
+  }
 
   .value {
     $triangle-size: 0.85rem;
@@ -16,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/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/templates/components/checkboxgroup.tpl

@@ -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 tap-highlight">
+<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 tap-highlight">
+<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

@@ -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 tap-highlight">
+<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/toggle.tpl

@@ -1,14 +1,19 @@
-<label class="component component-toggle tap-highlight">
+<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);
     });
   });