Merge pull request #1431 from FlowFuse/1367

Add class support to Button Group

cypress/fixtures/flows/dashboard-button-groups.json

@@ -72,6 +72,7 @@
         "width": 6,
         "height": 1,
         "label": "Default",
+        "className": "class1 class2",
         "rounded": true,
         "useThemeColors": true,
         "passthru": false,
@@ -402,6 +403,13 @@
                 "t": "delete",
                 "p": "topic",
                 "pt": "msg"
+            },
+            {
+                "t": "set",
+                "p": "ui_update.class",
+                "pt": "msg",
+                "to": "dynamic-class",
+                "tot": "str"
             }
         ],
         "action": "",

cypress/tests/widgets/button-group.spec.js

@@ -4,6 +4,21 @@ describe('Node-RED Dashboard 2.0 - Button Groups', () => {
         cy.visit('/dashboard/page1')
     })
 
+    it('Loads with expected elements', () => {
+        // #nrdb-ui-widget-dashboard-ui-button-group-1 is a button group with 4 buttons
+        // labelled Option 1, Option 2, Option 3, Option 4
+        // with the botton widget having classes class1 and class2
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('exist')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('have.class', 'class1') // static class entered in node flow
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('have.class', 'class2') // static class entered in node flow
+        // should be 4 buttons
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').find('button').should('have.length', 4)
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 1')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 2')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 3')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 4')
+    })
+
     it('can be clicked and emit a string value representing the option', () => {
         // Emitting strings
         cy.clickAndWait(cy.get('button').contains('Option 3'))
@@ -40,13 +55,14 @@ describe('Node-RED Dashboard 2.0 - Button Groups', () => {
         cy.visit('/dashboard/page1')
     })
 
-    it('supports "options" and "label" as a dynamic property', () => {
-        // Emitting strings
+    it('supports "options", "label" and "class" as a dynamic property', () => {
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Static 1')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Static 2')
+        cy.get('#nrdb-ui-widget-ui-button-group-dynamic').should('not.have.class', 'dynamic-class')
         cy.clickAndWait(cy.get('button').contains('Dynamic Options & Label'))
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic Label')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic 1')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic 2')
+        cy.get('#nrdb-ui-widget-ui-button-group-dynamic').should('have.class', 'dynamic-class')
     })
 })

docs/nodes/widgets/ui-button-group.md

@@ -13,6 +13,9 @@ props:
         dynamic: true
     Topic: The text that needs to be send in the msg.topic field.
     Passthrough: Specify whether input messages should be passed through as output messages.
+    Class:
+        payload: msg.ui_update.class
+        structure: ["String"]
 controls:
     enabled:
         example: true | false

nodes/widgets/locales/en-US/ui_button_group.json

@@ -8,7 +8,9 @@
             "colors": "Colors",
             "options": "Options",
             "appearance": "Appearance",
-            "tcolors": "Use theme colors"
+            "tcolors": "Use theme colors",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s)"
         }
     }
 }

nodes/widgets/ui_button_group.html

@@ -22,6 +22,7 @@
             },
             height: { value: 1 },
             label: { value: 'button group' },
+            className: { value: '' },
             rounded: { value: true },
             useThemeColors: { value: true },
             passthru: { value: false },
@@ -238,6 +239,19 @@
         <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-button-group.label.label"></span></label>
         <input type="text" id="node-input-label">
     </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-button-group.label.className"></label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-button-group.label.classNamePlaceholder" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
     <div class='form-row'>
         <label for='node-input-rounded'><i class='fa fa-gear'></i> <span data-i18n="ui-button-group.label.appearance"></span></label>        
         <span id="appearance-square" style="opacity:1; border:1px solid; padding: 3px 20px 2px 5px; "><i class="fa fa-square"></i></span>