fix(component/progressbar): fix progressbar showing label when progress == 0 (#698)

* fix: group list styling (#668)

* fix: group list styling

* fix: borders between list group items

---------

Co-authored-by: Mees van Dongen <[email protected]>
Co-authored-by: Ricardo Lüders <[email protected]>

* fix(progress.tsx): progress bar shows labels even when it is disabled at progress value is 0

The conditional rendring using the '&&' would return 0 on condition being false which would get
displayed when progress value is 0. This was fixed using ternary operator instead. And also the
label would get hidden at low progress values which is now fixed.

fix #696

* style(default.ts): changed progress bar label(inside label) color for light mode

* fix(components/progressbar): fix progressbar showing label when progress == 0

---------

Co-authored-by: Mees van Dongen <[email protected]>
Co-authored-by: Ricardo Lüders <[email protected]>

Author: 3 people

src/lib/components/Progress/Progress.tsx

@@ -54,16 +54,17 @@ export const Progress: FC<ProgressProps> = ({
     <>
       <div id={id} aria-label={textLabel} aria-valuenow={progress} role="progressbar" {...props}>
         {((textLabel && labelText && textLabelPosition === 'outside') ||
-          (progress && labelProgress && progressLabelPosition === 'outside')) && (
+          (progress > 0 && labelProgress && progressLabelPosition === 'outside')) && (
           <div className={theme.label} data-testid="flowbite-progress-outer-label-container">
             {textLabel && labelText && textLabelPosition === 'outside' && (
               <span data-testid="flowbite-progress-outer-text-label">{textLabel}</span>
             )}
-            {progress && labelProgress && progressLabelPosition === 'outside' && (
+            {labelProgress && progressLabelPosition === 'outside' && (
               <span data-testid="flowbite-progress-outer-progress-label">{progress}%</span>
             )}
           </div>
         )}
+
         <div className={classNames(theme.base, theme.size[size], className)}>
           <div
             style={{ width: `${progress}%` }}
@@ -72,7 +73,7 @@ export const Progress: FC<ProgressProps> = ({
             {textLabel && labelText && textLabelPosition === 'inside' && (
               <span data-testid="flowbite-progress-inner-text-label">{textLabel}</span>
             )}
-            {progress && labelProgress && progressLabelPosition === 'inside' && (
+            {progress > 0 && labelProgress && progressLabelPosition === 'inside' && (
               <span data-testid="flowbite-progress-inner-progress-label">{progress}%</span>
             )}
           </div>

src/lib/theme/default.ts

@@ -637,7 +637,7 @@ const theme: FlowbiteTheme = {
   progress: {
     base: 'w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
     label: 'mb-1 flex justify-between font-medium dark:text-white',
-    bar: 'flex items-center justify-center rounded-full text-center font-medium leading-none text-blue-100 space-x-2',
+    bar: 'rounded-full text-center font-medium leading-none text-blue-300 dark:text-blue-100 space-x-2',
     color: {
       dark: 'bg-gray-600 dark:bg-gray-300',
       blue: 'bg-blue-600',