Add latest changes from gitlab-org/gitlab@master

1 files changed, 19 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
index a570abae9d3..96dc2007ecf 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlForm, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui';
 import { __, n__ } from '~/locale';
 
 export default {
-  components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton, GlAlert },
+  components: { GlDisclosureDropdown, GlForm, GlFormTextarea, GlButton, GlAlert },
   props: {
     disabled: {
       type: Boolean,
@@ -44,38 +44,42 @@ export default {
     onApply() {
       this.$emit('apply', this.message);
     },
+    focusCommitMessageInput() {
+      this.$refs.commitMessage.$el.focus();
+    },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
-    :text="dropdownText"
-    :disabled="disabled"
-    size="small"
-    boundary="window"
-    right
-    lazy
-    menu-class="gl-w-full!"
+  <gl-disclosure-dropdown
     data-qa-selector="apply_suggestion_dropdown"
-    @shown="$refs.commitMessage.$el.focus()"
+    fluid-width
+    placement="right"
+    size="small"
+    :disabled="disabled"
+    :toggle-text="dropdownText"
+    @shown="focusCommitMessageInput"
   >
-    <gl-dropdown-form class="gl-px-4! gl-m-0!">
+    <gl-form class="gl-display-flex gl-flex-direction-column gl-px-4! gl-mx-0! gl-my-2!">
       <label for="commit-message">{{ __('Commit message') }}</label>
       <gl-alert v-if="errorMessage" variant="danger" :dismissible="false" class="gl-mb-4">
         {{ errorMessage }}
       </gl-alert>
+
       <gl-form-textarea
         id="commit-message"
         ref="commitMessage"
         v-model="message"
+        class="apply-suggestions-input-min-width"
         :placeholder="defaultCommitMessage"
         submit-on-enter
         data-qa-selector="commit_message_field"
         @submit="onApply"
       />
+
       <gl-button
-        class="gl-w-auto! gl-mt-3 gl-text-center! gl-transition-medium! float-right"
+        class="gl-w-auto! gl-mt-3 gl-align-self-end"
         category="primary"
         variant="confirm"
         data-qa-selector="commit_with_custom_message_button"
@@ -83,6 +87,6 @@ export default {
       >
         {{ __('Apply') }}
       </gl-button>
-    </gl-dropdown-form>
-  </gl-dropdown>
+    </gl-form>
+  </gl-disclosure-dropdown>
 </template>