Change custom file markup

4 files changed, 55 insertions, 72 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 86edabaa1..ce49f3060 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -315,16 +315,6 @@
   &[disabled] ~ .custom-file-label {
     background-color: $custom-file-disabled-bg;
   }
-
-  @each $lang, $value in $custom-file-text {
-    &:lang(#{$lang}) ~ .custom-file-label::after {
-      content: $value;
-    }
-  }
-
-  ~ .custom-file-label[data-browse]::after {
-    content: attr(data-browse);
-  }
 }
 
 .custom-file-label {
@@ -333,33 +323,43 @@
   right: 0;
   left: 0;
   z-index: 1;
+  display: flex;
   height: $custom-file-height;
+  border-color: $custom-file-border-color;
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+}
+
+.custom-file-text {
+  display: block;
+  flex-grow: 1;
   padding: $custom-file-padding-y $custom-file-padding-x;
+  overflow: hidden;
   font-family: $custom-file-font-family;
   font-weight: $custom-file-font-weight;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   background-color: $custom-file-bg;
-  border: $custom-file-border-width solid $custom-file-border-color;
-  @include border-radius($custom-file-border-radius);
-  @include box-shadow($custom-file-box-shadow);
+  border-color: inherit;
+  border-style: solid;
+  border-width: $custom-file-border-width;
+  @include border-left-radius(inherit);
+}
 
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 3;
-    display: block;
-    height: $custom-file-height-inner;
-    padding: $custom-file-padding-y $custom-file-padding-x;
-    line-height: $custom-file-line-height;
-    color: $custom-file-button-color;
-    content: "Browse";
-    @include gradient-bg($custom-file-button-bg);
-    border-left: inherit;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
-  }
+.custom-file-button {
+  display: block;
+  flex-shrink: 0;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  margin-left: -$custom-file-border-width;
+  line-height: $custom-file-line-height;
+  color: $custom-file-button-color;
+  @include gradient-bg($custom-file-button-bg);
+  border-color: inherit;
+  border-style: solid;
+  border-width: $custom-file-border-width;
+  @include border-right-radius(inherit);
 }
 
 // Range
@@ -507,6 +507,8 @@
 
 .custom-control-label::before,
 .custom-file-label,
+.custom-file-text,
+.custom-file-button,
 .custom-select {
   @include transition($custom-forms-transition);
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 48d82f67a..aea16fc64 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -622,7 +622,6 @@ $custom-range-thumb-active-bg:               lighten($component-active-bg, 35%)
 $custom-range-thumb-disabled-bg:             $gray-500 !default;
 
 $custom-file-height:                $input-height !default;
-$custom-file-height-inner:          $input-height-inner !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
 $custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
 $custom-file-disabled-bg:           $input-disabled-bg !default;
@@ -640,9 +639,6 @@ $custom-file-border-radius:         $input-border-radius !default;
 $custom-file-box-shadow:            $input-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
-$custom-file-text: (
-  en: "Browse"
-) !default;
 
 
 // Form validation
diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md
index 767531c14..e48f5bc12 100644
--- a/site/content/docs/4.3/components/forms.md
+++ b/site/content/docs/4.3/components/forms.md
@@ -1011,7 +1011,10 @@ Validation styles are available for the following form controls and components:
 
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="validatedCustomFile" required>
-    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
+    <label class="custom-file-label" for="validatedCustomFile">
+      <span class="custom-file-text">Choose file...</span>
+      <span class="custom-file-button">Browse</span>
+    </label>
     <div class="invalid-feedback">Example invalid custom file feedback</div>
   </div>
 </form>
@@ -1293,41 +1296,11 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
 {{< example >}}
 <div class="custom-file">
   <input type="file" class="custom-file-input" id="customFile">
-  <label class="custom-file-label" for="customFile">Choose file</label>
+  <label class="custom-file-label" for="customFile">
+    <span class="custom-file-text">Choose file...</span>
+    <span class="custom-file-button">Browse</span>
+  </label>
 </div>
 {{< /example >}}
 
 We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
-
-#### Translating or customizing the strings with SCSS
-
-The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
-
-{{< highlight scss >}}
-$custom-file-text: (
-  en: "Browse",
-  es: "Elegir"
-);
-{{< /highlight >}}
-
-Here's `lang(es)` in action on the custom file input for a Spanish translation:
-
-{{< example >}}
-<div class="custom-file">
-  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
-  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
-</div>
-{{< /example >}}
-
-You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
-
-#### Translating or customizing the strings with HTML
-
-Bootstrap also provides a way to translate the "Browse" text in HTML with the `data-browse` attribute which can be added to the custom input label (example in Dutch):
-
-{{< example >}}
-<div class="custom-file">
-  <input type="file" class="custom-file-input" id="customFileLangHTML">
-  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
-</div>
-{{< /example >}}
diff --git a/site/content/docs/4.3/components/input-group.md b/site/content/docs/4.3/components/input-group.md
index 1af67621b..bf6a6f022 100644
--- a/site/content/docs/4.3/components/input-group.md
+++ b/site/content/docs/4.3/components/input-group.md
@@ -322,14 +322,20 @@ Input groups include support for custom selects and custom file inputs. Browser
   </div>
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
-    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
+    <label class="custom-file-label" for="inputGroupFile01">
+      <span class="custom-file-text">Choose file...</span>
+      <span class="custom-file-button">Browse</span>
+    </label>
   </div>
 </div>
 
 <div class="input-group mb-3">
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="inputGroupFile02">
-    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
+    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
+      <span class="custom-file-text">Choose file...</span>
+      <span class="custom-file-button">Browse</span>
+    </label>
   </div>
   <div class="input-group-append">
     <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
@@ -342,14 +348,20 @@ Input groups include support for custom selects and custom file inputs. Browser
   </div>
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
-    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
+    <label class="custom-file-label" for="inputGroupFile03">
+      <span class="custom-file-text">Choose file...</span>
+      <span class="custom-file-button">Browse</span>
+    </label>
   </div>
 </div>
 
 <div class="input-group">
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
-    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
+    <label class="custom-file-label" for="inputGroupFile04">
+      <span class="custom-file-text">Choose file...</span>
+      <span class="custom-file-button">Browse</span>
+    </label>
   </div>
   <div class="input-group-append">
     <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>