File chooser size (#30040)

Co-authored-by: David Van Doninck <david.vandoninck@intracto.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

3 files changed, 58 insertions, 4 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8c3c046d41..21b497784e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -747,6 +747,16 @@ $form-file-box-shadow:            $input-box-shadow !default;
 $form-file-button-color:          $form-file-color !default;
 $form-file-button-bg:             $input-group-addon-bg !default;
 
+$form-file-padding-y-sm:          $input-padding-y-sm !default;
+$form-file-padding-x-sm:          $input-padding-x-sm !default;
+$form-file-font-size-sm:          $input-font-size-sm !default;
+$form-file-height-sm:             $input-height-sm !default;
+
+$form-file-padding-y-lg:          $input-padding-y-lg !default;
+$form-file-padding-x-lg:          $input-padding-x-lg !default;
+$form-file-font-size-lg:          $input-font-size-lg !default;
+$form-file-height-lg:             $input-height-lg !default;
+
 
 // Form validation
 
diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
index 8e9c6c4438..947f77aca6 100644
--- a/scss/forms/_form-file.scss
+++ b/scss/forms/_form-file.scss
@@ -7,7 +7,7 @@
   position: relative;
   z-index: 2;
   width: 100%;
-  height: $form-file-height;
+  height: 100%;
   margin: 0;
   opacity: 0;
 
@@ -32,7 +32,7 @@
   left: 0;
   z-index: 1;
   display: flex;
-  height: $form-file-height;
+  height: 100%;
   border-color: $form-file-border-color;
   @include border-radius($form-file-border-radius);
   @include box-shadow($form-file-box-shadow);
@@ -69,3 +69,23 @@
   border-width: $form-file-border-width;
   @include border-right-radius(inherit);
 }
+
+.form-file-sm {
+  height: $form-file-height-sm;
+  @include font-size($form-file-font-size-sm);
+
+  .form-file-text,
+  .form-file-button {
+    padding: $form-file-padding-y-sm $form-file-padding-x-sm;
+  }
+}
+
+.form-file-lg {
+  height: $form-file-height-lg;
+  @include font-size($form-file-font-size-lg);
+
+  .form-file-text,
+  .form-file-button {
+    padding: $form-file-padding-y-lg $form-file-padding-x-lg;
+  }
+}
diff --git a/site/content/docs/4.3/forms/file.md b/site/content/docs/4.3/forms/file.md
index bbf4afd986..466e7b0950 100644
--- a/site/content/docs/4.3/forms/file.md
+++ b/site/content/docs/4.3/forms/file.md
@@ -3,13 +3,15 @@ layout: docs
 title: File browser
 description: Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.
 group: forms
-toc: false
+toc: true
 ---
 
 {{< callout info >}}
-The recommended plugin to animate custom file input: [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input), that's what we are using currently here in our docs.
+The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs.
 {{< /callout >}}
 
+## Default
+
 The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
 
 {{< example >}}
@@ -47,3 +49,25 @@ Longer placeholder text is truncated and an ellipsis is added when there's not e
 {{< /example >}}
 
 We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
+
+## Sizing
+
+You may also choose from small and large file inputs to match our similarly sized text inputs.
+
+{{< example >}}
+<div class="form-file form-file-lg mb-3">
+  <input type="file" class="form-file-input" id="customFileLg">
+  <label class="form-file-label" for="customFileLg">
+    <span class="form-file-text">Choose file...</span>
+    <span class="form-file-button">Browse</span>
+  </label>
+</div>
+
+<div class="form-file form-file-sm">
+  <input type="file" class="form-file-input" id="customFileSm">
+  <label class="form-file-label" for="customFileSm">
+    <span class="form-file-text">Choose file...</span>
+    <span class="form-file-button">Browse</span>
+  </label>
+</div>
+{{< /example >}}