Skip to content

fix(FileUploadField): don't render empty dom node#12236

Merged
wise-king-sullyman merged 1 commit intopatternfly:mainfrom
logonoff:12235-fileupload
Feb 5, 2026
Merged

fix(FileUploadField): don't render empty dom node#12236
wise-king-sullyman merged 1 commit intopatternfly:mainfrom
logonoff:12235-fileupload

Conversation

@logonoff
Copy link
Member

@logonoff logonoff commented Feb 5, 2026

What: Closes #12235

Summary by CodeRabbit

  • Bug Fixes
    • Improved file upload field rendering logic to better handle loading states and text preview display together, ensuring the details section appears appropriately based on active states.

@coderabbitai
Copy link

coderabbitai bot commented Feb 5, 2026

Walkthrough

Restructured conditional rendering in FileUploadField component to wrap file details area in a single container that activates when a loading state is active or preview is enabled. The loading spinner and TextArea preview are now rendered together inside this conditional block, consolidating the render flow.

Changes

Cohort / File(s) Summary
FileUpload component layout restructuring
packages/react-core/src/components/FileUpload/FileUploadField.tsx
Consolidated conditional rendering logic by wrapping file details in a single container that renders when loading state is active or preview is enabled. Loading spinner moved into the same conditional block alongside the TextArea preview, changing from always rendering the details section to conditionally rendering it.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • dlabaj
  • thatblindgeye
  • kmcfaul
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: preventing empty DOM node rendering in FileUploadField, which directly addresses the extra bottom space issue.
Linked Issues check ✅ Passed The code changes align with issue #12235 by conditionally rendering the file details container only when needed, eliminating the empty DOM node that caused the extra bottom space.
Out of Scope Changes check ✅ Passed All changes in FileUploadField.tsx are directly scoped to fixing the empty DOM node rendering issue mentioned in issue #12235, with no extraneous modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Collaborator

patternfly-build commented Feb 5, 2026

@wise-king-sullyman wise-king-sullyman merged commit 57f5823 into patternfly:main Feb 5, 2026
14 checks passed
@wise-king-sullyman
Copy link
Collaborator

Change looks great, thanks!

@logonoff logonoff deleted the 12235-fileupload branch February 5, 2026 22:06
@patternfly-build
Copy link
Collaborator

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.33
  • @patternfly/react-core@6.5.0-prerelease.30
  • @patternfly/react-docs@7.5.0-prerelease.35
  • @patternfly/react-drag-drop@6.5.0-prerelease.30
  • demo-app-ts@6.5.0-prerelease.59
  • @patternfly/react-table@6.5.0-prerelease.31
  • @patternfly/react-templates@6.5.0-prerelease.30

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - FileUpload - Extra bottom space in "Custom file preview" example

4 participants