Simplify rendering of file_field for Bootstrap 5. Fixes bootstrap-rub…

…y#572 (bootstrap-ruby#581) * Use Bootstrap 5 beta 3 CDN libraries in demo app Links to both CSS and JS libraries taken from https://getbootstrap.com/docs/5.0/getting-started/introduction/ * Remove linking ../images Folder doesn’t exist and causes the error "ActionView::Template::Error (link_tree argument must be a directory)" * Cleanup generated HTML for file upload as per Bootstrap 5 See bootstrap-ruby#572 * Update tests for new file upload rendering * Add changelog entry * Fix Rubocop offense on whitespace lib/bootstrap_form/inputs/file_field.rb:10:52: C: [Correctable] Layout/SpaceAroundEqualsInParameterDefault: Surrounding space detected in default value assignment. (https://rubystyle.guide#spaces-around-equals) def file_field_with_bootstrap(name, options = {}) ^^^ Co-authored-by: Larry Reid <lcreid@jadesystems.ca>
CharlieWinkwaves · Dec 28, 2021 · e45152c · e45152c
1 parent 26272ed
commit e45152c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 ### New features
 
+* [#572](https://github.com/bootstrap-ruby/bootstrap_form/issues/572): Simplify the formatting of the file upload control to follow the new Bootstrap 5 styles
 * [#573](https://github.com/bootstrap-ruby/bootstrap_form/issues/573): Add support for Bootstrap 5's floating labels
 
 ### Bugfixes

diff --git a/demo/app/assets/config/manifest.js b/demo/app/assets/config/manifest.js
@@ -1 +1 @@
-//= link application.css
+//= link_directory ../stylesheets .css
diff --git a/demo/app/views/layouts/application.html.erb b/demo/app/views/layouts/application.html.erb
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
 
@@ -44,8 +44,8 @@
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>

diff --git a/lib/bootstrap_form/inputs/file_field.rb b/lib/bootstrap_form/inputs/file_field.rb
@@ -8,28 +8,16 @@ module FileField
 
       included do
         def file_field_with_bootstrap(name, options={})
-          options = options.reverse_merge(control_class: "form-file-input")
+          options = options.reverse_merge(control_class: "form-control")
           form_group_builder(name, options) do
-            tag.div(class: "form-file") do
-              input_with_error(name) do
-                file_field_input(name, options)
-              end
+            input_with_error(name) do
+              file_field_without_bootstrap(name, options)
             end
           end
         end
 
         bootstrap_alias :file_field
       end
-
-      private
-
-      def file_field_input(name, options)
-        placeholder = options.delete(:placeholder) || "Choose file"
-        placeholder_opts = { class: "form-label form-file-label" }
-        placeholder_opts[:for] = options[:id] if options[:id].present?
-
-        file_field_without_bootstrap(name, options) + label(name, placeholder, placeholder_opts)
-      end
     end
   end
 end
diff --git a/test/bootstrap_fields_test.rb b/test/bootstrap_fields_test.rb
@@ -59,10 +59,7 @@ class BootstrapFieldsTest < ActionView::TestCase
     expected = <<-HTML.strip_heredoc
       <div class="mb-3">
         <label class="form-label" for="user_misc">Misc</label>
-        <div class="form-file">
-          <input class="form-file-input" id="user_misc" name="user[misc]" type="file" />
-          <label class="form-label form-file-label" for="user_misc">Choose file</label>
-        </div>
+        <input class="form-control" id="user_misc" name="user[misc]" type="file"/>
       </div>
     HTML
     assert_equivalent_xml expected, @builder.file_field(:misc)
@@ -72,10 +69,7 @@ class BootstrapFieldsTest < ActionView::TestCase
     expected = <<-HTML.strip_heredoc
       <div class="mb-3">
         <label class="form-label" for="user_misc">Misc</label>
-        <div class="form-file">
-          <input class="form-file-input" id="user_misc" name="user[misc]" type="file" />
-          <label class="form-label form-file-label" for="user_misc">Pick a file</label>
-        </div>
+        <input class="form-control" id="user_misc" name="user[misc]" placeholder="Pick a file" type="file"/>
       </div>
     HTML
     assert_equivalent_xml expected, @builder.file_field(:misc, placeholder: "Pick a file")
@@ -86,10 +80,7 @@ class BootstrapFieldsTest < ActionView::TestCase
       expected = <<-HTML.strip_heredoc
         <div class="mb-3">
           <label class="form-label" for="custom-id">Misc</label>
-          <div class="form-file">
-            <input class="form-file-input" id="custom-id" name="user[misc]" type="file" />
-            <label class="form-label form-file-label" for="custom-id">Choose file</label>
-          </div>
+          <input class="form-control" id="custom-id" name="user[misc]" type="file"/>
         </div>
       HTML
       assert_equivalent_xml expected, form_with_builder.file_field(:misc, id: "custom-id")
@@ -103,11 +94,8 @@ class BootstrapFieldsTest < ActionView::TestCase
       #{'<input name="utf8" type="hidden" value="&#x2713;"/>' unless ::Rails::VERSION::STRING >= '6'}
       <div class="mb-3">
         <label class="form-label" for="user_misc">Misc</label>
-        <div class="form-file">
-          <input class="form-file-input is-invalid" id="user_misc" name="user[misc]" type="file" />
-          <label class="form-label form-file-label" for="user_misc">Choose file</label>
-          <div class="invalid-feedback">error for test</div>
-        </div>
+        <input class="form-control is-invalid" id="user_misc" name="user[misc]" type="file"/>
+        <div class="invalid-feedback">error for test</div>
       </div>
     </form>
     HTML