From 1f293f5ea25f4ec9261c1ab3f78cd3ab6ffde728 Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:49:51 -0500
Subject: [PATCH] fix: another time for the button children (#120)

---
 src/components/Button/PdapButton.vue          | 21 ++++++++++++++-----
 .../Button/__snapshots__/button.spec.ts.snap  |  5 +----
 .../quick-search-form.spec.ts.snap            |  5 +----
 src/demo/pages/FormV2Demo.vue                 | 11 +++++++++-
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
index ffc2038..14974d8 100644
--- a/src/components/Button/PdapButton.vue
+++ b/src/components/Button/PdapButton.vue
@@ -1,10 +1,17 @@
 <template>
 	<button :class="classes">
-		<TransitionGroup mode="out-in">
-			<slot v-if="!isLoading" />
-			<slot v-if="isLoading && $slots.loading" name="loading" />
-			<Spinner v-if="isLoading && !$slots.loading" :show="isLoading" />
-		</TransitionGroup>
+		<Transition mode="out-in">
+			<component
+				:is="
+					isLoading && $slots.loading
+						? $slots.loading
+						: isLoading
+						? Spinner
+						: $slots.default
+				"
+				v-bind="isLoading ? loadingProps : undefined"
+			/>
+		</Transition>
 	</button>
 </template>
 
@@ -22,6 +29,10 @@ const props = withDefaults(defineProps<PdapButtonProps>(), {
 	isLoading: false,
 });
 
+const loadingProps = {
+	show: props.isLoading,
+};
+
 // CSS class map
 const classes = reactive({
 	'pdap-button': true,
diff --git a/src/components/Button/__snapshots__/button.spec.ts.snap b/src/components/Button/__snapshots__/button.spec.ts.snap
index 81e4c8c..50312ba 100644
--- a/src/components/Button/__snapshots__/button.spec.ts.snap
+++ b/src/components/Button/__snapshots__/button.spec.ts.snap
@@ -2,9 +2,6 @@
 
 exports[`Renders button component > Renders a button 1`] = `
 <button class="pdap-button pdap-button-primary">
-  <transition-group-stub appear="false" css="true" mode="out-in" persisted="false">Button Content
-    <!--v-if-->
-    <!--v-if-->
-  </transition-group-stub>
+  <transition-stub appear="false" css="true" mode="out-in" persisted="false">Button Content</transition-stub>
 </button>
 `;
diff --git a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
index e7bb364..22c987e 100644
--- a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
+++ b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
@@ -28,10 +28,7 @@ exports[`QuickSearchForm component > Renders a QuickSearchForm 1`] = `
       </label>
     </div>
     <button class="pdap-button pdap-button-primary flex-grow-0 flex-shrink-0 basis-full max-w-[unset] mt-4" type="submit">
-      <transition-group-stub appear="false" css="true" mode="out-in" persisted="false">Search Data Sources
-        <!--v-if-->
-        <!--v-if-->
-      </transition-group-stub>
+      <transition-stub appear="false" css="true" mode="out-in" persisted="false">Search Data Sources</transition-stub>
     </button>
   </form>
   <p class="max-w-[unset] text-med"> For example, you could search for <a> stops in Pittsburgh </a> or <a> complaints everywhere </a> . </p>
diff --git a/src/demo/pages/FormV2Demo.vue b/src/demo/pages/FormV2Demo.vue
index 5f3c3fc..e1efd18 100644
--- a/src/demo/pages/FormV2Demo.vue
+++ b/src/demo/pages/FormV2Demo.vue
@@ -60,7 +60,7 @@
 				:rows="5"
 			/>
 
-			<Button type="submit">Submit</Button>
+			<Button :is-loading="mockLoading" type="submit">Submit</Button>
 		</FormV2>
 	</main>
 </template>
@@ -73,6 +73,15 @@ import { InputCheckbox } from '../../components/InputCheckbox';
 import { InputPassword } from '../../components/InputPassword';
 import { InputSelect } from '../../components/InputSelect';
 import PdapInputTextArea from '../../components/InputTextArea/PdapInputTextArea.vue';
+import { onMounted, ref } from 'vue';
+
+const mockLoading = ref(true);
+
+onMounted(() => {
+	setTimeout(() => {
+		mockLoading.value = false;
+	}, 5000);
+});
 
 const INPUT_CHECKBOX_NAME = 'ice-cream';
 const INPUT_TEXT_PLACEHOLDER = 'Paul';