From 692d16fe75fc67aa00fab72d5258062e98b810b3 Mon Sep 17 00:00:00 2001
From: Carles Pina Estany <carles@pina.cat>
Date: Wed, 17 Jun 2020 22:13:43 +0200
Subject: [PATCH] =?UTF-8?q?File=20field=20Bootstrap4:=20avoids=20long=20fi?=
 =?UTF-8?q?le=20names=20overflowing=20outside=20the=E2=80=A6=20(#1032)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* File field Bootstrap4: avoids long file names overflowing outside the label

* Using h-auto to prevent vertical overflow, and text-break to prevent horizontal overflow

* Fixing text-break. cf https://github.com/twbs/bootstrap/issues/30803

* Using text-truncate to prevent long file name overflow

* refactor test to follow field_file.html evolution

* compliance with Black

* fixing regression, checkbox must float right

partial rollback of 8aaed1ba31cc279444a8fa42e8c6ac473bd438a7

Co-authored-by: Bryan Brancotte <bryan.brancotte@pasteur.fr>
---
 .../templates/bootstrap4/layout/field_file.html   |  6 +++---
 crispy_forms/tests/test_layout.py                 | 15 +++++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/crispy_forms/templates/bootstrap4/layout/field_file.html b/crispy_forms/templates/bootstrap4/layout/field_file.html
index b56413413..34217140b 100644
--- a/crispy_forms/templates/bootstrap4/layout/field_file.html
+++ b/crispy_forms/templates/bootstrap4/layout/field_file.html
@@ -7,8 +7,8 @@
     <div class="input-group-prepend">
         <span class="input-group-text">{{ widget.data.initial_text }}</span>
     </div>
-    <div class="form-control d-flex">
-        <span style="flex-grow: 1;">
+    <div class="form-control d-flex h-auto">
+        <span class="text-break" style="flex-grow:1;min-width:0">
         <a href="{{ field.value.url }}">{{ field.value }}</a>
         </span>
         {% if not widget.data.required %}
@@ -28,7 +28,7 @@
 {% endif %}
     <div class="form-control custom-file{% if field.errors %} is-invalid{%endif%}" style="border:0">
         <input type="{{ widget.data.type }}" name="{{ widget.data.name }}" class="custom-file-input{% if field.errors %} is-invalid{%endif%}" {% if field.field.disabled %}disabled{% endif %} {% for name, value in field.field.widget.attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
-        <label class="custom-file-label" for="{{ field.id_for_label }}">---</label>
+        <label class="custom-file-label text-truncate" for="{{ field.id_for_label }}">---</label>
         <script type="text/javascript" id="script-{{ field.id_for_label }}">        
             document.getElementById("script-{{ field.id_for_label }}").parentNode.querySelector('.custom-file-input').onchange =  function (e){
                 var filenames = "";
diff --git a/crispy_forms/tests/test_layout.py b/crispy_forms/tests/test_layout.py
index 3a177cce1..1b37c4ccf 100644
--- a/crispy_forms/tests/test_layout.py
+++ b/crispy_forms/tests/test_layout.py
@@ -618,14 +618,13 @@ def test_file_field():
     form.helper.use_custom_control = True
     form.helper.layout = Layout("file_field")
     html = render_crispy_form(form)
-    assert (
-        '<div class="form-control custom-file" style="border:0"> <input type="file" name="file_field" '
-        'class="custom-file-input"  > <label class="custom-file-label" for="id_file_field">---</label>' in html
-    )
+    assert '<div class="form-control custom-file"' in html
+    assert '<input type="file" name="file_field" class="custom-file-input"' in html
+    assert '<label class="custom-file-label' in html
+    assert 'for="id_file_field">---</label>' in html
 
     form.helper.use_custom_control = False
     html = render_crispy_form(form)
-    assert (
-        '<div class="form-control custom-file" style="border:0"> <input type="file" name="file_field" '
-        'class="custom-file-input"  > <label class="custom-file-label" for="id_file_field">---</label>' not in html
-    )
+    assert "custom-file" not in html
+    assert "custom-file-input" not in html
+    assert "custom-file-label" not in html