FORMS-17091 initializing label in button view (#1471)

Co-authored-by: Shivam Agarwal <shivama@adobe.com>

Author: im-shiv

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/button/buttonv1/basic/.content.xml

@@ -76,6 +76,25 @@
                         jcr:primaryType="nt:unstructured"
                         click="[navigateTo('https://www.google.com'\, '_newwindow')]"/>
             </button-5>
+            <button-6
+                    jcr:lastModified="{Date}2024-11-05T11:18:53.340+05:30"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="change me"
+                    sling:resourceType="core/fd/components/form/button/v1/button"
+                    dorExclusion="true"
+                    enabled="{Boolean}true"
+                    fieldType="button"
+                    name="button1730785718091"
+                    visible="{Boolean}true">
+                <fd:rules
+                        fd:click="[{&quot;nodeName&quot;:&quot;ROOT&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_SCRIPTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;EVENT_CONDITION&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;COMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.button1730785718091&quot;\,&quot;type&quot;:&quot;AFCOMPONENT|FIELD|BUTTON&quot;\,&quot;name&quot;:&quot;button1730785718091&quot;}}\,{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON_OPERATOR&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;is clicked&quot;\,&quot;value&quot;:null}}\,{&quot;nodeName&quot;:&quot;PRIMITIVE_EXPRESSION&quot;\,&quot;choice&quot;:null}]}\,&quot;nested&quot;:false}\,{&quot;nodeName&quot;:&quot;Then&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;BLOCK_STATEMENTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;BLOCK_STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;SET_PROPERTY&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;MEMBER_EXPRESSION&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;PROPERTY_LIST&quot;\,&quot;value&quot;:&quot;label.value&quot;}\,{&quot;nodeName&quot;:&quot;of&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;COMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.button1730785718091&quot;\,&quot;displayName&quot;:&quot;change me&quot;\,&quot;type&quot;:&quot;AFCOMPONENT|FIELD|BUTTON&quot;\,&quot;displayPath&quot;:&quot;FORM/change me/&quot;\,&quot;name&quot;:&quot;button1730785718091&quot;\,&quot;parent&quot;:&quot;$form&quot;\,&quot;metadata&quot;:{&quot;isAncestorRepeatable&quot;:false}}}]}\,{&quot;nodeName&quot;:&quot;to&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;EXTENDED_EXPRESSION&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;STRING_LITERAL&quot;\,&quot;value&quot;:&quot;changed&quot;}}]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;{label : {value : 'changed'}}&quot;]\,&quot;eventName&quot;:&quot;Click&quot;\,&quot;ruleType&quot;:&quot;&quot;\,&quot;description&quot;:&quot;&quot;}]"
+                        jcr:primaryType="nt:unstructured"
+                        validationStatus="valid"/>
+                <fd:events
+                        jcr:primaryType="nt:unstructured"
+                        click="[{label : {value : 'changed'}}]"/>
+            </button-6>
         </guideContainer>
     </jcr:content>
 </jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/clientlibs/site/js/buttonview.js

@@ -30,6 +30,7 @@
         static selectors  = {
             self: "[data-" + this.NS + '-is="' + this.IS + '"]',
             widget: `.${Button.bemBlock}__widget`,
+            label: `.${Button.bemBlock}__text`,
             description: `.${Button.bemBlock}__longdescription`,
             qm: `.${Button.bemBlock}__questionmark`,
             tooltipDiv: `.${Button.bemBlock}__shortdescription`
@@ -40,7 +41,7 @@
         }
 
         getLabel() {
-            return null;
+            return this.element.querySelector(Button.selectors.label);
         }
 
         getWidget() {

ui.tests/test-module/specs/button/button.runtime.cy.js

@@ -108,4 +108,10 @@ describe("Form Runtime with Button Input", () => {
         cy.get('.cmp-adaptiveform-button__widget').eq(0).should('have.attr', 'type', 'button');
     });
 
+    it(`label changes should reflect via rules`, () => {
+        const [id] = Object.entries(formContainer._fields)[5];
+        cy.get(`#${id}`).find('.cmp-adaptiveform-button__text').contains('change me');
+        cy.get(`#${id}`).find('.cmp-adaptiveform-button__widget').click();
+        cy.get(`#${id}`).find('.cmp-adaptiveform-button__text').contains('changed');
+    });
 })