Update prop docs

docs/api/property.md

@@ -8,8 +8,8 @@
 
 *   `id` **[String][1]** Property id, eg. `my-property-id`.
 *   `property` **[String][1]** Related CSS property name, eg. `text-align`.
-*   `label` **[String][1]** Label to use in UI, eg. `Text Align`.
 *   `default` **[String][1]** Defaul value of the property.
+*   `label` **[String][1]** Label to use in UI, eg. `Text Align`.
 
 ### getId
 

docs/api/property_composite.md

@@ -8,13 +8,29 @@
 
 *   `properties` **[Array][1]<[Object][2]>** Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
 *   `detached` **[Boolean][3]?** Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
-*   `separator` **([String][4] | [RegExp][5])?** Separator to use to split property values.
-*   `join` **[String][4]?** Value used to join property values
-*   `fromStyle` **[Function][6]?** Custom logic for getting property values from the target style object, eg.
-    `  fromStyle(style) => {
-       return {};
-     } `
+*   `separator` **([String][4] | [RegExp][5])?** Value used to split property values, default `" "`.
+*   `join` **[String][4]?** Value used to join property values, default `" "`.
+*   `fromStyle` **[Function][6]?** Custom logic for getting property values from the target style object.
+    ```js
+     fromStyle(style) => {
+       const margins = parseMarginShorthand(style.margin);
+       return {
+         'margin-top': margins.top,
+         // ...
+       };
+     }
+    ```
 *   `toStyle` **[Function][6]?** Custom logic for creating the CSS style object to apply on selected targets.
+    ```js
+     toStyle(values) => {
+       const top = values['margin-top'] || 0;
+       const right = values['margin-right'] || 0;
+       // ...
+       return {
+         margin: `${top} ${right} ...`,
+       };
+     }
+    ```
 
 ### getProperties
 

docs/api/property_select.md

@@ -6,7 +6,13 @@
 
 ### Properties
 
-*   `options` **[Array][1]<[Object][2]>** Array of option definitions, eg `[{ id: '100', label: 'Set 100' }]`
+*   `options` **[Array][1]<[Object][2]>** Array of option definitions.
+    ```js
+    options: [
+     { id: '100', label: 'Set 100' },
+     { id: '200', label: 'Set 200' },
+    ]
+    ```
 
 ### getOptions
 

docs/api/property_stack.md

@@ -11,14 +11,10 @@
 *   `preview` **[Boolean][1]?** Indicate if the layer should display a preview.
 *   `layerSeparator` **([String][2] | [RegExp][3])?** The separator used to split layer values.
 *   `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 }) => {
+     layerLabel: (layer) => {
+       const values = layer.getValues();
        return `A: ${values['prop-a']} B: ${values['prop-b']}`;
      }
     ```

src/style_manager/model/Property.js

@@ -6,8 +6,8 @@ import { capitalize, camelCase } from 'utils/mixins';
  * @typedef Property
  * @property {String} id Property id, eg. `my-property-id`.
  * @property {String} property Related CSS property name, eg. `text-align`.
- * @property {String} label Label to use in UI, eg. `Text Align`.
  * @property {String} default Defaul value of the property.
+ * @property {String} label Label to use in UI, eg. `Text Align`.
  *
  */
 export default class Property extends Model {

src/style_manager/model/PropertyComposite.js

@@ -7,15 +7,31 @@ export const isNumberType = type => type === 'integer' || type === 'number';
  * @typedef PropertyComposite
  * @property {Array<Object>} properties Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
  * @property {Boolean} [detached=false] Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
- * @property {String|RegExp} [separator=' '] Separator to use to split property values.
- * @property {String} [join=' '] Value used to join property values
- * @property {Function} [fromStyle] Custom logic for getting property values from the target style object, eg.
- * `
+ * @property {String|RegExp} [separator=' '] Value used to split property values, default `" "`.
+ * @property {String} [join=' '] Value used to join property values, default `" "`.
+ * @property {Function} [fromStyle] Custom logic for getting property values from the target style object.
+ * \n
+ * ```js
  *  fromStyle(style) => {
- *    return {};
+ *    const margins = parseMarginShorthand(style.margin);
+ *    return {
+ *      'margin-top': margins.top,
+ *      // ...
+ *    };
  *  }
- * `
+ * ```
  * @property {Function} [toStyle] Custom logic for creating the CSS style object to apply on selected targets.
+ * \n
+ * ```js
+ *  toStyle(values) => {
+ *    const top = values['margin-top'] || 0;
+ *    const right = values['margin-right'] || 0;
+ *    // ...
+ *    return {
+ *      margin: `${top} ${right} ...`,
+ *    };
+ *  }
+ * ```
  */
 export default class PropertyComposite extends Property {
   defaults() {

src/style_manager/model/PropertySelect.js

@@ -3,7 +3,14 @@ import { isDef } from 'utils/mixins';
 
 /**
  * @typedef PropertySelect
- * @property {Array<Object>} options Array of option definitions, eg `[{ id: '100', label: 'Set 100' }]`
+ * @property {Array<Object>} options Array of option definitions.
+ * \n
+ * ```js
+ * options: [
+ *  { id: '100', label: 'Set 100' },
+ *  { id: '200', label: 'Set 200' },
+ * ]
+ * ```
  */
 export default class PropertySelect extends Property {
   defaults() {