Merge pull request #81 from pebble/#72/att-optgroup-to-selects

Add optgroup to selects

README.md

@@ -291,6 +291,60 @@ A dropdown menu containing multiple options.
 }
 ```
 
+If you wish to use optgroups, then use the following format:
+
+```javascript
+{
+  "type": "select",
+  "appKey": "flavor",
+  "defaultValue": "grape",
+  "label": "Favorite Flavor",
+  "options": [
+    { 
+      "label": "", 
+      "value": "" 
+    },
+    {
+      "label": "Fruits",
+      "value": [
+        { 
+          "label": "Berry",
+          "value": "berry" 
+        },
+        { 
+          "label": "Grape",
+          "value": "grape" 
+        },
+        { 
+          "label": "Banana",
+          "value": "banana" 
+        }
+      ]
+    }, 
+    {
+      "label": "Candy",
+      "value": [
+        { 
+          "label": "Chocolate",
+          "value": "chocolate" 
+        },
+        { 
+          "label": "Cream",
+          "value": "cream" 
+        },
+        { 
+          "label": "Lollipop",
+          "value": "lollipop" 
+        }
+      ]
+    }
+  ],
+  "attributes": {
+    "required": "required"
+  }
+}
+```
+
 ---
 
 #### Color Picker

dev/config.js

@@ -122,7 +122,14 @@ module.exports = [
           { "label": "", "value": "" },
           { "label": "Berry", "value": "berry" },
           { "label": "This Option is Selected", "value": "grape" },
-          { "label": "Banana", "value": "banana" }
+          { "label": "Banana", "value": "banana" },
+          {
+            "label": "This is an optgroup",
+            "value": [
+              { "label": "Peach", "value": "peach" },
+              { "label": "Mango", "value": "mango" }
+            ]
+          }
         ],
         "attributes": {
           "required": "required"

src/templates/components/select.tpl

@@ -4,7 +4,15 @@
     <span class="value"></span>
     <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
       {{each options}}
-        <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+        {{if Array.isArray(this.value)}}
+          <optgroup label="{{this.label}}">
+            {{each this.value}}
+              <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+            {{/each}}
+          </optgroup>
+        {{else}}
+          <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+        {{/if}}
       {{/each}}
     </select>
   </label>

test/spec/components/select.js

@@ -21,4 +21,26 @@ describe('component - select', function() {
     selectItem.set('value-2');
     assert.strictEqual($valueDisplay.get('innerHTML'), 'label 2');
   });
+
+  it('sets the value display to the correct value on change when using optgroups',
+  function() {
+    var clayConfig = fixture.clayConfig([
+      {
+        type: 'select',
+        defaultValue: 'value-1',
+        options: [
+          { label: 'label 1', value: 'value-1' },
+          { label: 'group', value: [
+            { label: 'label 2', value: 'value-2' },
+            { label: 'label 3', value: 'value-3' }
+          ]}
+        ]
+      }
+    ]);
+    var selectItem = clayConfig.getItemsByType('select')[0];
+    var $valueDisplay = selectItem.$element.select('.value');
+    assert.strictEqual($valueDisplay.get('innerHTML'), 'label 1');
+    selectItem.set('value-2');
+    assert.strictEqual($valueDisplay.get('innerHTML'), 'label 2');
+  });
 });