Merge branch '976-fix-search-styling-in-dropdown-gitlab-ui-integration-test' into 'master'

Upgrade @gitlab/ui to v21.30.1 See merge request gitlab-org/gitlab!44781

Merge branch '976-fix-search-styling-in-dropdown-gitlab-ui-integration-test' into 'master'
Upgrade @gitlab/ui to v21.30.1 See merge request gitlab-org/gitlab!44781
d1eb3b42 · Nicolò Maria Mezzopera · 1f6aef6b · a8e3e771 · d1eb3b42 · d1eb3b42
Commit d1eb3b42 authored Oct 15, 2020 by Nicolò Maria Mezzopera
26 changed files
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
@@ -229,11 +229,7 @@ export default {
          <p class="gl-new-dropdown-header-top">
            {{ __('Assign To') }}
          </p>
-          <gl-search-box-by-type
+          <gl-search-box-by-type v-model.trim="search" :placeholder="__('Search users')" />
-            v-model.trim="search"
-            class="m-2"
-            :placeholder="__('Search users')"
-          />
          <div class="dropdown-content dropdown-body">
            <template v-if="userListValid">
              <gl-dropdown-item

--- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
@@ -60,7 +60,7 @@ export default {
 </script>
 <template>
  <gl-dropdown :text="value">
-    <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
+    <gl-search-box-by-type v-model.trim="searchTerm" />
    <gl-dropdown-item
      v-for="environment in filteredResults"
      :key="environment"

--- a/app/assets/javascripts/clusters/components/knative_domain_editor.vue
+++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
@@ -130,7 +130,6 @@ export default {
        <gl-search-box-by-type
          v-model.trim="searchQuery"
          :placeholder="s__('ClusterIntegration|Search domains')"
-          class="gl-m-3"
        />
        <gl-dropdown-item
          v-for="domain in filteredDomains"

--- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
+++ b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
@@ -80,7 +80,6 @@ export default {
    <gl-search-box-by-type
      ref="searchBox"
      v-model.trim="environmentSearch"
-      class="gl-m-3"
      @focus="fetchEnvironments"
      @keyup="fetchEnvironments"
    />

--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue
@@ -301,7 +301,7 @@ export default {
            "
            @hide="resetDropdown"
          >
-            <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
+            <gl-search-box-by-type v-model.trim="searchTerm" />
            <gl-loading-icon v-if="isFetching" />

--- a/app/assets/javascripts/milestones/project_milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/project_milestone_combobox.vue
@@ -205,7 +205,6 @@ export default {
    <gl-search-box-by-type
      ref="searchBox"
      v-model.trim="searchQuery"
-      class="gl-m-3"
      :placeholder="this.$options.translations.searchMilestones"
      @input="onSearchBoxInput"
      @keydown.enter.prevent="onSearchBoxEnter"

--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -192,7 +192,7 @@ export default {
      >
        <div class="d-flex flex-column overflow-hidden">
          <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
-          <gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" />
+          <gl-search-box-by-type @input="debouncedEnvironmentsSearch" />
          <gl-loading-icon v-if="environmentsLoading" :inline="true" />
          <div v-else class="flex-fill overflow-auto">

--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -80,11 +80,7 @@ export default {
  >
    <div class="d-flex flex-column overflow-hidden">
      <gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header>
-      <gl-search-box-by-type
+      <gl-search-box-by-type ref="monitorDashboardsDropdownSearch" v-model="searchTerm" />
-        ref="monitorDashboardsDropdownSearch"
-        v-model="searchTerm"
-        class="gl-m-3"
-      />
      <div class="flex-fill overflow-auto">
        <gl-dropdown-item

--- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
+++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
@@ -237,7 +237,6 @@ export default {
        <gl-search-box-by-type
          v-model.trim="searchTerm"
          :placeholder="__('Search branches and tags')"
-          class="gl-p-2"
        />
        <gl-dropdown-item
          v-for="(ref, index) in filteredRefs"

--- a/app/assets/javascripts/projects/commits/components/author_select.vue
+++ b/app/assets/javascripts/projects/commits/components/author_select.vue
@@ -119,7 +119,6 @@ export default {
      <gl-dropdown-divider />
      <gl-search-box-by-type
        v-model.trim="authorInput"
-        class="gl-m-3"
        :placeholder="__('Search')"
        @input="searchAuthors"
      />

--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -139,7 +139,6 @@ export default {
      <gl-search-box-by-type
        ref="searchBox"
        v-model.trim="query"
-        class="gl-m-3"
        :placeholder="i18n.searchPlaceholder"
        @input="onSearchBoxInput"
        @keydown.enter.prevent="onSearchBoxEnter"

--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -72,12 +72,7 @@ export default {
        css-class="deploy-link js-deploy-url inline"
      />
      <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown">
-        <gl-search-box-by-type
+        <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
-          v-model.trim="searchTerm"
-          v-autofocusonshow
-          autofocus
-          class="gl-m-3"
-        />
        <gl-dropdown-item
          v-for="change in filteredChanges"
          :key="change.path"

--- a/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
@@ -82,7 +82,7 @@ export default {
      <gl-icon name="chevron-down" />
    </template>
-    <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus class="gl-m-3" />
+    <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
    <gl-deprecated-dropdown-item
      v-for="timezone in filteredResults"
      :key="timezone.formattedTimezone"

--- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue
@@ -149,7 +149,7 @@ export default {
        <gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
      </slot>
      <div class="mb-3 px-3">
-        <gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" />
+        <gl-search-box-by-type v-model.trim="searchTerm" />
      </div>
      <div class="mb-3 px-3">
        <gl-dropdown-item

--- a/ee/app/assets/javascripts/analytics/repository_analytics/components/select_projects_dropdown.vue
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/select_projects_dropdown.vue
@@ -135,7 +135,7 @@ export default {
    <gl-dropdown-section-header>
      {{ $options.text.projectDropdownHeader }}
    </gl-dropdown-section-header>
-    <gl-search-box-by-type v-model.trim="projectSearchTerm" class="gl-my-2 gl-mx-3" />
+    <gl-search-box-by-type v-model.trim="projectSearchTerm" />
    <gl-dropdown-item
      :is-check-item="true"
      :is-checked="selectAllProjects"

--- a/ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue
+++ b/ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue
@@ -134,7 +134,7 @@ export default {
      <gl-icon class="gl-ml-2" name="chevron-down" />
    </template>
    <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
-    <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
+    <gl-search-box-by-type v-model.trim="searchTerm" />
    <gl-dropdown-item
      v-for="group in availableGroups"
      :key="group.id"

--- a/ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
+++ b/ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
@@ -182,7 +182,7 @@ export default {
      <gl-icon class="gl-ml-2" name="chevron-down" />
    </template>
    <gl-dropdown-section-header>{{ __('Projects') }}</gl-dropdown-section-header>
-    <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
+    <gl-search-box-by-type v-model.trim="searchTerm" />
    <gl-dropdown-item
      v-for="project in availableProjects"

--- a/ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue
+++ b/ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue
@@ -48,7 +48,7 @@ export default {
 <template>
  <gl-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
-    <gl-search-box-by-type class=".gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
+    <gl-search-box-by-type :debounce="500" @input="fetchSyncNamespaces" />
    <button
      v-for="namespace in synchronizationNamespaces"
      :key="namespace.id"

--- a/ee/app/assets/javascripts/security_dashboard/components/filter.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
@@ -90,7 +90,6 @@ export default {
        v-if="filter.options.length >= 20"
        ref="searchBox"
        v-model="filterTerm"
-        class="gl-m-3"
        :placeholder="__('Filter...')"
      />

--- a/ee/app/assets/javascripts/sidebar/components/iteration_select.vue
+++ b/ee/app/assets/javascripts/sidebar/components/iteration_select.vue
@@ -198,7 +198,7 @@ export default {
      <gl-dropdown-section-header class="d-flex justify-content-center">{{
        __('Assign Iteration')
      }}</gl-dropdown-section-header>
-      <gl-search-box-by-type ref="search" v-model="searchTerm" class="gl-m-3" />
+      <gl-search-box-by-type ref="search" v-model="searchTerm" />
      <gl-dropdown-item
        v-for="iterationItem in iterations"
        :key="iterationItem.id"

--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue
@@ -214,7 +214,7 @@ export default {
          data-track-label="review_app"
          @click="ok"
        >
-          <gl-search-box-by-type v-model.trim="changesSearchTerm" class="gl-m-3" />
+          <gl-search-box-by-type v-model.trim="changesSearchTerm" />
          <template #button-content>
            {{ s__('VisualReviewApp|Open review app') }}
            <gl-icon class="fgray" name="external-link" />

--- a/ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/labels_selector_spec.js.snap
+++ b/ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/labels_selector_spec.js.snap
@@ -4,7 +4,7 @@ exports[`Value Stream Analytics LabelsSelector with no item selected will render
 "<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
  <gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-stub>
  <div class=\\"mb-3 px-3\\">
-    <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
+    <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\"></gl-search-box-by-type-stub>
  </div>
  <div class=\\"mb-3 px-3\\">
    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
@@ -33,7 +33,7 @@ exports[`Value Stream Analytics LabelsSelector with selectedLabelId set will ren
 "<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
  <gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-stub>
  <div class=\\"mb-3 px-3\\">
-    <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
+    <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\"></gl-search-box-by-type-stub>
  </div>
  <div class=\\"mb-3 px-3\\">
    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">

--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
    "@babel/preset-env": "^7.10.1",
    "@gitlab/at.js": "1.5.5",
    "@gitlab/svgs": "1.171.0",
-    "@gitlab/ui": "21.29.0",
+    "@gitlab/ui": "21.30.1",
    "@gitlab/visual-review-tools": "1.6.1",
    "@rails/actioncable": "^6.0.3-3",
    "@rails/ujs": "^6.0.3-2",

--- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
+++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
@@ -114,7 +114,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
            <!---->
            <div
-              class="gl-search-box-by-type gl-m-3"
+              class="gl-search-box-by-type"
            >
              <svg
                class="gl-search-box-by-type-search-icon gl-icon s16"
@@ -225,7 +225,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
            <!---->
            <div
-              class="gl-search-box-by-type gl-m-3"
+              class="gl-search-box-by-type"
            >
              <svg
                class="gl-search-box-by-type-search-icon gl-icon s16"

--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -52,7 +52,6 @@ exports[`Dashboard template matches the default snapshot 1`] = `
          </gl-dropdown-section-header-stub>
          <gl-search-box-by-type-stub
-            class="gl-m-3"
            clearbuttontitle="Clear"
            value=""
          />

--- a/yarn.lock
+++ b/yarn.lock
@@ -866,10 +866,10 @@
  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.171.0.tgz#abc3092bf804f0898301626130e0f3231834924a"
  integrity sha512-TPfdqIxQDda+0CQHhb9XdF50lmqDmADu6yT8R4oZi6BoUtWLdiHbyFt+RnVU6t7EmjIKicNAii7Ga+f2ljCfUA==
-"@gitlab/ui@21.29.0":
+"@gitlab/ui@21.30.1":
-  version "21.29.0"
+  version "21.30.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-21.29.0.tgz#598ac5265aa39db4f63a1c7801df322c1234eaa2"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-21.30.1.tgz#561bd10c5264e48d16be4c5706827f40ec31286f"
-  integrity sha512-sGsL1YmKUJAUEVAKwq+9Km2qOpiTf+We7o7az8fBcN+PKaGWfPhEXLskCwToky7mwuKBBTpwX2qdf+7lk/iu7A==
+  integrity sha512-JdLA8x7fOk1qgsqBeNhlmg1VTJIrl+ECWea8whoyqWnI95GPuiM5ZSnehZHA6FoNwB9n/u1GnVSLCHcqvHZW0w==
  dependencies:
    "@babel/standalone" "^7.0.0"
    "@gitlab/vue-toasted" "^1.3.0"