fix: refresh snapshots

Author: Charfeddine Hamrouni

playground/app/pages/components/progress.vue

@@ -80,8 +80,6 @@ onMounted(() => {
         v-model="value2"
         variant="circular"
         size="xs"
-        status
-        status-position="inside"
         color="neutral"
       />
 
@@ -113,6 +111,7 @@ onMounted(() => {
         v-model="value2"
         variant="circular"
         color="warning"
+        status-position="inside"
         size="xl"
         status
       />

src/runtime/components/Progress.vue

@@ -84,7 +84,7 @@ const appConfig = useAppConfig() as Progress['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
 
-const RADIUS = 45
+const RADIUS = 40
 const circumference = 2 * Math.PI * RADIUS
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)

src/theme/progress.ts

@@ -124,61 +124,61 @@ export default (options: Required<ModuleOptions>) => ({
     variant: 'circular',
     size: '2xs',
     class: {
-      base: 'size-4',
-      indicator: 'stroke-[1px]',
-      track: 'stroke-[1px]'
+      base: 'size-6',
+      indicator: 'stroke-[6px]',
+      track: 'stroke-[6px]'
     }
   },
   {
     variant: 'circular',
     size: 'xs',
     class: {
-      base: 'size-6',
-      indicator: 'stroke-[2px]',
-      track: 'stroke-[2px]'
+      base: 'size-8',
+      indicator: 'stroke-[8px]',
+      track: 'stroke-[8px]'
     }
   },
   {
     variant: 'circular',
     size: 'sm',
     class: {
-      base: 'size-8',
-      indicator: 'stroke-[4px]',
-      track: 'stroke-[4px]'
+      base: 'size-10',
+      indicator: 'stroke-[10px]',
+      track: 'stroke-[10px]'
     }
   },
   {
     variant: 'circular',
     size: 'md',
     class: {
-      base: 'size-10',
-      indicator: 'stroke-[8px]',
-      track: 'stroke-[8px]'
+      base: 'size-14',
+      indicator: 'stroke-[14px]',
+      track: 'stroke-[14px]'
     }
   },
   {
     variant: 'circular',
     size: 'lg',
     class: {
-      base: 'size-12',
-      indicator: 'stroke-[12px]',
-      track: 'stroke-[12px]'
+      base: 'size-16',
+      indicator: 'stroke-[16px]',
+      track: 'stroke-[16px]'
     }
   },
   {
     variant: 'circular',
     size: 'xl',
     class: {
-      base: 'size-14',
-      indicator: 'stroke-[16px]',
-      track: 'stroke-[16px]'
+      base: 'size-18',
+      indicator: 'stroke-[18px]',
+      track: 'stroke-[18px]'
     }
   },
   {
     variant: 'circular',
     size: '2xl',
     class: {
-      base: 'size-16',
+      base: 'size-20',
       indicator: 'stroke-[20px]',
       track: 'stroke-[20px]'
     }

test/components/__snapshots__/Progress-vue.spec.ts.snap

@@ -225,19 +225,19 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status position and circular variant correctly 1`] = `
 "<div class="gap-0 items-center w-full flex flex-col">
   <div class="text-dimmed transition-[width] duration-200 flex items-center justify-center text-sm flex-row" style="width: fit-content;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-10" style="transform: translateZ(0);"><svg class="relative rounded-full size-10" viewBox="0 0 100 100">
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="fill-none stroke-accented stroke-[6px]"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[6px]" style="stroke-linecap: round; stroke-dasharray: 141.3716694115407px, 282.7433388230814px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[14px]" style="stroke-linecap: round; stroke-dasharray: 125.66370614359172px, 251.32741228718345px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
     </svg>
     <!--v-if-->
   </div>
@@ -268,13 +268,13 @@ exports[`Progress > renders with ui correctly 1`] = `
 exports[`Progress > renders with variant circular correctly 1`] = `
 "<div class="gap-0 items-center w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-10" style="transform: translateZ(0);"><svg class="relative rounded-full size-10" viewBox="0 0 100 100">
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="fill-none stroke-accented stroke-[6px]"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
     </svg>
     <!--v-if-->
   </div>

test/components/__snapshots__/Progress.spec.ts.snap

@@ -225,19 +225,19 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status position and circular variant correctly 1`] = `
 "<div class="gap-0 items-center w-full flex flex-col">
   <div class="text-dimmed transition-[width] duration-200 flex items-center justify-center text-sm flex-row" style="width: fit-content;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-10" style="transform: translateZ(0);"><svg class="relative rounded-full size-10" viewBox="0 0 100 100">
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="fill-none stroke-accented stroke-[6px]"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[6px]" style="stroke-linecap: round; stroke-dasharray: 141.3716694115407px, 282.7433388230814px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="rounded-full size-full duration-200 ease-out fill-none transition-[stroke-dasharray,opacity] bg-primary stroke-primary stroke-[14px]" style="stroke-linecap: round; stroke-dasharray: 125.66370614359172px, 251.32741228718345px; stroke-dashoffset: 0px;" data-state="loading" data-value="50" data-max="100"></path>
     </svg>
     <!--v-if-->
   </div>
@@ -268,13 +268,13 @@ exports[`Progress > renders with ui correctly 1`] = `
 exports[`Progress > renders with variant circular correctly 1`] = `
 "<div class="gap-0 items-center w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-10" style="transform: translateZ(0);"><svg class="relative rounded-full size-10" viewBox="0 0 100 100">
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative rounded-full size-14" style="transform: translateZ(0);"><svg class="relative rounded-full size-14" viewBox="0 0 100 100">
       <path d="
           M 50 50
-          m 0 -45
-          a 45 45 0 1 1 0 90
-          a 45 45 0 1 1 0 -90
-          " class="fill-none stroke-accented stroke-[6px]"></path>
+          m 0 -40
+          a 40 40 0 1 1 0 80
+          a 40 40 0 1 1 0 -80
+          " class="fill-none stroke-accented stroke-[14px]"></path>
     </svg>
     <!--v-if-->
   </div>