Merge pull request PrestaShop#21935 from NeOMakinG/issue21835

Use UIKit material radio elements everywhere in forms

admin-dev/themes/new-theme/scss/pages/product/product_page.scss

@@ -17,17 +17,18 @@
   padding-bottom: 80px;
 
   .widget-radio-inline {
-    div.radio {
-      display: inline;
-    }
+    margin-bottom: 10px;
 
-    label {
+    div.radio {
       display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
     }
 
     a.btn {
       display: inline;
       height: 29px;
+      vertical-align: middle;
     }
   }
 

src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/bootstrap_4_layout.html.twig

@@ -163,7 +163,7 @@
     {% if 'radio-inline' in parent_label_class %}
         {{- form_label(form, null, { widget: parent() }) -}}
     {% else -%}
-        <div class="radio">
+        <div class="radio form-check form-check-radio">
             {{- form_label(form, null, { widget: parent() }) -}}
         </div>
     {%- endif %}
@@ -474,7 +474,7 @@
           </label>
         </div>
       {% else %}
-      <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
+      <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}{% if attrname is same as("class") %} form-check-label{% endif %}"{% endfor %}{% if label_attr|length <= 0 %} class="form-check-label"{% endif %}>
         {{- widget|raw -}}
         {{- label is not same as(false) ? (translation_domain is same as(false) ? label|raw : label|raw) -}}
       </label>

src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/form_div_layout.html.twig

@@ -122,6 +122,7 @@
 {%- block radio_widget -%}
   <input
     type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
+  <i class="form-check-round"></i>
 {% endblock radio_widget -%}
 
 {%- block datetime_widget -%}

src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/material.html.twig

@@ -87,14 +87,15 @@
 {% endblock material_choice_tree_item_checkbox_widget %}
 
 {% block material_choice_tree_item_radio_widget %}
-  <div class="radio js-input-wrapper">
-    <label>
+  <div class="radio js-input-wrapper form-check form-check-radio">
+    <label class="form-check-label">
       <input type="radio"
              name="{{ form.vars.full_name }}"
              value="{{ choice[choice_value] }}"
              {% if choice[choice_value] in selected_values %}checked{% endif %}
              {% if disabled or choice[choice_value] in disabled_values %}disabled{% endif %}
       >
+      <i class="form-check-round"></i>
       {{ choice[choice_label] }}
     </label>
   </div>

src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/prestashop_ui_kit_base.html.twig

@@ -193,7 +193,7 @@
   {{- parent() -}}
 {%- endblock %}
 
-{#{% block checkbox_widget -%}
+{# {% block checkbox_widget -%}
   {% set parent_label_class = parent_label_class|default('') -%}
   {% if 'checkbox-inline' in parent_label_class %}
     {{- form_label(form, null, { widget: parent() }) -}}

tests/UI/pages/BO/catalog/categories/index.js

@@ -270,7 +270,7 @@ class Categories extends BOBasePage {
    * @return {Promise<void>}
    */
   async chooseOptionAndDelete(page, modeID) {
-    await page.click(this.deleteCategoryModalModeInput(modeID));
+    await page.check(this.deleteCategoryModalModeInput(modeID));
     await this.clickAndWaitForNavigation(page, this.deleteCategoryModalDeleteButton);
     await this.waitForVisibleSelector(page, this.alertSuccessBlockParagraph);
   }

tests/UI/pages/BO/customers/add.js

@@ -36,7 +36,15 @@ class AddCustomer extends BOBasePage {
    * @return {Promise<void>}
    */
   async fillCustomerForm(page, customerData) {
-    await page.click(this.socialTitleInput(customerData.socialTitle === 'Mr.' ? 0 : 1));
+    // Click on label for social input
+    const socialTitleElement = await this.getParentElement(
+      page,
+      this.socialTitleInput(customerData.socialTitle === 'Mr.' ? 0 : 1),
+    );
+
+    await socialTitleElement.click();
+
+    // Fill form
     await this.setValue(page, this.firstNameInput, customerData.firstName);
     await this.setValue(page, this.lastNameInput, customerData.lastName);
     await this.setValue(page, this.emailInput, customerData.email);

tests/UI/pages/BO/customers/index.js

@@ -304,11 +304,7 @@ class Customers extends BOBasePage {
    */
   async chooseRegistrationAndDelete(page, allowRegistrationAfterDelete) {
     // Choose deletion method
-    if (allowRegistrationAfterDelete) {
-      await page.click(this.deleteCustomerModalMethodInput(0));
-    } else {
-      await page.click(this.deleteCustomerModalMethodInput(1));
-    }
+    await page.check(this.deleteCustomerModalMethodInput(allowRegistrationAfterDelete ? 0 : 1));
 
     // Click on delete button and wait for action to finish
     await this.clickAndWaitForNavigation(page, this.deleteCustomerModalDeleteButton);

tests/UI/pages/commonPage.js

@@ -374,4 +374,15 @@ module.exports = class CommonPage {
 
     return parseFloat(number);
   }
+
+  /**
+   * Get parent element from selector
+   * @param page
+   * @param selector
+   * @return {Promise<ElementHandle>}
+   */
+  getParentElement(page, selector) {
+    /* eslint-env browser */
+    return page.evaluateHandle(sl => document.querySelector(sl).parentElement, selector);
+  }
 };