Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: spinner render logic #94

Merged
merged 3 commits into from
Jul 9, 2024
Merged

fix: spinner render logic #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb00f8f
fix(components): spinner render logic
joshuagraber Jul 9, 2024
6ef26a7
test(components): update spinner snapshot
joshuagraber Jul 9, 2024
ff2d4c7
fix(components): spinner transitions
joshuagraber Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions src/components/Spinner/PdapSpinner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<template>
<div class="pdap-spinner">
<Transition appear>
<Transition appear>
<div v-if="show" class="pdap-spinner">
<svg
v-if="show"
aria-label="loading"
:width="size"
:height="size"
Expand All @@ -22,14 +21,14 @@
:fill="color"
/>
</svg>
</Transition>

<Transition :key="text" appear mode="out-in">
<p v-if="text && show" aria-live="polite">
{{ text }}
</p>
</Transition>
</div>
<Transition :key="text" appear mode="out-in">
<p v-if="text && show" aria-live="polite">
{{ text }}
</p>
</Transition>
</div>
</Transition>
</template>

<script setup lang="ts">
Expand Down
53 changes: 24 additions & 29 deletions src/components/Spinner/__snapshots__/spinner.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,49 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`PdapSpinner > applies custom color and size 1`] = `
<div class="pdap-spinner">
<transition-stub appear="true" css="true" persisted="false">
<transition-stub appear="true" css="true" persisted="false">
<div class="pdap-spinner">
<svg aria-label="loading" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="red" opacity=".25" stroke="red" />
<path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="red" stroke="red" />
</svg>
</transition-stub>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<!--v-if-->
</transition-stub>
</div>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<!--v-if-->
</transition-stub>
</div>
</transition-stub>
`;

exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `
<div class="pdap-spinner">
<transition-stub appear="true" css="true" persisted="false">
<!--v-if-->
</transition-stub>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<!--v-if-->
</transition-stub>
</div>
<transition-stub appear="true" css="true" persisted="false">
<!--v-if-->
</transition-stub>
`;

exports[`PdapSpinner > renders spinner when show prop is true 1`] = `
<div class="pdap-spinner">
<transition-stub appear="true" css="true" persisted="false">
<transition-stub appear="true" css="true" persisted="false">
<div class="pdap-spinner">
<svg aria-label="loading" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="currentColor" opacity=".25" stroke="currentColor" />
<path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="currentColor" stroke="currentColor" />
</svg>
</transition-stub>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<!--v-if-->
</transition-stub>
</div>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<!--v-if-->
</transition-stub>
</div>
</transition-stub>
`;

exports[`PdapSpinner > renders text when text prop is provided 1`] = `
<div class="pdap-spinner">
<transition-stub appear="true" css="true" persisted="false">
<transition-stub appear="true" css="true" persisted="false">
<div class="pdap-spinner">
<svg aria-label="loading" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="currentColor" opacity=".25" stroke="currentColor" />
<path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="currentColor" stroke="currentColor" />
</svg>
</transition-stub>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<p aria-live="polite">Loading...</p>
</transition-stub>
</div>
<transition-stub appear="true" css="true" mode="out-in" persisted="false">
<p aria-live="polite">Loading...</p>
</transition-stub>
</div>
</transition-stub>
`;
Loading