Update property labels

src/i18n/locale/en.js

@@ -82,9 +82,9 @@ export default {
       flex: 'Flex',
       dimension: 'Dimension',
     },
-    // The core library generates the name by their `property` name
+    // Default names for sub properties in Composite and Stack types.
+    // Other labels are generated directly from their property names (eg. 'font-size' will be 'Font size').
     properties: {
-      // Default names for sub properties in Composite and Stack types
       'text-shadow-h': 'X',
       'text-shadow-v': 'Y',
       'text-shadow-blur': 'Blur',
@@ -116,6 +116,14 @@ export default {
       'transform-scale-x': 'Scale X',
       'transform-scale-y': 'Scale Y',
       'transform-scale-z': 'Scale Z',
+      'transition-property-sub': 'Property',
+      'transition-duration-sub': 'Duration',
+      'transition-timing-function-sub': 'Timing',
+      'background-image-sub': 'Image',
+      'background-repeat-sub': 'Repeat',
+      'background-position-sub': 'Position',
+      'background-attachment-sub': 'Attachment',
+      'background-size-sub': 'Size',
     },
     // Translate options in style properties
     // options: {

src/style_manager/model/PropertyFactory.js

@@ -294,7 +294,11 @@ export default class PropertyFactory {
         'transition',
         {
           type: this.typeStack,
-          properties: this.__sub(['transition-property', 'transition-duration', 'transition-timing-function']),
+          properties: this.__sub([
+            { extend: 'transition-property', id: 'transition-property-sub' },
+            { extend: 'transition-duration', id: 'transition-duration-sub' },
+            { extend: 'transition-timing-function', id: 'transition-timing-function-sub' },
+          ]),
         },
       ],
       [
@@ -325,11 +329,11 @@ export default class PropertyFactory {
         {
           detached: true,
           properties: this.__sub([
-            'background-image',
-            'background-repeat',
-            'background-position',
-            'background-attachment',
-            'background-size',
+            { extend: 'background-image', id: 'background-image-sub' },
+            { extend: 'background-repeat', id: 'background-repeat-sub' },
+            { extend: 'background-position', id: 'background-position-sub' },
+            { extend: 'background-attachment', id: 'background-attachment-sub' },
+            { extend: 'background-size', id: 'background-size-sub' },
           ]),
         },
         'box-shadow',

test/specs/style_manager/model/PropertyFactory.js

@@ -614,17 +614,20 @@ describe('PropertyFactory', () => {
       properties: [
         {
           property: 'background-image',
+          id: 'background-image-sub',
           type: 'file',
           functionName: 'url',
         },
         {
           property: 'background-repeat',
+          id: 'background-repeat-sub',
           type: 'select',
           default: 'repeat',
           options: [{ id: 'repeat' }, { id: 'repeat-x' }, { id: 'repeat-y' }, { id: 'no-repeat' }],
         },
         {
           property: 'background-position',
+          id: 'background-position-sub',
           type: 'select',
           default: 'left top',
           options: [
@@ -641,12 +644,14 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'background-attachment',
+          id: 'background-attachment-sub',
           type: 'select',
           default: 'scroll',
           options: [{ id: 'scroll' }, { id: 'fixed' }, { id: 'local' }],
         },
         {
           property: 'background-size',
+          id: 'background-size-sub',
           type: 'select',
           default: 'auto',
           options: [{ id: 'auto' }, { id: 'cover' }, { id: 'contain' }],
@@ -663,6 +668,7 @@ describe('PropertyFactory', () => {
       properties: [
         {
           property: 'transition-property',
+          id: 'transition-property-sub',
           type: 'select',
           default: 'width',
           options: [
@@ -677,6 +683,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'transition-duration',
+          id: 'transition-duration-sub',
           type: 'integer',
           units: obj.unitsTime,
           default: '2',
@@ -684,6 +691,7 @@ describe('PropertyFactory', () => {
         },
         {
           property: 'transition-timing-function',
+          id: 'transition-timing-function-sub',
           type: 'select',
           default: 'ease',
           options: [{ id: 'linear' }, { id: 'ease' }, { id: 'ease-in' }, { id: 'ease-out' }, { id: 'ease-in-out' }],