refactor(ui): Suggestion from modal to dropdown

Author: Guillaume Chau

packages/@vue/cli-ui/locales/en.json

@@ -353,11 +353,11 @@
     "suggestions": {
       "vue-router-add": {
         "label": "Add vue-router",
-        "message": "Add support for multiple pages into the app."
+        "message": "Official library to support multiple virtual pages in a Single-Page App. Each route renders a different component."
       },
       "vuex-add": {
         "label": "Add vuex",
-        "message": "Centralized State Management solution for large-scale apps."
+        "message": "Official centralized State Management solution for large-scale apps. Very useful if multiple components need to access the same data."
       },
       "progress": "Installing {arg0}..."
     }

packages/@vue/cli-ui/src/components/SuggestionBar.vue

@@ -27,78 +27,66 @@
     />
 
     <template slot-scope="{ result: { data } }" v-if="data">
-      <VueButton
+      <VueDropdown
         v-for="suggestion of data.suggestions"
         :key="suggestion.id"
-        :label="$t(suggestion.label)"
-        :loading="suggestion.busy"
-        class="suggestion round"
-        v-tooltip="$t('components.suggestion-bar.suggestion')"
-        @click="select(suggestion)"
-      />
-    </template>
-
-    <VueModal
-      v-if="showDetails"
-      :title="$t(currentSuggestion.label)"
-      class="medium"
-      @close="showDetails = false"
-    >
-      <div class="default-body">
-        <div
-          v-if="currentSuggestion.message"
-          class="info message"
-          v-html="$t(currentSuggestion.message)"
-        />
-        <div
-          v-if="currentSuggestion.link"
-          class="info links"
-        >
-          <a :href="currentSuggestion.link" target="_blank">
-            {{ $t('components.list-item-info.more-info') }}
-          </a>
-        </div>
-      </div>
-
-      <div slot="footer" class="actions">
+        :disabled="!suggestion.message && !suggestion.link"
+        class="suggestion"
+        placement="bottom-end"
+      >
         <VueButton
-          class="big"
-          :label="$t('components.suggestion-bar.modal.cancel')"
-          icon="close"
-          @click="showDetails = false"
+          slot="trigger"
+          :label="$t(suggestion.label)"
+          :loading="suggestion.busy"
+          class="round"
+          v-tooltip="$t('components.suggestion-bar.suggestion')"
+          @click="if (!suggestion.message && !suggestion.link) activate(suggestion)"
         />
-        <VueButton
-          class="primary big"
-          :label="$t('components.suggestion-bar.modal.continue')"
-          icon="done"
-          @click="activate(currentSuggestion)"
-        />
-      </div>
-    </VueModal>
+
+        <div class="suggestion-details">
+          <div class="info label">
+            {{ $t(suggestion.label) }}
+          </div>
+
+          <div
+            v-if="suggestion.message"
+            class="info message"
+            v-html="$t(suggestion.message)"
+          />
+
+          <div class="actions-bar">
+            <VueButton
+              :href="suggestion.link"
+              :label="$t('components.list-item-info.more-info')"
+              target="_blank"
+              class="flat"
+              icon-right="open_in_new"
+            />
+            <div class="vue-ui-spacer"/>
+            <VueButton
+              :label="$t('components.suggestion-bar.modal.cancel')"
+              icon-left="close"
+              v-close-popover
+            />
+            <VueButton
+              class="primary"
+              :label="$t('components.suggestion-bar.modal.continue')"
+              icon-left="done"
+              v-close-popover
+              @click="activate(suggestion)"
+            />
+          </div>
+        </div>
+      </VueDropdown>
+    </template>
   </ApolloQuery>
 </template>
 
 <script>
 import SUGGESTION_ACTIVATE from '../graphql/suggestionActivate.gql'
 
 export default {
-  data () {
-    return {
-      currentSuggestion: null,
-      showDetails: false
-    }
-  },
-
   methods: {
-    select (suggestion) {
-      if (suggestion.message || suggestion.link) {
-        this.currentSuggestion = suggestion
-        this.showDetails = true
-      } else {
-        this.activate(suggestion)
-      }
-    },
-
     async activate (suggestion) {
       this.showDetails = false
       await this.$apollo.mutate({
@@ -121,7 +109,19 @@ export default {
   &:not(:first-child)
     margin-left $padding-item
 
-.info
-  &:not(:last-child)
-    margin-bottom $padding-item
+.suggestion-details
+  padding ($padding-item * 2 - 8px) ($padding-item * 2)
+  box-sizing border-box
+  width 440px
+
+  .label
+    font-size 20px
+
+  .actions-bar
+    padding 0
+    margin-top ($padding-item * 3)
+
+  .info
+    &:not(:last-child)
+      margin-bottom $padding-item
 </style>

packages/@vue/cli-ui/src/style/main.styl

@@ -32,6 +32,10 @@ h2
     justify-content flex-start
   &.end
     justify-content flex-end
+  &.fill
+    > *
+      flex auto 1 1
+      width 0
 
 .cta-text
   margin $padding-item