fix: Correctly set styles on button widget

jscharett · Sep 3, 2019 · fd193cc · fd193cc
1 parent 0e41e4a
commit fd193cc
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/projects/demo-e2e/src/tests/examples/ngx/buttons.e2e-spec.ts b/projects/demo-e2e/src/tests/examples/ngx/buttons.e2e-spec.ts
@@ -24,6 +24,7 @@ describe('buttons example', () => {
 
             await Promise.all([
                 expectationPromise,
+                expect(await form.getControlAttribute(buttonLayout.name, 'style')).toEqual('color: dimgray;'),
                 expect(await form.getControlAttribute(buttonLayout.name, 'type')).toEqual(buttonLayout.type),
                 expect(await form.getControlAttribute(buttonLayout.name, 'title')).toEqual(buttonLayout.description),
                 expect(await form.getControlAttribute(buttonLayout.name, 'accesskey')).toEqual(buttonLayout.accesskey),

diff --git a/projects/demo/src/assets/examples/ngx/buttons.json b/projects/demo/src/assets/examples/ngx/buttons.json
@@ -19,23 +19,32 @@
         "description": "This is an input[type='button']",
         "tabindex": 1,
         "accesskey": "b",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "reset",
         "name": "Reset",
         "title": "Reset",
         "description": "This is an input[type='reset']",
         "tabindex": 0,
         "accesskey": "r",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "submit",
         "name": "Submit",
         "title": "Submit",
         "description": "This is an input[type='submit']",
         "tabindex": 3,
         "accesskey": "s",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "image",
         "name": "Image",
@@ -49,38 +58,53 @@
             "width": 100,
             "height": 30
         },
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "submit",
         "name": "Submit2",
         "title": "Submit",
         "content": "<span class='icon'>{{ options.title }}</span>",
         "description": "This is an button[type='submit']",
         "accesskey": "x",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "reset",
         "name": "Reset2",
         "title": "Reset",
         "content": "<span class='icon'>{{ options.title }}</span>",
         "description": "This is an button[type='reset']",
         "accesskey": "y",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "button",
         "name": "Button2",
         "title": "Button",
         "content": "<span class='icon'>{{ options.title }}</span>",
         "description": "This is an button[type='button']",
         "accesskey": "z",
-        "htmlClass": "btn"
+        "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        }
     }, {
         "type": "button",
         "name": "Button3",
         "title": "Click me",
         "description": "This is an button[type='button'] with click handling",
         "accesskey": "w",
         "htmlClass": "btn",
+        "style": {
+            "color": "dimgray"
+        },
         "onClick": "alert(`clicked button with layout: \n\r${JSON.stringify(layout, null, 4)}`);"
     }]
 }
diff --git a/projects/ngx-json-schema-form/src/lib/button/button.component.html b/projects/ngx-json-schema-form/src/lib/button/button.component.html
@@ -3,13 +3,13 @@
     [attr.accesskey]="options.accesskey"
     [attr.class]="options.htmlClass"
     [attr.dirname]="options.dirname ? layoutNode.name + '.dir' : null"
-    [attr.style]="options.style"
     [attr.tabindex]="options.tabindex"
     [attr.title]="options.description"
     [attr.alt]="options.icon?.alt"
     [attr.height]="options.icon?.height"
     [attr.src]="options.icon?.src"
     [attr.width]="options.icon?.width"
+    [ngStyle]="options.style"
     [id]="layoutNode.id"
     [name]="layoutNode.name"
     [type]="layoutNode.type"
@@ -19,9 +19,9 @@
     [attr.accesskey]="options.accesskey"
     [attr.class]="options.htmlClass"
     [attr.dirname]="options.dirname ? layoutNode.name + '.dir' : null"
-    [attr.style]="options.style"
     [attr.tabindex]="options.tabindex"
     [attr.title]="options.description"
+    [ngStyle]="options.style"
     [id]="layoutNode.id"
     [name]="layoutNode.name"
     [type]="layoutNode.type">