Merge branch '273274-update-issue-buttons' into 'master'

Update buttons on issue page

See merge request gitlab-org/gitlab!56425

app/assets/javascripts/design_management/components/delete_button.vue

@@ -63,7 +63,7 @@ export default {
     title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
     actionPrimary: {
       text: s__('DesignManagement|Archive designs'),
-      attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' },
+      attributes: { variant: 'confirm', 'data-qa-selector': 'confirm_archiving_button' },
     },
     actionCancel: {
       text: __('Cancel'),

app/assets/javascripts/design_management/components/upload/button.vue

@@ -38,7 +38,8 @@ export default {
       "
       :disabled="isSaving"
       :loading="isSaving"
-      variant="default"
+      category="secondary"
+      variant="confirm"
       size="small"
       @click="openFileUpload"
     >

app/assets/javascripts/design_management/pages/index.vue

@@ -379,8 +379,7 @@ export default {
             <delete-button
               v-if="isLatestVersion"
               :is-deleting="loading"
-              button-variant="warning"
-              button-category="secondary"
+              button-variant="default"
               button-class="gl-mr-3"
               button-size="small"
               data-qa-selector="archive_button"

app/assets/javascripts/issue_show/components/header_actions.vue

 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlLink, GlModal } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
@@ -17,7 +17,6 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlIcon,
     GlLink,
     GlModal,
   },
@@ -88,9 +87,6 @@ export default {
     qaSelector() {
       return this.isClosed ? 'reopen_issue_button' : 'close_issue_button';
     },
-    buttonVariant() {
-      return this.isClosed ? 'default' : 'warning';
-    },
     dropdownText() {
       return sprintf(__('%{issueType} actions'), {
         issueType: capitalizeFirstCharacter(this.issueType),
@@ -192,9 +188,9 @@ export default {
 </script>
 
 <template>
-  <div class="detail-page-header-actions">
+  <div class="detail-page-header-actions gl-display-flex">
     <gl-dropdown
-      class="gl-display-block gl-sm-display-none!"
+      class="gl-sm-display-none! w-100"
       block
       :text="dropdownText"
       :loading="isToggleStateButtonLoading"
@@ -227,23 +223,20 @@ export default {
       category="secondary"
       :data-qa-selector="qaSelector"
       :loading="isToggleStateButtonLoading"
-      :variant="buttonVariant"
       @click="toggleIssueState"
     >
       {{ buttonText }}
     </gl-button>
 
     <gl-dropdown
-      class="gl-display-none gl-sm-display-inline-flex!"
-      toggle-class="gl-border-0! gl-shadow-none!"
+      class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
+      icon="ellipsis_v"
+      category="tertiary"
+      :text="dropdownText"
+      :text-sr-only="true"
       no-caret
       right
     >
-      <template #button-content>
-        <gl-icon name="ellipsis_v" />
-        <span class="gl-sr-only">{{ dropdownText }}</span>
-      </template>
-
       <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath">
         {{ newIssueTypeText }}
       </gl-dropdown-item>

app/views/projects/issues/_new_branch.html.haml

@@ -11,18 +11,18 @@
   - refs_path = refs_namespace_project_path(@project.namespace, @project, search: '')
 
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
-    .btn-group.btn-group-sm.unavailable
-      %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
-        .spinner.align-text-bottom.mr-1.hide
+    .btn-group.unavailable
+      %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
+        .spinner.align-text-bottom.gl-button-icon.hide
         %span.text
           Checking branch availability…
 
-    .btn-group.btn-group-sm.available.hidden
-      %button.gl-button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
+    .btn-group.available.hidden
+      %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
         .spinner.js-spinner.gl-mr-2.gl-display-none
         = value
 
-      %button.btn.gl-button.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle.gl-flex-grow-0.gl-h-7{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
+      %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
         = sprite_icon('chevron-down')
 
       .droplab-dropdown

app/views/shared/issue_type/_details_header.html.haml

@@ -13,7 +13,7 @@
       #js-issuable-header-warnings
       = issuable_meta(issuable, @project)
 
-    %a.btn.gl-button.btn-default.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.btn.gl-button.btn-default.btn-icon.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = sprite_icon('chevron-double-lg-left')
 
   .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user) }

changelogs/unreleased/273274-update-issue-buttons.yml

+---
+title: Update buttons on issue page
+merge_request: 56425
+author:
+type: changed

spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -6,11 +6,11 @@ exports[`Design management upload button component renders inverted upload desig
 >
   <gl-button-stub
     buttontextclasses=""
-    category="primary"
+    category="secondary"
     icon=""
     size="small"
     title="Adding a design with the same filename replaces the file in a new version."
-    variant="default"
+    variant="confirm"
   >
     
     Upload designs
@@ -31,11 +31,11 @@ exports[`Design management upload button component renders upload design button
 <div>
   <gl-button-stub
     buttontextclasses=""
-    category="primary"
+    category="secondary"
     icon=""
     size="small"
     title="Adding a design with the same filename replaces the file in a new version."
-    variant="default"
+    variant="confirm"
   >
     
     Upload designs