Skip to content

FORMS-18644: Desktop, RWD Tablet, RWD Mobile - Controls have same name but different actions @sunnym @vavarshn #1571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock}">
<button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" title="Help text">
<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock, componentTitle}">
<sly data-sly-set.namedTitle="${componentTitle} help text" />
<sly data-sly-set.fullTitle="${componentTitle ? namedTitle : 'Help text'}" />
<button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" title="${fullTitle}">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will impact backward compatiblity, it would need to be addressed

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only backwd compatibility case I could think of is this component being used without giving it he "componentTitle" param (as it was before).

I made a test using it in the "checkboxgroup" component as
<div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup', componentTitle=checkboxgroup.label.value}" data-sly-unwrap></div>

And the text returns to "Help text" as it was initially
Screenshot 2025-04-22 at 20 46 30

If there are any other compatibility cases please let me know.

</button>
</template>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@
<div class="cmp-accordion__label-container">
<div data-sly-call="${label.label @componentId=accordion.id, labelValue=accordion.label.value, labelVisible=accordion.label.visible, labelRichText=accordion.label.richText, bemBlock='cmp-accordion'}"
data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion'}"
data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion', componentTitle=accordion.label.value}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=accordion.id, shortDescriptionVisible=accordion.tooltipVisible, shortDescription=accordion.tooltip, bemBlock='cmp-accordion'}"
data-sly-unwrap></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
data-cmp-is="adaptiveFormButton"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-button__help-container">
<div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
</div>
<button
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
data-cmp-is="adaptiveFormButton"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-button__help-container">
<div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
</div>
<!-- Button is disabled to prevent the button from being clicked before JS is initialized, else it would default to HTML form submit behavior -->
<button
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[checkbox.id, 'widget']}"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-checkbox__help-container">
<div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox', componentTitle=checkbox.label.value}" data-sly-unwrap></div>
</div>

<div class="cmp-adaptiveform-checkbox__widget-container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[checkboxgroup.id, 'widget']}">
<div class="cmp-adaptiveform-checkboxgroup__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=checkboxgroup.label.value, labelVisible=checkboxgroup.label.visible, labelRichText=checkboxgroup.label.richText, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup', componentTitle=checkboxgroup.label.value}" data-sly-unwrap></div>
</div>
<sly data-sly-call="${widget.widget @ checkboxgroup = checkboxgroup}"></sly>
<div data-sly-call="${shortDescription.shortDescription @componentId=checkboxgroup.id, shortDescriptionVisible=checkboxgroup.tooltipVisible, shortDescription=checkboxgroup.tooltip, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[datePicker.id, 'widget']}">
<div class="cmp-adaptiveform-datepicker__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=datePicker.label.value, labelVisible=datePicker.label.visible, labelRichText=datePicker.label.richText, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker', componentTitle=datePicker.label.value}" data-sly-unwrap></div>
</div>
<input type="date"
name="${datePicker.name}"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[dropdown.id, 'widget']}">
<div class="cmp-adaptiveform-dropdown__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=dropdown.label.value, labelVisible=dropdown.label.visible, labelRichText=dropdown.label.richText, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown', componentTitle=dropdown.label.value}" data-sly-unwrap></div>
</div>
<select class="cmp-adaptiveform-dropdown__widget"
id="${widgetId}"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[email.id, 'widget']}">
<div class="cmp-adaptiveform-emailinput__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=email.label.value, labelVisible=email.label.visible, labelRichText=email.label.richText, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput', componentTitle=email.label.value}" data-sly-unwrap></div>
</div>
<input title="${email.tooltipVisible ? '' : email.tooltipText}"
class="cmp-adaptiveform-emailinput__widget"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-fileinput__label-container">
<div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
</div>
</br>
<label data-sly-test="${file.buttonText}" for="${file.id}_widget" tabindex="0" role="button" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</label>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-fileinput__label-container">
<div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
</div>
</br>
<div class="cmp-adaptiveform-fileinput__container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-fileinput__label-container">
<div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
</div>
<div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment', componentTitle=file.label.value}" data-sly-unwrap></div>
</div>
</br>
<div class="cmp-adaptiveform-fileinput__container">
<div class="cmp-adaptiveform-fileinput__dragarea">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
style="${container.backgroundStyle @ context='styleString'}">
<div class="cmp-adaptiveform-fragment__label-container">
<div data-sly-call="${label.label @componentId=fragment.id, labelValue=label.label.value, labelVisible=label.label.visible, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment', componentTitle=label.label.value}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=fragment.id, shortDescriptionVisible=fragment.tooltipVisible, shortDescription=fragment.tooltip, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
<div data-sly-call="${longDescription.longDescription @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[numberinput.id, 'widget']}">
<div class="cmp-adaptiveform-numberinput__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=numberinput.label.value, labelVisible=numberinput.label.visible, labelRichText=numberinput.label.richText, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput', componentTitle=numberinput.label.value}" data-sly-unwrap></div>
</div>
<input
class="cmp-adaptiveform-numberinput__widget"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
style="${container.backgroundStyle @ context='styleString'}">
<div class="cmp-container__label-container">
<div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
style="${container.backgroundStyle @ context='styleString'}">
<div class="cmp-container__label-container">
<div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
<div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[radioButton.id, 'widget']}">
<div class="cmp-adaptiveform-radiobutton__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=radioButton.label.value, labelVisible=radioButton.label.visible, labelRichText=radioButton.label.richText, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton', componentTitle=radioButton.label.value}" data-sly-unwrap></div>
</div>
<div class="cmp-adaptiveform-radiobutton__widget ${radioButton.orientation}" id="${widgetId}" role="radiogroup">
<div data-sly-list="${radioButton.enums}" data-sly-unwrap>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-switch__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=switch.label.value, labelVisible=switch.label.visible, labelRichText=switch.label.richText, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch', componentTitle=switch.label.value}" data-sly-unwrap></div>
</div>

<div class="cmp-adaptiveform-switch__container" id="${widgetId}">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
<div class="cmp-tabs__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs', componentTitle=panel.label.value}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
data-sly-test.widgetId="${'{0}-{1}' @ format=[telText.id, 'widget']}">
<div class="cmp-adaptiveform-telephoneinput__label-container">
<div data-sly-call="${label.label @componentId=widgetIdd, labelValue=telText.label.value, labelVisible=telText.label.visible, labelRichText=telText.label.richText, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput', componentTitle=telText.label.value}" data-sly-unwrap></div>
</div>
<input title="${telText.tooltipVisible ? '' : telText.tooltipText}"
class="cmp-adaptiveform-telephoneinput__widget"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-termsandcondition__label-container">
<div data-sly-call="${label.label @componentId=tnc.id, labelValue=tnc.label.value, labelVisible=tnc.label.visible, labelRichText=tnc.label.richText, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition', componentTitle=tnc.label.value}" data-sly-unwrap></div>
</div>
<div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"
data-cmp-visible="${tnc.showAsPopup ? 'false' : 'true'}">
Expand Down
Loading