fix(components/progressbar): fix progressbar showing label when progr…

…ess == 0
themesberg · Apr 17, 2023 · dfcc210 · dfcc210
1 parent 03d5bc7
commit dfcc210
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/lib/components/Progress/Progress.tsx b/src/lib/components/Progress/Progress.tsx
@@ -53,8 +53,8 @@ export const Progress: FC<ProgressProps> = ({
   return (
     <>
       <div id={id} aria-label={textLabel} aria-valuenow={progress} role="progressbar" {...props}>
-        {(textLabel && labelText && textLabelPosition === 'outside') ||
-        (progress && labelProgress && progressLabelPosition === 'outside') ? (
+        {((textLabel && labelText && textLabelPosition === '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>
@@ -63,22 +63,18 @@ export const Progress: FC<ProgressProps> = ({
               <span data-testid="flowbite-progress-outer-progress-label">{progress}%</span>
             )}
           </div>
-        ) : null}
+        )}
 
         <div className={classNames(theme.base, theme.size[size], className)}>
           <div
             style={{ width: `${progress}%` }}
             className={classNames(theme.bar, theme.color[color], theme.size[size])}
           >
             {textLabel && labelText && textLabelPosition === 'inside' && (
-              <span className="whitespace-nowrap" data-testid="flowbite-progress-inner-text-label">
-                {textLabel}
-              </span>
+              <span data-testid="flowbite-progress-inner-text-label">{textLabel}</span>
             )}
-            {labelProgress && progressLabelPosition === 'inside' && (
-              <span className="whitespace-nowrap" data-testid="flowbite-progress-inner-progress-label">
-                {progress}%
-              </span>
+            {progress > 0 && labelProgress && progressLabelPosition === 'inside' && (
+              <span data-testid="flowbite-progress-inner-progress-label">{progress}%</span>
             )}
           </div>
         </div>

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -491,12 +491,12 @@ const theme: FlowbiteTheme = {
   },
   listGroup: {
     root: {
-      base: 'list-none rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white',
+      base: 'list-none rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-left',
     },
     item: {
-      base: 'flex w-full cursor-pointer border-b border-gray-200 py-2 px-4 first:rounded-t-lg last:rounded-b-lg last:border-b-0 dark:border-gray-600',
+      base: '[&>*]:first:rounded-t-lg [&>*]:last:rounded-b-lg [&>*]:last:border-b-0',
       link: {
-        base: '',
+        base: 'flex w-full border-b border-gray-200 py-2 px-4 dark:border-gray-600',
         active: {
           off: 'hover:bg-gray-100 hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500',
           on: 'bg-blue-700 text-white dark:bg-gray-800',
@@ -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: 'items-center justify-center rounded-full text-center font-medium leading-none text-blue-300 dark: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',