Update getLabel in TraitView

docs/modules/Traits.md

@@ -141,8 +141,7 @@ editor.DomComponents.addType('input', {
 
 GrapesJS comes along with few built-in types that you can use to define your traits:
 
-* **Text**
-Simple text input
+* **Text** - Simple text input
 ```js
 {
   type: 'text',
@@ -151,8 +150,7 @@ Simple text input
   placeholder: 'Insert text', // Placeholder to show inside the input
 }
 ```
-* **Number**
-Number input
+* **Number** - Number input
 ```js
 {
   type: 'number',
@@ -163,10 +161,33 @@ Number input
   step: 5, // Number of steps
 }
 ```
-* checkbox
-* select
-* color
-
+* **Checkbox** - Simple checkbox input
+```js
+{
+  type: 'checkbox',
+  // ...
+  valueTrue: 'YES', // Value to assign when is checked, default: `true`
+  valueFalse: 'NO', // Value to assign when is unchecked, default: `false`
+}
+```
+* **Select** - Select input
+```js
+{
+  type: 'select',
+  // ...
+  options: [ // Array of options
+    { id: 'opt1', name: 'Option 1'},
+    { id: 'opt2', name: 'Option 2'},
+  ]
+}
+```
+* **Color** - Color picker
+```js
+{
+  type: 'color',
+  // ...
+}
+```
 
 
 ## Define new Trait type

src/trait_manager/view/TraitView.js

@@ -1,5 +1,6 @@
 import Backbone from 'backbone';
 import { isUndefined, isString, isFunction } from 'underscore';
+import { capitalize } from 'utils/mixins';
 
 const $ = Backbone.$;
 
@@ -115,9 +116,8 @@ export default Backbone.View.extend({
    * @private
    */
   getLabel() {
-    var model = this.model;
-    var label = model.get('label') || model.get('name');
-    return label.charAt(0).toUpperCase() + label.slice(1).replace(/-/g, ' ');
+    const { label, name } = this.model.attributes;
+    return capitalize(label || name).replace(/-/g, ' ');
   },
 
   /**