Properly labelling fields on Search page

Adding proper <label>s while removing labels from the fields themselves.
This gives more space for the field's content

6 files changed, 54 insertions, 19 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index dbf600df9d6..a42e0dcbd5c 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -189,6 +189,7 @@ input[type='checkbox']:hover {
 .search-holder {
   @include media-breakpoint-up(sm) {
     display: flex;
+    align-items: flex-end;
   }
 
   .search-field-holder,
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index c8b6a3258ab..6495eaedee7 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -3,9 +3,10 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Group:'), group_id: params[:group_id] } }
+  %label{ for: "dashboard_search_group" }
+    = _("Group")
+  %button.form-control.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
-      = _("Group:")
       - if @group.present?
         = @group.name
       - else
@@ -18,9 +19,10 @@
     = dropdown_loading
 
 .dropdown.project-filter
-  %button.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Project:') } }
+  %label{ for: "dashboard_search_project" }
+    = _("Project")
+  %button.form-control.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
     %span.dropdown-toggle-text
-      = _("Project:")
       - if @project.present?
         = @project.full_name
       - else
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index db0dcc8adfb..46756390538 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -3,14 +3,18 @@
   = hidden_field_tag :scope, params[:scope]
 
   .search-holder
-    .search-field-holder
-      = search_field_tag :search, params[:search], placeholder: _("Search for projects, issues, etc."), class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
-      = icon("search", class: "search-icon")
-      %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
-        = icon("times-circle")
-        %span.sr-only
-          = _("Clear search")
+    .search-field-holder.form-group
+      %label{ for: "dashboard_search" }
+        = _("What are you searching for?")
+      .position-relative
+        = search_field_tag :search, params[:search], placeholder: _("Search for projects, issues, etc."), class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
+        = icon("search", class: "search-icon")
+        %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
+          = icon("times-circle")
+          %span.sr-only
+            = _("Clear search")
     - unless params[:snippets].eql? 'true'
       = render 'filter'
-    = button_tag _("Search"), class: "btn btn-success btn-search"
-    = render_if_exists 'search/form_elasticsearch'
+    .d-flex-center.flex-column.flex-lg-row
+      = button_tag _("Search"), class: "btn btn-success btn-search form-control"
+      = render_if_exists 'search/form_elasticsearch'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 86317dd887f..022d1745a1b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5260,9 +5260,6 @@ msgstr ""
 msgid "Group was successfully updated."
 msgstr ""
 
-msgid "Group:"
-msgstr ""
-
 msgid "Group: %{group_name}"
 msgstr ""
 
@@ -8486,9 +8483,6 @@ msgstr ""
 msgid "Project visibility level will be changed to match namespace rules when transferring to a group."
 msgstr ""
 
-msgid "Project:"
-msgstr ""
-
 msgid "ProjectActivityRSS|Subscribe"
 msgstr ""
 
@@ -12437,6 +12431,9 @@ msgstr ""
 msgid "Welcome to your Issue Board!"
 msgstr ""
 
+msgid "What are you searching for?"
+msgstr ""
+
 msgid "When a runner is locked, it cannot be assigned to other projects"
 msgstr ""
 
diff --git a/spec/views/search/_filter.html.haml_spec.rb b/spec/views/search/_filter.html.haml_spec.rb
new file mode 100644
index 00000000000..d2cd636f8c6
--- /dev/null
+++ b/spec/views/search/_filter.html.haml_spec.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'search/_filter' do
+  context 'when the search page is opened' do
+    it 'displays the correct elements' do
+      render
+
+      expect(rendered).to have_selector('label[for="dashboard_search_group"]')
+      expect(rendered).to have_selector('button#dashboard_search_group')
+
+      expect(rendered).to have_selector('label[for="dashboard_search_project"]')
+      expect(rendered).to have_selector('button#dashboard_search_project')
+    end
+  end
+end
diff --git a/spec/views/search/_form.html.haml_spec.rb b/spec/views/search/_form.html.haml_spec.rb
new file mode 100644
index 00000000000..69f40895d86
--- /dev/null
+++ b/spec/views/search/_form.html.haml_spec.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'search/_form' do
+  context 'when the search page is opened' do
+    it 'displays the correct elements' do
+      render
+
+      expect(rendered).to have_selector('.search-field-holder.form-group')
+      expect(rendered).to have_selector('label[for="dashboard_search"]')
+    end
+  end
+end