Add layerLabel to shadow properties

docs/api.js

@@ -56,6 +56,7 @@ async function generateDocs () {
           .replace(/<\\\[/g, '<[')
           .replace(/<\(\\\[/g, '<([')
           .replace(/\| \\\[/g, '| [')
+          .replace(/\\n```js/g, "```js")
           .replace('**Extends Model**', '');
         fs.writeFileSync(`${docRoot}/api/${file[1]}`, res);
         log('Created', file[1]);

docs/api/property_stack.md

@@ -8,9 +8,20 @@
 
 ### Properties
 
-*   `layerSeparator` **([String][1] | [RegExp][2])?** The separator used to split layer values.
+*   `preview` **[Boolean][1]?** Indicate if the layer should display a preview.
-*   `layerJoin` **[String][1]?** Value used to join layer values.
+*   `layerSeparator` **([String][2] | [RegExp][3])?** The separator used to split layer values.
-*   `layerLabel` **[Function][3]?** Custom logic for creating the layer label.
+*   `layerJoin` **[String][2]?** Value used to join layer values.
+    ```js
+     layerJoin: (layer, { values }) => {
+       return `A: ${values['prop-a']} B: ${values['prop-b']}`;
+     }
+    ```
+*   `layerLabel` **[Function][4]?** Custom logic for creating layer labels.
+    ```js
+     layerLabel: (layer, { values }) => {
+       return `A: ${values['prop-a']} B: ${values['prop-b']}`;
+     }
+    ```
 
 ### getLayers
 
@@ -24,7 +35,7 @@ Get layer by index.
 
 #### Parameters
 
-*   `index` **[Number][4]** Layer index position. (optional, default `0`)
+*   `index` **[Number][5]** Layer index position. (optional, default `0`)
 
 #### Examples
 
@@ -66,7 +77,7 @@ Select layer by index.
 
 #### Parameters
 
-*   `index` **[Number][4]** Index of the layer to select. (optional, default `0`)
+*   `index` **[Number][5]** Index of the layer to select. (optional, default `0`)
 
 #### Examples
 
@@ -80,10 +91,10 @@ Add new layer to the stack.
 
 #### Parameters
 
-*   `props` **[Object][5]** Custom property values to use in a new layer. (optional, default `{}`)
+*   `props` **[Object][6]** Custom property values to use in a new layer. (optional, default `{}`)
-*   `opts` **[Object][5]** Options (optional, default `{}`)
+*   `opts` **[Object][6]** Options (optional, default `{}`)
 
-    *   `opts.at` **[Number][4]?** Position index (by default the layer will be appended at the end).
+    *   `opts.at` **[Number][5]?** Position index (by default the layer will be appended at the end).
 
 #### Examples
 
@@ -117,7 +128,7 @@ Remove layer by index.
 
 #### Parameters
 
-*   `index` **[Number][4]** Index of the layer to remove (optional, default `0`)
+*   `index` **[Number][5]** Index of the layer to remove (optional, default `0`)
 
 #### Examples
 
@@ -142,7 +153,7 @@ const layer = this.getLayer(1);
 const label = this.getLayerLabel(layer);
 ```
 
-Returns **[String][1]** 
+Returns **[String][2]** 
 
 ### getStyleFromLayer
 
@@ -151,26 +162,26 @@ Get style object from the layer.
 #### Parameters
 
 *   `layer` **[Layer]** 
-*   `opts` **[Object][5]** Options (optional, default `{}`)
+*   `opts` **[Object][6]** Options (optional, default `{}`)
 
-    *   `opts.camelCase` **[Boolean][6]?** Return property names in camelCase.
+    *   `opts.camelCase` **[Boolean][1]?** Return property names in camelCase.
 
-Returns **[Object][5]** Style object
+Returns **[Object][6]** Style object
 
 ### getLayerSeparator
 
 Get layer separator.
 
-Returns **[RegExp][2]** 
+Returns **[RegExp][3]** 
 
-[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
 
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

src/style_manager/model/PropertyFactory.js

@@ -305,6 +305,13 @@ export default class PropertyFactory {
         'box-shadow',
         {
           preview: true,
+          layerLabel: (l, { values }) => {
+            const x = values['box-shadow-h'];
+            const y = values['box-shadow-v'];
+            const blur = values['box-shadow-blur'];
+            const spread = values['box-shadow-spread'];
+            return `${x} ${y} ${blur} ${spread}`;
+          },
           properties: this.__sub([
             'box-shadow-h',
             'box-shadow-v',
@@ -320,6 +327,12 @@ export default class PropertyFactory {
         'text-shadow',
         {
           default: 'none',
+          layerLabel: (l, { values }) => {
+            const x = values['text-shadow-h'];
+            const y = values['text-shadow-v'];
+            const blur = values['text-shadow-blur'];
+            return `${x} ${y} ${blur}`;
+          },
           properties: this.__sub(['text-shadow-h', 'text-shadow-v', 'text-shadow-blur', 'text-shadow-color']),
         },
         'box-shadow',

src/style_manager/model/PropertyStack.js

@@ -16,7 +16,14 @@ const PARTS_REG = /\s(?![^(]*\))/;
  * @property {Boolean} [preview=false] Indicate if the layer should display a preview.
  * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values.
  * @property {String} [layerJoin=', '] Value used to join layer values.
- * @property {Function} [layerLabel] Custom logic for creating the layer label.
+ * @property {Function} [layerLabel] Custom logic for creating layer labels.
+ * \n
+ * ```js
+ *  layerLabel: (layer) => {
+ *    const values = layer.getValues();
+ *    return `A: ${values['prop-a']} B: ${values['prop-b']}`;
+ *  }
+ *  ```
  *
  */
 export default class PropertyStack extends PropertyComposite {

test/specs/style_manager/model/PropertyFactory.js

@@ -448,7 +448,9 @@ describe('PropertyFactory', () => {
       ],
     };
     res.property = 'text-shadow';
-    expect(obj.build('text-shadow')).toEqual([res]);
+    const result = obj.build('text-shadow');
+    delete result[0].layerLabel;
+    expect(result).toEqual([res]);
   });
 
   test('Build border-radius-c', () => {
@@ -602,7 +604,9 @@ describe('PropertyFactory', () => {
         },
       ],
     };
-    expect(obj.build('box-shadow')).toEqual([res]);
+    const result = obj.build('box-shadow');
+    delete result[0].layerLabel;
+    expect(result).toEqual([res]);
   });
 
   test('Build background', () => {
@@ -658,7 +662,9 @@ describe('PropertyFactory', () => {
         },
       ],
     };
-    expect(obj.build('background')).toEqual([res]);
+    const result = obj.build('background');
+    delete result[0].layerLabel;
+    expect(result).toEqual([res]);
   });
 
   test('Build transition', () => {
@@ -686,7 +692,7 @@ describe('PropertyFactory', () => {
           id: 'transition-duration-sub',
           type: 'integer',
           units: obj.unitsTime,
-          default: '2',
+          default: '2s',
           min: 0,
         },
         {