feat(form controls): add support for control sizing of b-form-file,…

… `b-form-checkbox`, and `b-form-radio` (closes #3745) (#3794)

src/_variables.scss

@@ -1,8 +1,62 @@
 // BootstrapVue custom SCSS variables
 //
-// Users can override thes variables in their custom SCSS
+// Users can override these variables in their custom SCSS
 //
 
+// --- Custom inputs (adds sizing support) ---
+
+// Indicator height (and sometimes width)
+$b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
+$b-custom-control-indicator-size-sm: $custom-control-indicator-size * 0.875 !default;
+
+// Indicator background
+$b-custom-control-indicator-bg-size-lg: $custom-control-indicator-bg-size !default;
+$b-custom-control-indicator-bg-size-sm: $custom-control-indicator-bg-size !default;
+
+// Gutter widths
+$b-custom-control-gutter-lg: $custom-control-gutter * 1.25 !default;
+$b-custom-control-gutter-sm: $custom-control-gutter * 0.875 !default;
+
+// Custom radio sizes (uses defaults of 50%, since radios are round)
+$b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default;
+$b-custom-radio-indicator-border-radius-sm: $custom-radio-indicator-border-radius !default;
+
+// Custom checkbox sizes
+$b-custom-checkbox-indicator-border-radius-lg: $border-radius-lg !default;
+$b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
+
+// Custom switch sizes
+$b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
+$b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
+$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg / 2 !default;
+$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm / 2 !default;
+$b-custom-switch-indicator-size-lg: calc(
+  #{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
+) !default;
+$b-custom-switch-indicator-size-sm: calc(
+  #{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
+) !default;
+
+// Custom file sizes
+$b-custom-file-font-size-lg: $input-font-size-lg !default;
+$b-custom-file-font-size-sm: $input-font-size-sm !default;
+$b-custom-file-line-height-lg: $input-line-height-lg !default;
+$b-custom-file-line-height-sm: $input-line-height-sm !default;
+$b-custom-file-height-lg: $input-height-lg !default;
+$b-custom-file-height-sm: $input-height-sm !default;
+$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
+$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
+$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
+$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
+$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
+$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
+$b-custom-file-height-inner-lg: calc(
+  #{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
+) !default;
+$b-custom-file-height-inner-sm: calc(
+  #{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
+) !default;
+
 // --- Tables ---
 
 // Table busy state
@@ -57,7 +111,7 @@ $bv-tooltip-bg-level: null !default;
 
 // --- Popovers ---
 
-// Flag to enable popover variant CSS genearation
+// Flag to enable popover variant CSS generation
 $bv-enable-popover-variants: true !default;
 
 // Popover variant levels wrt theme color value

src/components/form-checkbox/README.md

@@ -167,6 +167,29 @@ or if using individual checkboxes not inside a `<b-form-checkbox-group>`, set th
 <!-- b-form-checkbox-stacked.vue -->
 ```
 
+## Control sizing
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
+
+Use the `size` prop to control the size of the checkbox. The default size is medium. Supported size
+values are `sm` (small) and `lg` (large).
+
+```html
+<div>
+  <b-form-checkbox size="sm">Small</b-form-checkbox>
+  <b-form-checkbox>Default</b-form-checkbox>
+  <b-form-checkbox size="lg">Large</b-form-checkbox>
+</div>
+
+<!-- form-checkbox-sizes.vue -->
+```
+
+Sizes can be set on individual `<b-form-checkbox>` components, or inherited from the size setting of
+`<b-form-checkbox-group>`.
+
+**Note:** Bootstrap v4.x does not natively support sizes for the custom checkbox control. However,
+BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom checkboxes.
+
 ## Checkbox values and `v-model`
 
 By default, `<b-form-checkbox>` value will be `true` when checked and `false` when unchecked. You
@@ -381,6 +404,29 @@ Render groups of checkboxes with the look of a switches by setting the prop `swi
 <!-- b-form-checkboxes-switch-group.vue -->
 ```
 
+### Switch sizing
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
+
+Use the `size` prop to control the size of the switch. The default size is medium. Supported size
+values are `sm` (small) and `lg` (large).
+
+```html
+<div>
+  <b-form-checkbox switch size="sm">Small</b-form-checkbox>
+  <b-form-checkbox switch>Default</b-form-checkbox>
+  <b-form-checkbox switch size="lg">Large</b-form-checkbox>
+</div>
+
+<!-- form-checkbox-switch-sizes.vue -->
+```
+
+Sizes can be set on individual `<b-form-checkbox>` components, or inherited from the size setting of
+`<b-form-checkbox-group>`.
+
+**Note:** Bootstrap v4.x does not natively support sizes for the custom switch control. However,
+BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom switches.
+
 ## Non custom check inputs (plain)
 
 You can have `<b-form-checkbox-group>` or `<b-form-checkbox>` render a browser native checkbox input

src/components/form-checkbox/_form-checkbox.scss

@@ -0,0 +1,125 @@
+// Adds control sizing to bootstrap custom checkbox/switch inputs
+
+.custom-checkbox.b-custom-control-lg,
+.input-group-lg .custom-checkbox {
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+  padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
+
+  .custom-control-label::before {
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
+    width: $b-custom-control-indicator-size-lg;
+    height: $b-custom-control-indicator-size-lg;
+    @include border-radius($b-custom-checkbox-indicator-border-radius-lg);
+  }
+
+  .custom-control-label::after {
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
+    width: $b-custom-control-indicator-size-lg;
+    height: $b-custom-control-indicator-size-lg;
+    background-size: $b-custom-control-indicator-bg-size-lg;
+  }
+}
+
+.custom-checkbox.b-custom-control-sm,
+.input-group-sm .custom-checkbox {
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
+
+  .custom-control-label::before {
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
+    width: $b-custom-control-indicator-size-sm;
+    height: $b-custom-control-indicator-size-sm;
+    @include border-radius($b-custom-checkbox-indicator-border-radius-sm);
+  }
+
+  .custom-control-label::after {
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
+    width: $b-custom-control-indicator-size-sm;
+    height: $b-custom-control-indicator-size-sm;
+    background-size: $b-custom-control-indicator-bg-size-sm;
+  }
+}
+
+.custom-switch.b-custom-control-lg,
+.input-group-lg .custom-switch {
+  padding-left: $b-custom-switch-width-lg + $b-custom-control-gutter-lg;
+
+  .custom-control-label {
+    font-size: $font-size-lg;
+    line-height: $line-height-lg;
+
+    &::before {
+      top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+      height: $b-custom-control-indicator-size-lg;
+      left: -($b-custom-switch-width-lg + $b-custom-control-gutter-lg);
+      width: $b-custom-switch-width-lg;
+      border-radius: $b-custom-switch-indicator-border-radius-lg;
+    }
+
+    &::after {
+      top: calc(
+        #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2)} + #{$custom-control-indicator-border-width *
+          2}
+      );
+      left: calc(
+        #{- ($b-custom-switch-width-lg + $b-custom-control-gutter-lg)} + #{$custom-control-indicator-border-width *
+          2}
+      );
+      width: $b-custom-switch-indicator-size-lg;
+      height: $b-custom-switch-indicator-size-lg;
+      border-radius: $b-custom-switch-indicator-border-radius-lg;
+      background-size: $b-custom-control-indicator-bg-size-lg;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      transform: translateX($b-custom-switch-width-lg - $b-custom-control-indicator-size-lg);
+    }
+  }
+}
+
+.custom-switch.b-custom-control-sm,
+.input-group-sm .custom-switch {
+  padding-left: $b-custom-switch-width-sm + $b-custom-control-gutter-sm;
+
+  .custom-control-label {
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+
+    &::before {
+      top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+      left: -($b-custom-switch-width-sm + $b-custom-control-gutter-sm);
+      width: $b-custom-switch-width-sm;
+      height: $b-custom-control-indicator-size-sm;
+      border-radius: $b-custom-switch-indicator-border-radius-sm;
+    }
+
+    &::after {
+      top: calc(
+        #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2)} + #{$custom-control-indicator-border-width *
+          2}
+      );
+      left: calc(
+        #{- ($b-custom-switch-width-sm + $b-custom-control-gutter-sm)} + #{$custom-control-indicator-border-width *
+          2}
+      );
+      width: $b-custom-switch-indicator-size-sm;
+      height: $b-custom-switch-indicator-size-sm;
+      border-radius: $b-custom-switch-indicator-border-radius-sm;
+      background-size: $b-custom-control-indicator-bg-size-sm;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      transform: translateX($b-custom-switch-width-sm - $b-custom-control-indicator-size-sm);
+    }
+  }
+}

src/components/form-checkbox/index.scss

@@ -1 +1,2 @@
+@import "form-checkbox";
 @import "form-checkbox-group";

src/components/form-checkbox/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Checkbox",
+    "enhanced": true,
     "description": "Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.",
     "components": [
       {

src/components/form-file/README.md

@@ -99,12 +99,46 @@ standard media types.
 
 **Note:** Not all browsers support or respect the `accept` attribute on file inputs.
 
-## Customize the placeholder text
+## Customizing
+
+`<b-form-file>`, when not in ]`plain` mode](#non-custom-file-input), provides several features for
+customizing its appearance.
+
+### Control sizing
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
+
+Use the `size` prop to control the visual size of the input. The default size is considered `md`
+(medium). Optional sizes are `lg` (large) and `sm` (small). These sizes line up with the sizes
+available on other form controls.
+
+```html
+<div>
+  <b-form-group label="Small:" label-for="file-small" label-cols-sm="2" label-size="sm">
+    <b-form-file id="file-small" size="sm"></b-form-file>
+  </b-form-group>
+
+  <b-form-group label="Default:" label-for="file-default" label-cols-sm="2">
+    <b-form-file id="file-default"></b-form-file>
+  </b-form-group>
+
+  <b-form-group label="Large:" label-for="file-large" label-cols-sm="2" label-size="lg">
+    <b-form-file id="file-large" size="lg"></b-form-file>
+  </b-form-group>
+</div>
+
+<!-- form-file-sizes.vue -->
+```
+
+**Note:** Bootstrap v4.x does not natively support sizes for the custom file control. However,
+BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom file input control.
+
+### Customize the placeholder text
 
 Use the prop `placeholder` to change the prompt text that is shown when no files are selected. Only
 plain text is supported. HTML and components are not supported.
 
-## Customize browse button label
+### Customize browse button label
 
 If you want to globally change `Browse` label, you can add something like this to your global
 stylesheets. Also it is advised to use
@@ -119,11 +153,6 @@ stylesheets. Also it is advised to use
 Alternatively you can set the content of the custom file browse button text via the `browse-text`
 prop. Note, only plain text is supported. HTML and components are not supported.
 
-## Customize the formatting of the selected file names
-
-By default, the custom styled file input lists the file names separated by commas. You can customize
-how the file names are shown either via a custom formatter function or the `file-name` scoped slot.
-
 ### File name formatter function
 
 Set the prop `file-name-formatter` to a function that accepts a single argument which is an array of
@@ -225,7 +254,7 @@ assistive technologies.
 
 With inputs of type file, normally the `v-model` is uni-directional (meaning you cannot pre-set the
 selected files). However, you can clear the file input's selected files by setting the `v-model` to
-either `null`, an empty string, or an empty array).
+either `null`, an empty string `''`, or an empty array `[]`).
 
 Alternatively, `<b-form-file>` provides a `reset()` method that can be called to clear the file
 input. To take advantage of the `reset()` method, you will need to obtain a reference to the
@@ -263,6 +292,6 @@ input. To take advantage of the `reset()` method, you will need to obtain a refe
 
 **Implementation note:** As not all browsers allow setting a value of a file input (even to null or
 an empty string), `b-form-input` employs a technique that works cross-browser that involves changing
-the input type to null and then back to type file.
+the input type to `null` and then immediately back to type `file`.
 
 <!-- Component reference added automatically from component package.json -->