GoldenRetriever + hideUploadButton=true

[lakesare]

Fixes: #5142

GoldenRetriever + { hideUploadButton: true }

Before

After

[github-actions]

Diff output files

diff --git a/packages/@uppy/status-bar/lib/StatusBarUI.js b/packages/@uppy/status-bar/lib/StatusBarUI.js
index 66e3513..e518609 100644
--- a/packages/@uppy/status-bar/lib/StatusBarUI.js
+++ b/packages/@uppy/status-bar/lib/StatusBarUI.js
@@ -95,21 +95,7 @@ export default function StatusBarUI(_ref) {
         return false;
     }
   }
-  function getIsHidden() {
-    if (recoveredState) {
-      return false;
-    }
-    switch (uploadState) {
-      case STATE_WAITING:
-        return hideUploadButton || newFiles === 0;
-      case STATE_COMPLETE:
-        return hideAfterFinish;
-      default:
-        return false;
-    }
-  }
   const progressValue = getProgressValue();
-  const isHidden = getIsHidden();
   const width = progressValue != null ? progressValue : 100;
   const showUploadBtn = !error && newFiles && !isUploadInProgress && !isAllPaused && allowNewUpload
     && !hideUploadButton;
@@ -123,6 +109,48 @@ export default function StatusBarUI(_ref) {
   const statusBarClassNames = classNames("uppy-StatusBar", `is-${uploadState}`, {
     "has-ghosts": isSomeGhost,
   });
+  const progressBarStateEl = (() => {
+    switch (uploadState) {
+      case STATE_PREPROCESSING:
+      case STATE_POSTPROCESSING:
+        return h(ProgressBarProcessing, {
+          progress: calculateProcessingProgress(files),
+        });
+      case STATE_COMPLETE:
+        return h(ProgressBarComplete, {
+          i18n: i18n,
+        });
+      case STATE_ERROR:
+        return h(ProgressBarError, {
+          error: error,
+          i18n: i18n,
+          numUploads: numUploads,
+          complete: complete,
+        });
+      case STATE_UPLOADING:
+        return h(ProgressBarUploading, {
+          i18n: i18n,
+          supportsUploadProgress: supportsUploadProgress,
+          totalProgress: totalProgress,
+          showProgressDetails: showProgressDetails,
+          isUploadStarted: isUploadStarted,
+          isAllComplete: isAllComplete,
+          isAllPaused: isAllPaused,
+          newFiles: newFiles,
+          numUploads: numUploads,
+          complete: complete,
+          totalUploadedSize: totalUploadedSize,
+          totalSize: totalSize,
+          totalETA: totalETA,
+          startUpload: startUpload,
+        });
+      default:
+        return null;
+    }
+  })();
+  const atLeastOneAction = showUploadBtn || showRetryBtn || showPauseResumeBtn || showCancelBtn || showDoneBtn;
+  const thereIsNothingInside = !atLeastOneAction && !progressBarStateEl;
+  const isHidden = thereIsNothingInside || uploadState === STATE_COMPLETE && hideAfterFinish;
   return h(
     "div",
     {
@@ -141,51 +169,13 @@ export default function StatusBarUI(_ref) {
       "aria-valuemax": 100,
       "aria-valuenow": progressValue,
     }),
-    (() => {
-      switch (uploadState) {
-        case STATE_PREPROCESSING:
-        case STATE_POSTPROCESSING:
-          return h(ProgressBarProcessing, {
-            progress: calculateProcessingProgress(files),
-          });
-        case STATE_COMPLETE:
-          return h(ProgressBarComplete, {
-            i18n: i18n,
-          });
-        case STATE_ERROR:
-          return h(ProgressBarError, {
-            error: error,
-            i18n: i18n,
-            numUploads: numUploads,
-            complete: complete,
-          });
-        case STATE_UPLOADING:
-          return h(ProgressBarUploading, {
-            i18n: i18n,
-            supportsUploadProgress: supportsUploadProgress,
-            totalProgress: totalProgress,
-            showProgressDetails: showProgressDetails,
-            isUploadStarted: isUploadStarted,
-            isAllComplete: isAllComplete,
-            isAllPaused: isAllPaused,
-            newFiles: newFiles,
-            numUploads: numUploads,
-            complete: complete,
-            totalUploadedSize: totalUploadedSize,
-            totalSize: totalSize,
-            totalETA: totalETA,
-            startUpload: startUpload,
-          });
-        default:
-          return null;
-      }
-    })(),
+    progressBarStateEl,
     h(
       "div",
       {
         className: "uppy-StatusBar-actions",
       },
-      recoveredState || showUploadBtn
+      showUploadBtn
         ? h(UploadBtn, {
           newFiles: newFiles,
           isUploadStarted: isUploadStarted,

[lakesare]

This is the main change, everything else is here in order to make the footer collapse when nothing's inside

[Murderlon]

Nice fix 👍

[Murderlon]

I think we can undo this change. Makes the PR more clear and it's not necessarily an improvement.

[lakesare]

It's not a prettification, we take progressBarStateEl up because we need that value in order to determine whether we should collapse the footer.

In normal html, this footer would be automatically collapsed when nothing's inside. In our case, we collapse it manually via the height property (controlled by aria-hidden), because we need animations.
My point with this change is to make this aria-hidden derived.
Nothing is inside (each child determines via some fancy logic whether it needs to be here)? Collapse the footer.

[lakesare]

If you like we can revert this change and write

const thereIsNothingInside = !atLeastOneAction && uploadState === STATE_WAITING

(logically equivalent, but aria-hidden stops being derived from the presence of children).

I like this solution too, was on the brim here.