feat(label): are now available for with more types

- chips
- datepicker
- radio
- slider

CLOSES: #9 , #166004660

Author: Kamil Kisiela

CHANGELOG.md

@@ -7,6 +7,10 @@ All notable changes to this project will be documented in this file. This projec
 ### Added
 
 - (input) support for **ng-pattern** as **templateOptions.pattern** (#10)
+- (chips) has now **label** wrapper
+- (datepicker) has now **label** wrapper
+- (radio) has now **label** wrapper
+- (slider) has now **label** wrapper
 
 ## [0.12.0](https://github.com/formly-js/angular-formly-templates-material/compare/v0.11.0...v0.12.0) - 2015-12-30
 

src/types/chips/chips.js

@@ -4,6 +4,7 @@ export default (formlyConfigProvider) => {
   formlyConfigProvider.setType({
     template,
     name: 'chips',
+    wrapper: ['label'],
     defaultOptions: {
       defaultValue: [],
       ngModelAttrs: {

src/types/datepicker/datepicker.js

@@ -4,7 +4,7 @@ export default (formlyConfigProvider) => {
   formlyConfigProvider.setType({
     template,
     name: 'datepicker',
-    wrapper: ['messages'],
+    wrapper: ['label', 'messages'],
     defaultOptions: {
       ngModelAttrs: {
         placeholder: {

src/types/radio/radio.js

@@ -4,6 +4,7 @@ export default (formlyConfigProvider) => {
   formlyConfigProvider.setType({
     template,
     name: 'radio',
+    wrapper: ['label'],
     apiCheck: (check) => ({
       templateOptions: {
         options: check.arrayOf(check.object),

src/types/slider/slider.js

@@ -4,6 +4,7 @@ export default (formlyConfigProvider) => {
   formlyConfigProvider.setType({
     template,
     name: 'slider',
+    wrapper: ['label'],
     defaultOptions: {
       ngModelAttrs: {
         min: {

src/wrappers/label/label.html

@@ -1,4 +1,4 @@
-<label for="{{id}}">
-    {{to.label}}
+<label for="{{id}}" ng-style="['input', 'textarea', 'select'].indexOf(options.type) === -1 && {'font-size':'12px', 'color': 'rgb(117, 117, 117)'}">
+  {{to.label}}
 </label>
 <formly-transclude></formly-transclude>

tests/wrappers/label-spec.js

@@ -9,21 +9,22 @@ describe('formlyMaterial - label wrapper', () => {
   let $scope;
   let element;
   let field;
+  const color = 'rgb(117, 117, 117)';
 
   //
   // helpers
   //
 
-  function compile() {
+  function compile(options) {
     $scope = $rootScope.$new();
-    $scope.fields = [{
+    $scope.fields = [angular.merge({}, {
       key: 'testField',
       type: 'checkbox',
       wrapper: ['label'],
       templateOptions: {
         label: 'test field'
       }
-    }];
+    }, options)];
 
     const form = $compile(testUtils.getFormTemplate())($scope);
 
@@ -43,20 +44,53 @@ describe('formlyMaterial - label wrapper', () => {
       $compile = _$compile_;
       $rootScope = _$rootScope_;
     });
-
-    compile();
   });
 
   it('should exist', () => {
+    compile();
     expect(element.length).toBe(1);
   });
 
   it('should have proper value', () => {
+    compile();
     expect(element.html()).toContain(field.templateOptions.label);
   });
 
   it('should be before the field', () => {
+    compile();
     expect(element.find('md-checkbox').length).toBe(0);
     expect(element.next().children()[0].nodeName).toBe('MD-CHECKBOX');
   });
+
+  it('should have styles added', () => {
+    compile();
+    expect(element.css('color')).toBe(color);
+  });
+
+  it('should not have styles added when used with input', () => {
+    compile({
+      type: 'input'
+    });
+    expect(element.css('color')).not.toBe(color);
+  });
+
+  it('should not have styles added when used with select', () => {
+    compile({
+      type: 'select',
+      templateOptions: {
+        options: [{
+          name: 'foo',
+          value: 'bar'
+        }]
+      }
+    });
+    expect(element.css('color')).not.toBe(color);
+  });
+
+  it('should not have styles added when used with textarea', () => {
+    compile({
+      type: 'textarea'
+    });
+    expect(element.css('color')).not.toBe(color);
+  });
 });