MDL-75670 theme: Refactor form-group helper class dropped in BS5

- Replace .form-group Boostrap helper class with .mb-3. The .form-group class was only adding margin bottom styles, so it is an straightforward change. - Replace .form-group references in SCSS files with .fitem now .form-group has been removed. - There were some other .form-group occurrences in the code that were using it not for styling but incorrectly for managing some logic. These have been also replaced with .fitem or removed.
abgreeve · Feb 29, 2024 · 4ce883a · 4ce883a
1 parent e567c21
commit 4ce883a
Show file tree

Hide file tree

Showing 76 changed files with 290 additions and 291 deletions.
diff --git a/admin/roles/classes/define_role_table_advanced.php b/admin/roles/classes/define_role_table_advanced.php
@@ -645,7 +645,7 @@ protected function get_role_risks_info() {
     protected function print_field($name, $caption, $field, $helpicon = null) {
         global $OUTPUT;
         // Attempt to generate HTML like formslib.
-        echo '<div class="fitem row form-group">';
+        echo '<div class="fitem row mb-3">';
         echo '<div class="fitemtitle col-md-3">';
         if ($name) {
             echo '<label for="' . $name . '">';

diff --git a/admin/templates/setting_courselist_frontpage.mustache b/admin/templates/setting_courselist_frontpage.mustache
@@ -40,9 +40,9 @@
 {{!
     Setting courselist_frontpage.
 }}
-<div class="form-group">
+<div class="mb-3">
     {{#selects}}
-        <select id="{{id}}{{key}}" name="{{name}}[]" class="custom-select">
+        <select id="{{id}}{{key}}" name="{{name}}[]" class="custom-select mb-1">
             {{#options}}
                 <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
             {{/options}}

diff --git a/admin/templates/setting_emoticons.mustache b/admin/templates/setting_emoticons.mustache
@@ -35,7 +35,7 @@
 {{!
     Setting emoticons.
 }}
-<div class="form-group">
+<div class="mb-3">
     <table id="emoticonsetting" class="admintable generaltable">
         <thead>
             <tr>

diff --git a/admin/templates/setting_gradecat_combo.mustache b/admin/templates/setting_gradecat_combo.mustache
@@ -40,7 +40,7 @@
 {{!
     Setting configselect.
 }}
-<div class="form-group">
+<div class="mb-3">
     <select id="{{id}}" name="{{name}}[value]" class="form-select custom-select">
         {{#options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>

diff --git a/admin/tests/behat/behat_admin.php b/admin/tests/behat/behat_admin.php
@@ -75,7 +75,6 @@ public function i_set_the_following_administration_settings_values(TableNode $ta
                 // Multi element settings, interacting only the first one.
                 $fieldxpath = "//*[label[contains(., $label)]|span[contains(., $label)]]" .
                         "/ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' form-item ')]" .
-                        "/descendant::div[contains(concat(' ', @class, ' '), ' form-group ')]" .
                         "/descendant::*[self::input | self::textarea | self::select]" .
                         "[not(./@type = 'submit' or ./@type = 'image' or ./@type = 'hidden')]";
             }

diff --git a/admin/tool/dataprivacy/templates/category_purpose_form.mustache b/admin/tool/dataprivacy/templates/category_purpose_form.mustache
@@ -62,7 +62,7 @@
 <form method="post" action="{{actionurl}}" id="category_purpose_form">
     <input type="hidden" value="{{contextlevel}}" id="contextlevel" />
     {{#modemodule}}
-    <div class="form-group">
+    <div class="mb-3">
         <label for="activity">{{#str}}activitymodule{{/str}}</label>
         {{^newactivitydefaults}}
             <input type="hidden" id="activity" value="{{#activityoptions}}{{#selected}}{{name}}{{/selected}}{{/activityoptions}}" />
@@ -74,15 +74,15 @@
         </select>
     </div>
     {{/modemodule}}
-    <div class="form-group">
+    <div class="mb-3">
         <label for="category">{{#str}}category, tool_dataprivacy{{/str}}</label>
         <select class="form-control" id="category">
         {{#categoryoptions}}
             <option value="{{id}}" {{#selected}}selected{{/selected}}>{{name}}</option>
         {{/categoryoptions}}
         </select>
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="purpose">{{#str}}purpose, tool_dataprivacy{{/str}}</label>
         <select class="form-control" id="purpose">
         {{#purposeoptions}}

diff --git a/admin/tool/langimport/templates/langimport.mustache b/admin/tool/langimport/templates/langimport.mustache
@@ -69,15 +69,15 @@
         <div class="col-md-{{#caninstall}}6{{/caninstall}}{{^caninstall}}12{{/caninstall}} span{{#caninstall}}6{{/caninstall}}{{^caninstall}}12{{/caninstall}} mb-1">
             <form id="uninstallform" action="{{uninstallurl}}" method="post">
                 <fieldset>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="menuuninstalllang">{{#str}}installedlangs, tool_langimport{{/str}}</label>
                         <select size="15" multiple="multiple" id="menuuninstalllang" class="form-control input-block-level" name="uninstalllang[]">
                             {{#installedoptions}}
                                 <option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{text}}}‎</option>
                             {{/installedoptions}}
                         </select>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-3">
                         <input type="hidden" name="sesskey" value="{{sesskey}}">
                         <input id="languninstallbutton" type="submit" value="{{#str}}uninstall, tool_langimport{{/str}}" class="btn btn-secondary">
                     </div>
@@ -101,7 +101,7 @@
             <div class="col-md-6 mb-1">
                 <form id="installform" action="{{installurl}}" method="post">
                     <fieldset>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="menupack">{{#str}}availablelangs, install{{/str}}</label>
                             <select size="15" multiple="multiple" class="form-control input-block-level" id="menupack" name="pack[]">
                                 {{#toinstalloptions}}
@@ -116,7 +116,7 @@
                                 {{/label}}
                             {{/ core/search_input_auto }}
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <input type="hidden" name="sesskey" value="{{sesskey}}">
                             <input type="submit" value="{{#str}}install, tool_langimport{{/str}}" class="btn btn-secondary">
                         </div>

diff --git a/admin/tool/lp/classes/site_competencies_form_element.php b/admin/tool/lp/classes/site_competencies_form_element.php
@@ -69,7 +69,7 @@ public function toHtml() {
             $params = [$context->id];
             // Require some JS to select the competencies.
             $PAGE->requires->js_call_amd('tool_lp/form_competency_element', 'init', $params);
-            $html .= '<div class="form-group row">';
+            $html .= '<div class="mb-3 row">';
             $html .= '<div class="col-md-3"></div>';
             $html .= '<div class="col-md-9">';
             $html .= '<div data-region="competencies"></div>';

diff --git a/admin/tool/lp/templates/competency_picker.mustache b/admin/tool/lp/templates/competency_picker.mustache
@@ -63,7 +63,7 @@
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>

diff --git a/admin/tool/lp/templates/competency_picker_competencyform.mustache b/admin/tool/lp/templates/competency_picker_competencyform.mustache
@@ -45,7 +45,7 @@
 <h3>{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>

diff --git a/admin/tool/lp/templates/competency_picker_user_plans.mustache b/admin/tool/lp/templates/competency_picker_user_plans.mustache
@@ -67,7 +67,7 @@
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
 <form data-region="filtercompetencies" data-planid="{{plan.id}}" class="form-inline">
-    <div class="form-group">
+    <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
         <button class="btn btn-secondary">{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>

diff --git a/admin/tool/lp/templates/competency_rule_config.mustache b/admin/tool/lp/templates/competency_rule_config.mustache
@@ -58,15 +58,15 @@
 
         {{#config}}
         <div data-region="rule-base" class="form">
-            <div data-region="rule-outcome" class="form-group">
+            <div data-region="rule-outcome" class="mb-3">
                 <label>{{#str}}outcome, tool_lp{{/str}}</label>
                 <select name="outcome" class="custom-select">
                     {{#outcomes}}
                     <option value="{{code}}" {{#selected}}selected{{/selected}}>{{name}}</option>
                     {{/outcomes}}
                 </select>
             </div>
-            <div data-region="rule-type" class="form-group">
+            <div data-region="rule-type" class="mb-3">
                 <label>{{#str}}when, tool_lp{{/str}}</label>
                 <select name="rule" class="custom-select">
                     <option value="-1">{{#str}}choosedots{{/str}}</option>

diff --git a/auth/shibboleth/templates/login_form.mustache b/auth/shibboleth/templates/login_form.mustache
@@ -71,7 +71,7 @@
             <div class="row justify-content-center ml-1 mr-1 mb-1">
                 <div class="col-md-5">
                     <form action="{{loginurl}}" method="post" id="login">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="idp">{{#str}}auth_shibboleth_select_organization, auth_shibboleth{{/str}}</label>
                             <select id="idp" name="idp" class="form-control input-block-level {{^isvalid}}is-invalid{{/isvalid}}">
                                 <option value="-">{{#str}}auth_shibboleth_select_member, auth_shibboleth{{/str}}</option>

diff --git a/...ui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js b/...ui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js
@@ -26,7 +26,7 @@ M.availability_completion.form.initInner = function(cms) {
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
     var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';

diff --git a/...tion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js b/...tion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js
@@ -26,7 +26,7 @@ M.availability_completion.form.initInner = function(cms) {
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
     var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';

diff --git a/availability/condition/completion/yui/src/form/js/form.js b/availability/condition/completion/yui/src/form/js/form.js
@@ -24,7 +24,7 @@ M.availability_completion.form.initInner = function(cms) {
 M.availability_completion.form.getNode = function(json) {
     // Create HTML structure.
     var html = '<span class="col-form-label pr-3"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
-               ' <span class="availability-group form-group"><label>' +
+               ' <span class="availability-group mb-3"><label>' +
             '<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
             '<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
             '<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';

diff --git a/...on/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js b/...on/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js
@@ -37,21 +37,21 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="min"/>' +
             M.util.get_string('option_min', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_min', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="minval" title="' +
             M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span><br>' +
-            '<span class="availability-group form-group">' +
+            '<span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="max"/>' +
             M.util.get_string('option_max', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +

diff --git a/...ondition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js b/...ondition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form.js
@@ -37,21 +37,21 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="min"/>' +
             M.util.get_string('option_min', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_min', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="minval" title="' +
             M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span><br>' +
-            '<span class="availability-group form-group">' +
+            '<span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="max"/>' +
             M.util.get_string('option_max', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +

diff --git a/availability/condition/grade/yui/src/form/js/form.js b/availability/condition/grade/yui/src/form/js/form.js
@@ -35,21 +35,21 @@ M.availability_grade.form.getNode = function(json) {
     this.nodesSoFar++;
 
     // Create HTML structure.
-    var html = '<label class="form-group"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
+    var html = '<label class="mb-3"><span class="pr-3">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
             '<span class="availability-group">' +
             '<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
     for (var i = 0; i < this.grades.length; i++) {
         var grade = this.grades[i];
         // String has already been escaped using format_string.
         html += '<option value="' + grade.id + '">' + grade.name + '</option>';
     }
-    html += '</select></span></label> <br><span class="availability-group form-group">' +
+    html += '</select></span></label> <br><span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="min"/>' +
             M.util.get_string('option_min', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_min', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="minval" title="' +
             M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span><br>' +
-            '<span class="availability-group form-group">' +
+            '<span class="availability-group mb-3">' +
             '<label><input type="checkbox" class="form-check-input mx-1" name="max"/>' +
             M.util.get_string('option_max', 'availability_grade') +
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +

diff --git a/blocks/login/block_login.php b/blocks/login/block_login.php
@@ -66,12 +66,12 @@ function get_content () {
 
             $this->content->text .= "\n".'<form class="loginform" id="login" method="post" action="'.get_login_url().'">';
 
-            $this->content->text .= '<div class="form-group">';
+            $this->content->text .= '<div class="mb-3">';
             $this->content->text .= '<label for="login_username">'.$strusername.'</label>';
             $this->content->text .= '<input type="text" name="username" id="login_username" ';
             $this->content->text .= ' class="form-control" value="'.s($username).'" autocomplete="username"/></div>';
 
-            $this->content->text .= '<div class="form-group"><label for="login_password">'.get_string('password').'</label>';
+            $this->content->text .= '<div class="mb-3"><label for="login_password">'.get_string('password').'</label>';
 
             $this->content->text .= '<input type="password" name="password" id="login_password" ';
             $this->content->text .= ' class="form-control" value="" autocomplete="current-password"/>';
@@ -80,13 +80,13 @@ function get_content () {
             // ReCaptcha.
             if (login_captcha_enabled()) {
                 require_once($CFG->libdir . '/recaptchalib_v2.php');
-                $this->content->text .= '<div class="form-group">';
+                $this->content->text .= '<div class="mb-3">';
                 $this->content->text .= recaptcha_get_challenge_html(RECAPTCHA_API_URL, $CFG->recaptchapublickey,
                     current_language(), true);
                 $this->content->text .= '</div>';
             }
 
-            $this->content->text .= '<div class="form-group">';
+            $this->content->text .= '<div class="mb-3">';
             $this->content->text .= '<input type="submit" class="btn btn-primary btn-block" value="'.get_string('login').'" />';
             $this->content->text .= '</div>';
             $this->content->text .= '<input type="hidden" name="logintoken" value="'.s(\core\session\manager::get_login_token()).'" />';

diff --git a/calendar/templates/export_calendar_url.mustache b/calendar/templates/export_calendar_url.mustache
@@ -26,7 +26,7 @@
 }}
 <div class="card">
     <div class="card-body alert-info">
-        <div class="form-group">
+        <div class="mb-3">
             <label for="calendarexporturl">{{#str}}calendarexporturl, calendar{{/str}}</label>
             <div class="input-group">
                 <input type="text" id="calendarexporturl" class="form-control" value="{{calendarexporturl}}" readonly />

diff --git a/enrol/yui/rolemanager/rolemanager.js b/enrol/yui/rolemanager/rolemanager.js
@@ -366,7 +366,7 @@ YUI.add('moodle-enrol-rolemanager', function(Y) {
                                         M.util.get_string('closebuttontitle', 'moodle') + '">' +
                                         '<span aria-hidden="true">&times;</span></div>' +
                                         '<h3>'+M.util.get_string('assignroles', 'role')+'</h3>' +
-                                        '</div><div class="content popover-content form-inline form-group"></div></div>');
+                                        '</div><div class="content popover-content form-inline mb-3"></div></div>');
             var content = element.one('.content');
             var roles = m.get(ASSIGNABLEROLES);
             for (i in roles) {