add allowGray option to color picker

README.md

@@ -300,7 +300,7 @@ A color picker that allows users to choose a color from the ones that are compat
 The color picker will automatically show a different layout depending on the watch connected: 
 
  - Aplite (Firmware 2.x) - Black and white
- - Aplite (Firmware 3.x) - Black, white and gray
+ - Aplite (Firmware 3.x) - Black and white. Will also include gray (`#AAAAAA`) if `allowGray` is set to `true`
  - Basalt/chalk - The 64 colors compatible with color Pebble smartwatches. 
 
 ##### Properties
@@ -315,6 +315,7 @@ The color picker will automatically show a different layout depending on the wat
 | 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. |
 | layout | string OR array | Optional. Use a custom layout for the color picker. Defaults to automatically choosing the most appropriate layout for the connected watch. The layout is represented by a two dimensional array. Use `false` to insert blank spaces. You may also use one of the preset layouts by setting `layout` to: `"COLOR"`, `"GRAY"` or `"BLACK_WHITE"` |
+| allowGray | boolean | Optional. Set this to `true` to include gray (`#AAAAAA`) in the color picker for aplite running on firmware 3 and above. This is optional because only a subset of the drawing operations support gray on aplite. Defaults to `false` |
 
 ##### Example
 
@@ -346,6 +347,19 @@ The color picker will automatically show a different layout depending on the wat
 }
 ```
 
+##### Example
+
+```javascript
+{
+  "type": "color",
+  "appKey": "background",
+  "defaultValue": "aaaaaa",
+  "label": "Background Color",
+  "sunlight": false,
+  "allowGray": true
+}
+```
+
 ---
 
 #### Radio Group

src/scripts/components/color.js

@@ -48,14 +48,15 @@ module.exports = {
      * @returns {Array}
      */
     function autoLayout() {
-      if (!clay.meta.activeWatchInfo) {
+      if (!clay.meta.activeWatchInfo ||
+          clay.meta.activeWatchInfo.firmware.major === 2 ||
+          clay.meta.activeWatchInfo.platform === 'aplite' &&
+          !self.config.allowGray) {
         return standardLayouts.BLACK_WHITE;
       }
 
-      if (clay.meta.activeWatchInfo.platform === 'aplite') {
-        return clay.meta.activeWatchInfo.firmware.major === 2 ?
-          standardLayouts.BLACK_WHITE :
-          standardLayouts.GRAY;
+      if (clay.meta.activeWatchInfo.platform === 'aplite' && self.config.allowGray) {
+        return standardLayouts.GRAY;
       }
 
       return standardLayouts.COLOR;

test/spec/components/color.js

@@ -111,16 +111,24 @@ function testCustomLayout(layout, expectedColors) {
 /**
  * @param {string} platform
  * @param {Array} layout
- * @param {string} [desc]
+ * @param {boolean} allowGray
+ * @param {string} desc
  * @param {Object} activeWatchInfo
  * @return {void}
  */
-function testAutoLayout(platform, layout, desc, activeWatchInfo) {
-  it('chooses the best layout for the ' + (desc || platform) + ' platform',
+function testAutoLayout(platform, layout, allowGray, desc, activeWatchInfo) {
+  it('chooses the best layout for the ' + (desc || platform) +
+     ' platform when allowGray is ' + allowGray,
   function() {
-    var clayConfig = fixture.clayConfig(['color'], true, true, {}, {
-      activeWatchInfo: activeWatchInfo
-    });
+    var clayConfig = fixture.clayConfig(
+      [{type: 'color', allowGray: allowGray}],
+      true,
+      true,
+      {},
+      {
+        activeWatchInfo: activeWatchInfo
+      }
+    );
     var colorItem = clayConfig.getItemsByType('color')[0];
     assert.deepEqual(colorItem._layout, layout);
   });
@@ -285,8 +293,11 @@ describe('component - color', function() {
 
   describe('layouts', function() {
 
-    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, 'aplite (2.x)', null);
-    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, 'aplite (2.x)', {
+    // allow gray does nothing for 2.x
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)',
+      null
+    );
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)', {
       platform: 'aplite',
       model: 'qemu_platform_aplite',
       language: 'en_US',
@@ -297,7 +308,21 @@ describe('component - color', function() {
         suffix: ''
       }
     });
-    testAutoLayout('aplite', standardLayouts.GRAY, 'aplite (3.x)', {
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)',
+      null
+    );
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 2,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (3.x)', {
       platform: 'aplite',
       model: 'qemu_platform_aplite',
       language: 'en_US',
@@ -308,7 +333,18 @@ describe('component - color', function() {
         suffix: ''
       }
     });
-    testAutoLayout('basalt', standardLayouts.COLOR, '', {
+    testAutoLayout('aplite', standardLayouts.GRAY, true, 'aplite (3.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('basalt', standardLayouts.COLOR, true, '', {
       platform: 'basalt',
       model: 'qemu_platform_basalt',
       language: 'en_US',
@@ -319,7 +355,7 @@ describe('component - color', function() {
         suffix: ''
       }
     });
-    testAutoLayout('chalk', standardLayouts.COLOR, '', {
+    testAutoLayout('chalk', standardLayouts.COLOR, true, '', {
       platform: 'chalk',
       model: 'qemu_platform_chalk',
       language: 'en_US',