feat(forms): add small size form controls (#1230)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 12, 2022 · cb36161 · cb36161
1 parent e8df7b4
commit cb36161
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 20 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "38.5 kB"
+      "maxSize": "38.75 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -983,8 +983,8 @@ $input-font-weight:                     $font-weight-bold !default;
 $input-line-height:                     $input-btn-line-height !default;
 
 $input-padding-y-sm:                    divide($input-padding-y, 2) !default; // Boosted mod
-$input-padding-x-sm:                    divide($input-padding-y, 2) !default; // Boosted mod
-// Boosted mod: no $input-font-size-sm
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
 
 $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
@@ -1001,7 +1001,7 @@ $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
 
 $input-border-radius:                   $border-radius !default;
-// Boosted mod: no input-sm
+$input-border-radius-sm:                $border-radius-sm !default;
 $input-border-radius-lg:                $border-radius-lg !default;
 
 $input-focus-bg:                        $input-bg !default;
@@ -1138,7 +1138,10 @@ $form-select-box-shadow:          $box-shadow-inset !default;
 $form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
 $form-select-focus-box-shadow:    null !default;
 
-// Boosted mod: no .form-select-sm
+$form-select-padding-y-sm:        add($input-padding-y-sm, 1px) !default; // Boosted mod
+$form-select-padding-x-sm:        $input-padding-x-sm !default;
+$form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $spacer * .5 !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -121,6 +121,7 @@
     outline: 0;
   }
 
+  &.form-control-sm,
   &.form-control-lg {
     padding-right: 0;
     padding-left: 0;
@@ -134,7 +135,19 @@
 //
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
-// Boosted mod: no .form-control-sm
+.form-control-sm {
+  min-height: $input-height-sm;
+  padding: $input-padding-y-sm $input-padding-x-sm add($input-padding-y-sm, 1px); // Boosted mod
+  line-height: $line-height-sm; // Boosted mod
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+
+  &::file-selector-button {
+    padding: add($input-padding-y-sm, 1px) $input-padding-x-sm add($input-padding-y-sm, 3px); // Boosted mod
+    margin: add(-$input-padding-y-sm, -1px) (-$input-padding-x-sm) add(-$input-padding-y-sm, -3px); // Boosted mod
+    margin-inline-end: $input-padding-x-sm;
+  }
+}
 
 .form-control-lg {
   min-height: $input-height-lg;
@@ -157,6 +170,10 @@ textarea {
     min-height: $input-height;
   }
 
+  &.form-control-sm {
+    min-height: $input-height-sm;
+  }
+
   &.form-control-lg {
     min-height: $input-height-lg;
   }

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -55,7 +55,14 @@
   }
 }
 
-// Boosted mod: no .form-select-sm
+.form-select-sm {
+  padding-top: subtract($form-select-padding-y-sm, 1px); // Boosted mod
+  padding-bottom: add($form-select-padding-y-sm, 1px); // Boosted mod
+  padding-left: $form-select-padding-x-sm;
+  @include font-size($form-select-font-size-sm);
+  @include border-radius($form-select-border-radius-sm);
+  line-height: $line-height-sm; // Boosted mod
+}
 
 .form-select-lg {
   padding-top: subtract($form-select-padding-y-lg, 1px); // Boosted mod

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -70,16 +70,25 @@
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
+  line-height: $h5-line-height; // Boosted mod
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
 }
 
-.input-group-lg > .form-select {
-  padding-right: $form-select-padding-x + $form-select-indicator-padding; // Boosted mod: dedupe selector, since no .input-group-sm
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  line-height: $line-height-sm; // Boosted mod
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
 }
 
-// Boosted mod: no .input-group-sm
-
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
 
 // Rounded corners
 //

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -56,4 +56,8 @@
   @include font-size($input-font-size-lg);
 }
 
-// Boosted mod: no .col-form-label-sm
+.col-form-label-sm {
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
+  @include font-size($input-font-size-sm);
+}
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
@@ -57,7 +57,7 @@
 
   .form-control {
     max-width: $quantity-selector-input-sm-max-width;
-    padding: subtract($input-padding-x-sm, 1px) 0 $input-padding-y-sm;
+    padding: subtract($input-padding-y-sm, 1px) 0 $input-padding-y-sm;
     font-size: $font-size-sm;
   }
 }
diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.2/forms/form-control.md
@@ -23,12 +23,12 @@ toc: true
 
 ## Sizing
 
-Set heights using classes like `.form-control-lg`.
+Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 
-<!-- Boosted mod: no .form-control-sm -->
 {{< example >}}
 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
 <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
+<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
 {{< /example >}}
 
 ## Disabled
@@ -98,6 +98,10 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
   <label for="formFileDisabled" class="form-label">Disabled file input example</label>
   <input class="form-control" type="file" id="formFileDisabled" disabled>
 </div>
+<div class="mb-3">
+  <label for="formFileSm" class="form-label">Small file input example</label>
+  <input class="form-control form-control-sm" id="formFileSm" type="file">
+</div>
 <div>
   <label for="formFileLg" class="form-label">Large file input example</label>
   <input class="form-control form-control-lg" id="formFileLg" type="file">

diff --git a/site/content/docs/5.2/forms/input-group.md b/site/content/docs/5.2/forms/input-group.md
@@ -64,8 +64,12 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
 
 **Sizing on the individual input group elements isn't supported.**
 
-<!-- Boosted mod: no .input-group-sm -->
 {{< example >}}
+<div class="input-group input-group-sm mb-3">
+  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
+  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
+</div>
+
 <div class="input-group mb-3">
   <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">

diff --git a/site/content/docs/5.2/forms/layout.md b/site/content/docs/5.2/forms/layout.md
@@ -172,10 +172,15 @@ At times, you maybe need to use margin or padding utilities to create that perfe
 
 ### Horizontal form label sizing
 
-Be sure to use `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg`.
+Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
 
-<!-- Boosted mod: no .col-form-label-sm -->
 {{< example >}}
+<div class="row mb-3">
+  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
+  <div class="col-sm-10">
+    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
+  </div>
+</div>
 <div class="row mb-3">
   <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
   <div class="col-sm-10">

diff --git a/site/content/docs/5.2/forms/select.md b/site/content/docs/5.2/forms/select.md
@@ -23,16 +23,22 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
 
 ## Sizing
 
-You may also use large custom selects to match our similarly sized text inputs.
+You may also choose from small and large custom selects to match our similarly sized text inputs.
 
-<!-- Boosted mod: no .form-select-sm -->
 {{< example >}}
 <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
+
+<select class="form-select form-select-sm" aria-label=".form-select-sm example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
 {{< /example >}}
 
 The `multiple` attribute is also supported:

diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
@@ -75,6 +75,8 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
 
 - <span class="badge bg-success">New</span> Form helpers icon buttons will help you to provide extra help information with the `.form-helper` utility class.
 
+- <span class="badge bg-success">New</span> Small size form controls are now available. Small inputs are defined by their `.form-control-sm`, small selects by their `.form-select-sm`. They can be associated with `.col-form-label-sm` to correctly follow their size if needed. `.input-group-sm` can also be used depending on the context.
+
 ### Examples
 
 - **Cards and Cards RTL**
@@ -106,7 +108,13 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
     <ul>
       <li><code>$form-helper-label-margin-bottom</code></li>
       <li><code>$form-helper-size</code></li>
+      <li><code>$form-select-border-radius-sm</code></li>
+      <li><code>$form-select-font-size-sm</code></li>
+      <li><code>$form-select-padding-x-sm</code></li>
+      <li><code>$form-select-padding-y-sm</code></li>
       <li><code>$helper-icon</code></li>
+      <li><code>$input-border-radius-sm</code></li>
+      <li><code>$input-font-size-sm</code></li>
     </ul>
   </details>