Merge pull request galaxyproject#19963 from ElectronicBlueberry/g-button-replacement-1

Button replacement batch 1

Author: bgruening

client/src/components/ActivityBar/ActivityItem.vue

@@ -10,6 +10,7 @@ import { useActivityStore } from "@/stores/activityStore";
 import type { ActivityVariant } from "@/stores/activityStoreTypes";
 import localize from "@/utils/localization";
 
+import GButton from "../BaseComponents/GButton.vue";
 import TextShort from "@/components/Common/TextShort.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
@@ -101,9 +102,9 @@ const meta = computed(() => store.metaForId(props.id));
             <small v-else>No tooltip available for this item</small>
             <div v-if="options" class="nav-options p-1">
                 <router-link v-for="(option, index) in options" :key="index" :to="option.value">
-                    <b-button size="sm" variant="outline-primary" class="w-100 my-1 text-break text-light">
+                    <GButton size="small" outline color="blue" class="w-100 my-1 text-break text-light">
                         {{ option.name }}
-                    </b-button>
+                    </GButton>
                 </router-link>
             </div>
         </div>

client/src/components/ActivityBar/ActivitySettings.test.js

@@ -67,7 +67,7 @@ describe("ActivitySettings", () => {
         await nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const checkbox = items.at(0).find("[title='Hide in Activity Bar']");
+        const checkbox = items.at(0).find("[data-title='Hide in Activity Bar']");
         expect(checkbox.exists()).toBeTruthy();
         const icon = wrapper.find("[icon='activity-test-icon'");
         expect(icon.exists()).toBeTruthy();
@@ -87,12 +87,12 @@ describe("ActivitySettings", () => {
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const checkbox = items.at(0).find("[title='Show in Activity Bar']");
+        const checkbox = items.at(0).find("[data-title='Show in Activity Bar']");
         expect(checkbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeFalsy();
         checkbox.trigger("click");
         await wrapper.vm.$nextTick();
-        const visibleCheckbox = items.at(0).find("[title='Hide in Activity Bar']");
+        const visibleCheckbox = items.at(0).find("[data-title='Hide in Activity Bar']");
         expect(visibleCheckbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
     });

client/src/components/ActivityBar/ActivitySettings.vue

@@ -8,6 +8,8 @@ import { useRouter } from "vue-router/composables";
 import { useActivityStore } from "@/stores/activityStore";
 import type { Activity } from "@/stores/activityStoreTypes";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
+
 const props = defineProps<{
     activityBarId: string;
     query: string;
@@ -87,34 +89,40 @@ function executeActivity(activity: Activity) {
                             }}</span>
                         </span>
                         <div>
-                            <BButton
+                            <GButton
                                 v-if="activity.mutable"
-                                v-b-tooltip.hover
+                                tooltip
                                 data-description="delete activity"
-                                size="sm"
+                                size="small"
+                                transparent
+                                icon-only
+                                color="blue"
                                 title="Delete Activity"
-                                variant="link"
                                 @click.stop="onRemove(activity)">
                                 <FontAwesomeIcon :icon="faTrash" fa-fw />
-                            </BButton>
-                            <BButton
+                            </GButton>
+                            <GButton
                                 v-if="activity.visible"
-                                v-b-tooltip.hover
-                                size="sm"
+                                tooltip
+                                size="small"
+                                transparent
+                                icon-only
+                                color="blue"
                                 title="Hide in Activity Bar"
-                                variant="link"
                                 @click.stop="onFavorite(activity)">
                                 <FontAwesomeIcon :icon="faStar" fa-fw />
-                            </BButton>
-                            <BButton
+                            </GButton>
+                            <GButton
                                 v-else
-                                v-b-tooltip.hover
-                                size="sm"
+                                tooltip
+                                transparent
+                                icon-only
+                                color="blue"
+                                size="small"
                                 title="Show in Activity Bar"
-                                variant="link"
                                 @click.stop="onFavorite(activity)">
                                 <FontAwesomeIcon :icon="faStarRegular" fa-fw />
-                            </BButton>
+                            </GButton>
                         </div>
                     </span>
                 </div>

client/src/components/BaseComponents/GButton.vue

@@ -35,7 +35,9 @@ const emit = defineEmits<{
 }>();
 
 function onClick(event: PointerEvent) {
-    if (!props.disabled) {
+    if (props.disabled) {
+        event.preventDefault();
+    } else {
         emit("click", event);
         emit("update:pressed", !props.pressed);
     }
@@ -118,6 +120,7 @@ useAccessibleHover(
         ref="buttonRef"
         class="g-button"
         :data-title="currentTooltip"
+        :data-disabled="props.disabled"
         :class="{ ...variantClasses, ...styleClasses }"
         :to="props.to"
         :href="props.to ?? props.href"
@@ -203,6 +206,12 @@ useAccessibleHover(
         &:focus-visible {
             border-color: var(--color-grey-600);
         }
+
+        &.g-outline.g-pressed {
+            background-color: var(--color-grey-600);
+            color: var(--color-grey-100);
+            border-color: var(--color-grey-800);
+        }
     }
 
     @each $color in "blue", "green", "red", "yellow", "orange" {

client/src/components/GalaxyWizard.vue

@@ -2,13 +2,14 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faThumbsDown, faThumbsUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BSkeleton } from "bootstrap-vue";
+import { BAlert, BSkeleton } from "bootstrap-vue";
 import { ref } from "vue";
 
 import { GalaxyApi } from "@/api";
 import { useMarkdown } from "@/composables/markdown";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GButton from "./BaseComponents/GButton.vue";
 import LoadingSpan from "./LoadingSpan.vue";
 
 library.add(faThumbsUp, faThumbsDown);
@@ -89,10 +90,10 @@ async function sendFeedback(value: "up" | "down") {
         <BAlert v-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
         </BAlert>
-        <BButton v-else-if="!queryResponse" class="w-100" variant="info" :disabled="busy" @click="submitQuery">
+        <GButton v-else-if="!queryResponse" class="w-100" color="blue" :disabled="busy" @click="submitQuery">
             <span v-if="!busy"> Let our Help Wizard Figure it out! </span>
             <LoadingSpan v-else message="Thinking" />
-        </BButton>
+        </GButton>
         <div :class="props.view == 'wizard' && 'mt-4'">
             <div v-if="busy">
                 <BSkeleton animation="wave" width="85%" />
@@ -105,20 +106,20 @@ async function sendFeedback(value: "up" | "down") {
             <div v-if="queryResponse" class="feedback-buttons mt-2">
                 <hr class="w-100" />
                 <h4>Was this answer helpful?</h4>
-                <BButton
-                    variant="success"
+                <GButton
+                    color="green"
                     :disabled="feedback !== null"
                     :class="{ submitted: feedback === 'up' }"
                     @click="sendFeedback('up')">
                     <FontAwesomeIcon :icon="faThumbsUp" fixed-width />
-                </BButton>
-                <BButton
-                    variant="danger"
+                </GButton>
+                <GButton
+                    color="red"
                     :disabled="feedback !== null"
                     :class="{ submitted: feedback === 'down' }"
                     @click="sendFeedback('down')">
                     <FontAwesomeIcon :icon="faThumbsDown" fixed-width />
-                </BButton>
+                </GButton>
                 <i v-if="!feedback">This feedback helps us improve our responses.</i>
                 <i v-else>Thank you for your feedback!</i>
             </div>

client/src/components/HistoryImport.test.js

@@ -54,7 +54,7 @@ describe("HistoryImport.vue", () => {
 
     it("should render a form with submit disabled because inputs empty", async () => {
         expect(wrapper.find(".import-button").exists()).toBeTruthy();
-        expect(wrapper.find(".import-button").attributes("disabled")).toBeTruthy();
+        expect(wrapper.find(".import-button").attributes("data-disabled")).toBeTruthy();
         expect(wrapper.vm.importReady).toBeFalsy();
     });
 

client/src/components/HistoryImport.vue

@@ -71,9 +71,9 @@
                     <FilesInput ref="filesInput" v-model="sourceRemoteFilesUri" />
                 </b-form-group>
 
-                <b-button class="import-button" variant="primary" type="submit" :disabled="!importReady">
+                <GButton class="import-button" color="blue" type="submit" :disabled="!importReady">
                     Import {{ identifierText }}
-                </b-button>
+                </GButton>
             </b-form>
         </div>
     </div>
@@ -98,6 +98,7 @@ import { fetchFileSources } from "@/api/remoteFiles";
 
 import ExternalLink from "./ExternalLink";
 
+import GButton from "./BaseComponents/GButton.vue";
 import FilesInput from "components/FilesDialog/FilesInput.vue";
 
 library.add(faFolderOpen);
@@ -106,7 +107,7 @@ library.add(faExternalLinkAlt);
 Vue.use(BootstrapVue);
 
 export default {
-    components: { FilesInput, FontAwesomeIcon, JobError, LoadingSpan, ExternalLink },
+    components: { FilesInput, FontAwesomeIcon, JobError, LoadingSpan, ExternalLink, GButton },
     props: {
         invocationImport: {
             type: Boolean,

client/src/components/IconCard.vue

@@ -6,15 +6,18 @@
                 <b-col cols="auto"><i :class="icon"></i></b-col>
             </b-row>
         </b-container>
-        <b-button variant="primary" @click="onButtonClick">{{ buttonText }}</b-button>
+        <GButton color="blue" @click="onButtonClick">{{ buttonText }}</GButton>
     </b-card>
 </template>
 
 <script>
+import GButton from "./BaseComponents/GButton.vue";
+
 /** A generic Card, used as a template, that displays an action button,
  * an icon (font-awesome), along with a title and description.
  * Clicking the button emits an "onButtonClick" event. */
 export default {
+    components: { GButton },
     props: {
         title: {
             type: String,

client/src/components/Markdown/Markdown.vue

@@ -93,9 +93,10 @@ onMounted(() => {
                             class="markdown-pdf-export"
                             :fallback-url="exportLink"
                             :download-endpoint="downloadEndpoint"
-                            size="sm"
+                            size="small"
                             title="Generate PDF"
-                            variant="outline-primary" />
+                            color="blue"
+                            outline />
                         <BButton
                             v-if="!readOnly"
                             v-b-tooltip.hover