From 707bc93cbe892c30a6fdb2370754699217453e57 Mon Sep 17 00:00:00 2001
From: Andrey Akulov <andreyjamer@gmail.com>
Date: Mon, 30 Sep 2024 16:06:27 +0500
Subject: [PATCH] fix: Added safe sizes for progress bar component

---
 .../examples/FwbProgressExampleLabelInside.vue      |  2 ++
 src/components/FwbProgress/FwbProgress.vue          | 13 +++++++++----
 .../FwbProgress/composables/useProgressClasses.ts   |  7 +++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/components/progress/examples/FwbProgressExampleLabelInside.vue b/docs/components/progress/examples/FwbProgressExampleLabelInside.vue
index cf6e129b..21a62f1d 100644
--- a/docs/components/progress/examples/FwbProgressExampleLabelInside.vue
+++ b/docs/components/progress/examples/FwbProgressExampleLabelInside.vue
@@ -6,6 +6,8 @@
     size="lg"
   />
 
+  <div class="mb-4" />
+
   <fwb-progress
     :progress="0"
     label-position="inside"
diff --git a/src/components/FwbProgress/FwbProgress.vue b/src/components/FwbProgress/FwbProgress.vue
index 953d3bc2..c847a108 100644
--- a/src/components/FwbProgress/FwbProgress.vue
+++ b/src/components/FwbProgress/FwbProgress.vue
@@ -19,8 +19,8 @@
     >
       <div
         :class="innerClasses"
-        :style="{ width: progress + '%' }"
-        class="rounded-full font-medium text-blue-100 text-center p-0.5 min-w-max"
+        :style="{ width: safeProgress + '%' }"
+        class="rounded-full font-medium text-blue-100 text-center p-0.5 min-w-max box-border"
       >
         <template v-if="labelProgress && labelPosition === 'inside'">
           {{ progress }}%
@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
-import { useProgressClasses } from './composables/useProgressClasses'
+import { computed, toRefs } from 'vue'
+import { progressSafeSizes, useProgressClasses } from './composables/useProgressClasses'
 import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
 
 interface IProgressProps {
@@ -53,6 +53,11 @@ const props = withDefaults(defineProps<IProgressProps>(), {
   size: 'md',
 })
 
+const safeProgress = computed(() => {
+  const size = progressSafeSizes[props.size]
+  return props.progress <= size ? size : props.progress
+})
+
 const {
   innerClasses,
   outerClasses,
diff --git a/src/components/FwbProgress/composables/useProgressClasses.ts b/src/components/FwbProgress/composables/useProgressClasses.ts
index b7403d95..20b1ceaa 100644
--- a/src/components/FwbProgress/composables/useProgressClasses.ts
+++ b/src/components/FwbProgress/composables/useProgressClasses.ts
@@ -31,6 +31,13 @@ const progressSizeClasses: Record<ProgressSize, string> = {
   xl: 'h-6 text-base leading-tight',
 }
 
+export const progressSafeSizes: Record<ProgressSize, number> = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4,
+}
+
 export type UseProgressClassesProps = {
   color: Ref<ProgressVariant>
   size: Ref<ProgressSize>