Merge pull request #7164 from systeminit/wendy/eng-3204-kill-vbutton-once-and-for-all

no more VButton, unified NewButton component

Author: wendybujalski

app/web/src/newhotness/AddViewModal.vue

@@ -36,23 +36,12 @@
     </form>
 
     <div class="flex gap-sm mt-sm">
-      <VButton
-        label="Cancel"
-        tone="shade"
-        variant="ghost"
-        @click="() => modalRef?.close()"
-      />
-      <VButton
-        :class="
-          clsx(
-            'flex-grow !text-sm !border !cursor-pointer !px-xs',
-            themeClasses(
-              '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-              '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-            ),
-          )
-        "
+      <NewButton label="Cancel" @click="() => modalRef?.close()" />
+      <NewButton
+        class="flex-grow"
+        icon="plus"
         label="Create"
+        tone="action"
         :loading="wForm.bifrosting.value"
         :disabled="wForm.bifrosting.value"
         @click="() => nameForm.handleSubmit()"
@@ -62,7 +51,12 @@
 </template>
 
 <script setup lang="ts">
-import { Modal, Icon, VButton, themeClasses } from "@si/vue-lib/design-system";
+import {
+  Modal,
+  Icon,
+  NewButton,
+  themeClasses,
+} from "@si/vue-lib/design-system";
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import clsx from "clsx";

app/web/src/newhotness/ApplyChangeSetButton.vue

@@ -1,18 +1,10 @@
 <template>
   <section v-if="!ctx.onHead.value">
-    <VButton
+    <NewButton
       ref="applyButtonRef"
-      size="sm"
+      tone="action"
       label="Apply Change Set"
-      :class="
-        clsx(
-          'ml-2xs mr-xs !text-sm !border !cursor-pointer !px-xs',
-          themeClasses(
-            '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-            '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-          ),
-        )
-      "
+      class="ml-2xs mr-xs"
       loadingText="Applying Changes"
       :loading="applyInFlight"
       @click="openApplyChangeSetModal"
@@ -25,7 +17,7 @@
           class="border border-action-200 ml-2xs py-2xs"
         />
       </template>
-    </VButton>
+    </NewButton>
     <ApplyChangeSetModal
       ref="applyChangeSetModalRef"
       votingKind="merge"
@@ -37,8 +29,7 @@
 <script lang="ts" setup>
 import { computed, ref, watchEffect, nextTick } from "vue";
 import * as _ from "lodash-es";
-import { VButton, PillCounter, themeClasses } from "@si/vue-lib/design-system";
-import clsx from "clsx";
+import { PillCounter, NewButton } from "@si/vue-lib/design-system";
 import { useQuery } from "@tanstack/vue-query";
 import { useRoute, useRouter } from "vue-router";
 import {

app/web/src/newhotness/ApplyChangeSetModal.vue

@@ -70,39 +70,20 @@
           v-else
           class="flex flex-row w-full items-center justify-center gap-sm mt-xs"
         >
-          <VButton
-            label="Cancel"
-            tone="neutral"
-            pill="Esc"
-            @click="closeModalHandler"
-          />
-          <VButton
+          <NewButton label="Cancel" pill="Esc" @click="closeModalHandler" />
+          <NewButton
             v-if="approvalsEnabled"
             label="Request Approval"
-            :class="
-              clsx(
-                'grow !text-sm !border !cursor-pointer !px-xs',
-                themeClasses(
-                  '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-                  '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-                ),
-              )
-            "
+            tone="action"
+            class="grow"
             pill="Cmd + Enter"
             @click="debouncedRequestApproval"
           />
-          <VButton
+          <NewButton
             v-else
             label="Apply Change Set"
-            :class="
-              clsx(
-                'grow !text-sm !border !cursor-pointer !px-xs',
-                themeClasses(
-                  '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-                  '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-                ),
-              )
-            "
+            tone="action"
+            class="grow"
             loadingText="Applying Changes"
             :loading="applyInFlight"
             :disabled="!allowedToApplyWithApprovalsDisabled"
@@ -117,13 +98,7 @@
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
-import {
-  PillCounter,
-  Icon,
-  VButton,
-  Modal,
-  themeClasses,
-} from "@si/vue-lib/design-system";
+import { PillCounter, Icon, NewButton, Modal } from "@si/vue-lib/design-system";
 import clsx from "clsx";
 import { useRouter, useRoute } from "vue-router";
 import { computed, onBeforeUnmount, inject, onMounted, ref, watch } from "vue";

app/web/src/newhotness/ApprovalFlow.vue

@@ -139,17 +139,16 @@
 
     <!-- BUTTONS -->
     <div class="flex flex-row flex-none gap-sm justify-center mt-sm shrink-0">
-      <VButton
+      <NewButton
         label="Withdraw Request"
         tone="warning"
-        variant="ghost"
         icon="x"
         :loading="cancelApi.inFlight.value || reopenApi.inFlight.value"
         loadingText="Processing..."
         @click="withdraw"
       />
       <template v-if="userIsApprover">
-        <VButton
+        <NewButton
           :disabled="iRejected"
           label="Reject Request"
           tone="destructive"
@@ -158,43 +157,40 @@
           loadingText="Rejecting..."
           @click="reject"
         />
-        <VButton
+        <NewButton
           :disabled="iApproved"
           label="Approve Request"
-          tone="success"
+          tone="action"
           icon="thumbs-up"
           :loading="approveApi.inFlight.value"
           loadingText="Approving..."
           @click="approve"
         />
       </template>
-      <VButton
+      <NewButton
         :disabled="disallowApplyForApprovalFlow"
-        tone="success"
+        label="Apply Change Set"
+        icon="tools"
+        tone="action"
         :loading="flowStatus === 'approved' ? applyInFlight : false"
         loadingText="Applying..."
         @click="apply"
-      >
-        <span class="dark:text-neutral-800">Apply Change Set</span>
-        <template #icon>
-          <Icon name="tools" size="sm" class="dark:text-neutral-800" />
-        </template>
-      </VButton>
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
 import {
-  VButton,
   Timestamp,
   Tones,
   ErrorMessage,
   Icon,
   IconNames,
   themeClasses,
   TruncateWithTooltip,
+  NewButton,
 } from "@si/vue-lib/design-system";
 import { computed } from "vue";
 import { RouterLink } from "vue-router";

app/web/src/newhotness/CodeEditorModal.vue

@@ -41,20 +41,8 @@
     </div>
 
     <div class="flex justify-end gap-sm mt-sm">
-      <VButton label="Cancel" tone="shade" variant="ghost" @click="cancel" />
-      <VButton
-        :class="
-          clsx(
-            '!text-sm !border !cursor-pointer !px-xs',
-            themeClasses(
-              '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-              '!text-neutral-100 !bg-[#1264BF] !border-[#318AED] hover:!bg-[#2583EC]',
-            ),
-          )
-        "
-        label="Save"
-        @click="save"
-      />
+      <NewButton label="Cancel" @click="cancel" />
+      <NewButton label="Save" tone="action" @click="save" />
     </div>
   </Modal>
 </template>
@@ -63,9 +51,9 @@
 import {
   Icon,
   Modal,
+  NewButton,
   themeClasses,
   useModal,
-  VButton,
 } from "@si/vue-lib/design-system";
 import clsx from "clsx";
 import { onBeforeUnmount, ref, watch } from "vue";