Use a btn-group to group all action buttons24651-environments-list-buttons

3 files changed, 42 insertions, 39 deletions

diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index c5a714d9673..978d4dd8b6b 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -15,29 +15,29 @@ module.exports = Vue.component('actions-component', {
   },
 
   template: `
-    <div class="inline">
-      <div class="dropdown">
-        <a class="dropdown-new btn btn-default" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown">
+        <span>
           <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
           <i class="fa fa-caret-down"></i>
-        </a>
+        </span>
 
-        <ul class="dropdown-menu dropdown-menu-align-right">
-          <li v-for="action in actions">
-            <a :href="action.play_path"
-              data-method="post"
-              rel="nofollow"
-              class="js-manual-action-link">
+      <ul class="dropdown-menu dropdown-menu-align-right">
+        <li v-for="action in actions">
+          <a :href="action.play_path"
+            data-method="post"
+            rel="nofollow"
+            class="js-manual-action-link">
 
-              <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
+            <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
 
-              <span>
-                {{action.name}}
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
+            <span>
+              {{action.name}}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </button>
+  </div>
   `,
 });
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 24fd58a301a..ad9d1d21a79 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -505,39 +505,26 @@ module.exports = Vue.component('environment-item', {
 
       <td class="hidden-xs">
         <div v-if="!model.isFolder">
-          <div v-if="hasManualActions && canCreateDeployment"
-            class="inline js-manual-actions-container">
-            <actions-component
+          <div class="btn-group" role="group">
+            <actions-component v-if="hasManualActions && canCreateDeployment"
               :play-icon-svg="playIconSvg"
               :actions="manualActions">
             </actions-component>
-          </div>
 
-          <div v-if="externalURL && canReadEnvironment"
-            class="inline js-external-url-container">
-            <external-url-component
+            <external-url-component v-if="externalURL && canReadEnvironment"
               :external-url="externalURL">
             </external-url-component>
-          </div>
 
-          <div v-if="hasStopAction && canCreateDeployment"
-            class="inline js-stop-component-container">
-            <stop-component
+            <stop-component v-if="hasStopAction && canCreateDeployment"
               :stop-url="model.stop_path">
             </stop-component>
-          </div>
 
-          <div v-if="model && model.terminal_path"
-            class="inline js-terminal-button-container">
-            <terminal-button-component
+            <terminal-button-component v-if="model && model.terminal_path"
               :terminal-icon-svg="terminalIconSvg"
               :terminal-path="model.terminal_path">
             </terminal-button-component>
-          </div>
 
-          <div v-if="canRetry && canCreateDeployment"
-            class="inline js-rollback-component-container">
-            <rollback-component
+            <rollback-component v-if="canRetry && canCreateDeployment"
               :is-last-deployment="isLastDeployment"
               :retry-url="retryUrl">
               </rollback-component>
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 181dcb7721f..f789ae1ccd3 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -35,7 +35,6 @@
     display: table-cell;
   }
 
-  .environments-name,
   .environments-commit,
   .environments-actions {
     width: 20%;
@@ -45,6 +44,7 @@
     width: 10%;
   }
 
+  .environments-name,
   .environments-deploy,
   .environments-build {
     width: 15%;
@@ -62,6 +62,22 @@
     }
   }
 
+  .btn-group {
+
+    > a {
+      color: $gl-text-color-secondary;
+    }
+
+    svg path {
+      fill: $gl-text-color-secondary;
+    }
+
+    .dropdown {
+      outline: none;
+    }
+  }
+
+
   .commit-title {
     margin: 0;
   }