Update sub properties labels

src/i18n/locale/en.js

@@ -84,6 +84,7 @@ export default {
     },
     // The core library generates the name by their `property` name
     properties: {
+      // Default names for sub properties in Composite and Stack types
       'text-shadow-h': 'X',
       'text-shadow-v': 'Y',
       'text-shadow-blur': 'Blur',
@@ -94,8 +95,6 @@ export default {
       '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',
@@ -104,6 +103,19 @@ export default {
       'padding-right-sub': 'Right',
       'padding-bottom-sub': 'Bottom',
       'padding-left-sub': 'Left',
+      'border-width-sub': 'Width',
+      'border-style-sub': 'Style',
+      'border-color-sub': 'Color',
+      'border-top-left-radius-sub': 'Top Left',
+      'border-top-right-radius-sub': 'Top Right',
+      'border-bottom-right-radius-sub': 'Bottom Right',
+      'border-bottom-left-radius-sub': 'Bottom Left',
+      'transform-rotate-x': 'Rotate X',
+      'transform-rotate-y': 'Rotate Y',
+      'transform-rotate-z': 'Rotate Z',
+      'transform-scale-x': 'Scale X',
+      'transform-scale-y': 'Scale Y',
+      'transform-scale-z': 'Scale Z',
     },
     // Translate options in style properties
     // options: {

src/style_manager/model/PropertyFactory.js

@@ -254,7 +254,11 @@ export default class PropertyFactory {
       [
         'border',
         {
-          properties: this.__sub(['border-width', 'border-style', 'border-color']),
+          properties: this.__sub([
+            { extend: 'border-width', id: 'border-width-sub' },
+            { extend: 'border-style', id: 'border-style-sub' },
+            { extend: 'border-color', id: 'border-color-sub' },
+          ]),
         },
         'margin',
       ],
@@ -262,10 +266,10 @@ export default class PropertyFactory {
         'border-radius',
         {
           properties: this.__sub([
-            'border-top-left-radius',
-            'border-top-right-radius',
-            'border-bottom-right-radius',
-            'border-bottom-left-radius',
+            { extend: 'border-top-left-radius', id: 'border-top-left-radius-sub' },
+            { extend: 'border-top-right-radius', id: 'border-top-right-radius-sub' },
+            { extend: 'border-bottom-right-radius', id: 'border-bottom-right-radius-sub' },
+            { extend: 'border-bottom-left-radius', id: 'border-bottom-left-radius-sub' },
           ]),
         },
         'margin',

test/specs/style_manager/model/PropertyFactory.js

@@ -469,6 +469,7 @@ describe('PropertyFactory', () => {
       properties: [
         {
           property: 'border-top-left-radius',
+          id: 'border-top-left-radius-sub',
           type: 'integer',
           units: obj.unitsSize,
           default: '0',
@@ -476,6 +477,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'border-top-right-radius',
+          id: 'border-top-right-radius-sub',
           type: 'integer',
           units: obj.unitsSize,
           min: 0,
@@ -483,6 +485,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'border-bottom-right-radius',
+          id: 'border-bottom-right-radius-sub',
           type: 'integer',
           units: obj.unitsSize,
           min: 0,
@@ -490,6 +493,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'border-bottom-left-radius',
+          id: 'border-bottom-left-radius-sub',
           type: 'integer',
           units: obj.unitsSize,
           min: 0,
@@ -517,6 +521,7 @@ describe('PropertyFactory', () => {
       properties: [
         {
           property: 'border-width',
+          id: 'border-width-sub',
           type: 'integer',
           units: obj.unitsSizeNoPerc,
           default: '0',
@@ -524,6 +529,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'border-style',
+          id: 'border-style-sub',
           type: 'select',
           default: 'solid',
           options: [
@@ -540,6 +546,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'border-color',
+          id: 'border-color-sub',
           type: 'color',
           default: 'black',
         },