Merge branch '59854-fix-forms-stylint-issues' into 'master'

Fix style-lint errors and warnings for `app/assets/stylesheets/framework/forms.scss`

Closes #59854

See merge request gitlab-org/gitlab-ce!28129

3 files changed, 61 insertions, 106 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 9e5c3db70fb..2a601afff53 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -47,14 +47,6 @@ label {
   margin: 0;
 }
 
-.form-label {
-  @extend label;
-}
-
-.form-control-label {
-  @extend .col-md-2;
-}
-
 .inline-input-group {
   width: 250px;
 }
@@ -87,44 +79,14 @@ label {
   margin-left: 0;
   margin-right: 0;
 
-  .form-control-label {
-    font-weight: $gl-font-weight-bold;
-    padding-top: 4px;
-  }
-
   .form-control {
     height: 29px;
     background: $white-light;
     font-family: $monospace-font;
   }
 
-  .input-group-prepend .btn,
-  .input-group-append .btn {
-    padding: 3px $gl-btn-padding;
-    background-color: $gray-light;
-    border: 1px solid $border-color;
-  }
-
-  .text-block {
-    line-height: 0.8;
-    padding-top: 9px;
-
-    code {
-      line-height: 1.8;
-    }
-
-    img {
-      margin-right: $gl-padding;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     padding: 0 $gl-padding;
-
-    .form-control-label,
-    .text-block {
-      padding-left: 0;
-    }
   }
 }
 
@@ -146,19 +108,6 @@ label {
   }
 }
 
-.select-wrapper {
-  position: relative;
-
-  .fa-chevron-down {
-    position: absolute;
-    font-size: 10px;
-    right: 10px;
-    top: 12px;
-    color: $gray-darkest;
-    pointer-events: none;
-  }
-}
-
 .select-control {
   padding-left: 10px;
   padding-right: 10px;
@@ -181,12 +130,6 @@ label {
   margin-top: 35px;
 }
 
-.form-group .form-control-label,
-.form-group .form-control-label-full-width {
-  font-weight: $gl-font-weight-normal;
-}
-
-
 .form-control::placeholder {
   color: $gl-text-color-tertiary;
 }
@@ -230,7 +173,8 @@ label {
     border: 1px solid $green-600;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
+      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset,
+        0 0 4px 0 $green-600;
       border: 0 none;
     }
   }
@@ -239,7 +183,8 @@ label {
     border: 1px solid $red-500;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
+      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset,
+        0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }
@@ -265,16 +210,26 @@ label {
   }
 }
 
-.input-icon-wrapper {
+.input-icon-wrapper,
+.select-wrapper {
   position: relative;
+}
 
-  .input-icon-right {
-    position: absolute;
-    right: 0.8em;
-    top: 50%;
-    transform: translateY(-50%);
-    color: $gray-600;
-  }
+.select-wrapper > .fa-chevron-down {
+  position: absolute;
+  font-size: 10px;
+  right: 10px;
+  top: 12px;
+  color: $gray-darkest;
+  pointer-events: none;
+}
+
+.input-icon-wrapper > .input-icon-right {
+  position: absolute;
+  right: 0.8em;
+  top: 50%;
+  transform: translateY(-50%);
+  color: $gray-600;
 }
 
 .input-md {
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 9409418bbcc..82c1d57c97e 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -18,22 +18,22 @@
 
 .help-form
   .form-group
-    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :display_name, 'Display name', class: 'col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#display_name', class: 'input-group-text')
 
   .form-group
-    = label_tag :description, 'Description', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :description, 'Description', class: 'col-12 col-form-label  label-bold'
+    .col-12.input-group
       = text_field_tag :description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#description', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.text-block
+    = label_tag nil, 'Command trigger word', class: 'col-12 col-form-label label-bold'
+    .col-12
       %p Fill in the word that works best for your team.
       %p
         Suggestions:
@@ -42,44 +42,44 @@
         %code= @project.full_path
 
   .form-group
-    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :request_url, 'Request URL', class: 'col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#request_url', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Request method', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.text-block POST
+    = label_tag nil, 'Request method', class: 'col-12 col-form-label label-bold'
+    .col-12 POST
 
   .form-group
-    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :response_username, 'Response username', class: 'col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :response_username, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#response_username', class: 'input-group-text')
 
   .form-group
-    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :response_icon, 'Response icon', class: 'col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#response_icon', class: 'input-group-text')
 
   .form-group
-    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.text-block Yes
+    = label_tag nil, 'Autocomplete', class: 'col-12 col-form-label label-bold'
+    .col-12 Yes
 
   .form-group
-    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-12 col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :autocomplete_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#autocomplete_hint', class: 'input-group-text')
 
   .form-group
-    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
-    .col-sm-10.col-12.input-group
+    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-12 col-form-label label-bold'
+    .col-12.input-group
       = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index 9a7004f89c0..9b7732abc62 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -27,8 +27,8 @@
 
       .help-form
         .form-group
-          = label_tag nil, 'Command', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.text-block
+          = label_tag nil, 'Command', class: 'col-12 col-form-label label-bold'
+          .col-12
             %p Fill in the word that works best for your team.
             %p
               Suggestions:
@@ -37,50 +37,50 @@
               %code= @project.full_path
 
         .form-group
-          = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.input-group
+          = label_tag :url, 'URL', class: 'col-12 col-form-label label-bold'
+          .col-12.input-group
             = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
               = clipboard_button(target: '#url', class: 'input-group-text')
 
         .form-group
-          = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.text-block POST
+          = label_tag nil, 'Method', class: 'col-12 col-form-label label-bold'
+          .col-12 POST
 
         .form-group
-          = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.input-group
+          = label_tag :customize_name, 'Customize name', class: 'col-12 col-form-label label-bold'
+          .col-12.input-group
             = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
               = clipboard_button(target: '#customize_name', class: 'input-group-text')
 
         .form-group
-          = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.text-block
-            = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
+          = label_tag nil, 'Customize icon', class: 'col-12 col-form-label label-bold'
+          .col-12
+            = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36, class: 'mr-3')
             = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
 
         .form-group
-          = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.text-block Show this command in the autocomplete list
+          = label_tag nil, 'Autocomplete', class: 'col-12 col-form-label label-bold'
+          .col-12 Show this command in the autocomplete list
 
         .form-group
-          = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.input-group
+          = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-12 col-form-label label-bold'
+          .col-12.input-group
             = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
               = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
 
         .form-group
-          = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.input-group
+          = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-12 col-form-label label-bold'
+          .col-12.input-group
             = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
               = clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text')
 
         .form-group
-          = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label'
-          .col-sm-10.col-12.input-group
+          = label_tag :descriptive_label, 'Descriptive label', class: 'col-12 col-form-label label-bold'
+          .col-12.input-group
             = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly'
             .input-group-append
               = clipboard_button(target: '#descriptive_label', class: 'input-group-text')