From 64a5987cc0927f4d1efecb7e1407d3bc3d6c23af Mon Sep 17 00:00:00 2001
From: Zedicius <david.van.doninck@gmail.com>
Date: Mon, 23 Mar 2020 18:36:54 +0100
Subject: 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>
---
 site/content/docs/4.3/forms/file.md | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

(limited to 'site/content')

diff --git a/site/content/docs/4.3/forms/file.md b/site/content/docs/4.3/forms/file.md
index bbf4afd98..466e7b095 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 >}}
-- 
cgit v1.2.3