Problem/Motivation

The "file" and "file_managed" render elements do not get bootstrap classes as per Bootstrap Examples. This results in poor styling of the file dialog (not bootstrap like).

Steps to reproduce

add a "file" oder "file_managed" element to your form or use for example a file upload widget somewhere (file field, image field, media).

Proposed resolution

add necessary classes via theme preprocessing
This would also help a bit with #3475403: Apply appropriate styling to Media Library by styling the file dialog there too.
This would conflict with #3476157: Checkboxes and radios should conform to Bootstrap examples as this MR also uses the preprocess_form_element hook. Either this MR or #3476157: Checkboxes and radios should conform to Bootstrap examples MR would have to be changed after the other MR is applied.

Remaining tasks

User interface changes

This is screenshot before:
Screenshot before
This is screenshot after:
Screenshot after

API changes

Data model changes

CommentFileSizeAuthor
file_after.jpg25.28 KBstefan.korn
file_before.jpg10.97 KBstefan.korn

Issue fork bootstrap5-3476481

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

stefan.korn created an issue. See original summary.

stefan.korn’s picture

Status: Active » Needs review
stefan.korn’s picture

Issue summary: View changes

jannakha made their first commit to this issue’s fork.

jannakha’s picture

Status: Needs review » Reviewed & tested by the community

tested - works well!
thank you for your contribution.

vladimiraus made their first commit to this issue’s fork.

vladimiraus’s picture

Status: Reviewed & tested by the community » Fixed

Thank you all for your contributions. 🎂
Committed.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.