Update margin and padding sub properties

src/i18n/locale/en.js

@@ -88,6 +88,22 @@ export default {
       'text-shadow-v': 'Y',
       'text-shadow-blur': 'Blur',
       'text-shadow-color': 'Color',
+      'box-shadow-h': 'X',
+      'box-shadow-v': 'Y',
+      'box-shadow-blur': 'Blur',
+      'box-shadow-spread': 'Spread',
+      'box-shadow-color': 'Color',
+      'box-shadow-type': 'Type',
+
+      // Default names for sub properties in Composite and Stack types
+      'margin-top-sub': 'Top',
+      'margin-right-sub': 'Right',
+      'margin-bottom-sub': 'Bottom',
+      'margin-left-sub': 'Left',
+      'padding-top-sub': 'Top',
+      'padding-right-sub': 'Right',
+      'padding-bottom-sub': 'Bottom',
+      'padding-left-sub': 'Left',
     },
     // Translate options in style properties
     // options: {

src/style_manager/model/PropertyFactory.js

@@ -122,7 +122,15 @@ export default class PropertyFactory {
   }
 
   __sub(items) {
-    return () => items.map(p => this.get(p));
+    return () =>
+      items.map(p => {
+        if (isString(p)) return this.get(p);
+        const { extend, ...rest } = p;
+        return {
+          ...this.get(extend),
+          ...rest,
+        };
+      });
   }
 
   init() {
@@ -223,13 +231,23 @@ export default class PropertyFactory {
         'margin',
         {
           type: this.typeComposite,
-          properties: this.__sub(['margin-top', 'margin-right', 'margin-bottom', 'margin-left']),
+          properties: this.__sub([
+            { extend: 'margin-top', id: 'margin-top-sub' },
+            { extend: 'margin-right', id: 'margin-right-sub' },
+            { extend: 'margin-bottom', id: 'margin-bottom-sub' },
+            { extend: 'margin-left', id: 'margin-left-sub' },
+          ]),
         },
       ],
       [
         'padding',
         {
-          properties: this.__sub(['padding-top', 'padding-right', 'padding-bottom', 'padding-left']),
+          properties: this.__sub([
+            { extend: 'padding-top', id: 'padding-top-sub' },
+            { extend: 'padding-right', id: 'padding-right-sub' },
+            { extend: 'padding-bottom', id: 'padding-bottom-sub' },
+            { extend: 'padding-left', id: 'padding-left-sub' },
+          ]),
         },
         'margin',
       ],

test/specs/style_manager/model/PropertyFactory.js

@@ -220,6 +220,7 @@ describe('PropertyFactory', () => {
         {
           fixedValues: ['initial', 'inherit', 'auto'],
           property: 'margin-top',
+          id: 'margin-top-sub',
           type: 'integer',
           units: obj.unitsSize,
           default: '0',
@@ -227,6 +228,7 @@ describe('PropertyFactory', () => {
         {
           fixedValues: ['initial', 'inherit', 'auto'],
           property: 'margin-right',
+          id: 'margin-right-sub',
           type: 'integer',
           units: obj.unitsSize,
           default: '0',
@@ -234,6 +236,7 @@ describe('PropertyFactory', () => {
         {
           fixedValues: ['initial', 'inherit', 'auto'],
           property: 'margin-bottom',
+          id: 'margin-bottom-sub',
           type: 'integer',
           units: obj.unitsSize,
           default: '0',
@@ -241,6 +244,7 @@ describe('PropertyFactory', () => {
         {
           fixedValues: ['initial', 'inherit', 'auto'],
           property: 'margin-left',
+          id: 'margin-left-sub',
           type: 'integer',
           units: obj.unitsSize,
           default: '0',
@@ -257,6 +261,7 @@ describe('PropertyFactory', () => {
       properties: [
         {
           property: 'padding-top',
+          id: 'padding-top-sub',
           fixedValues: ['initial', 'inherit', 'auto'],
           type: 'integer',
           units: obj.unitsSize,
@@ -265,6 +270,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'padding-right',
+          id: 'padding-right-sub',
           fixedValues: ['initial', 'inherit', 'auto'],
           type: 'integer',
           units: obj.unitsSize,
@@ -273,6 +279,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'padding-bottom',
+          id: 'padding-bottom-sub',
           fixedValues: ['initial', 'inherit', 'auto'],
           type: 'integer',
           units: obj.unitsSize,
@@ -281,6 +288,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'padding-left',
+          id: 'padding-left-sub',
           fixedValues: ['initial', 'inherit', 'auto'],
           type: 'integer',
           units: obj.unitsSize,
@@ -511,7 +519,7 @@ describe('PropertyFactory', () => {
           property: 'border-width',
           type: 'integer',
           units: obj.unitsSizeNoPerc,
-          default: 'medium',
+          default: '0',
           min: 0,
         },
         {