Skip to content

Commit 18c3957

Browse files
tmorehousetmorehouse
authored
feat(form controls): add support for control sizing of b-form-file, b-form-checkbox, and b-form-radio (closes #3745) (#3794)
1 parent 6b3329d commit 18c3957

File tree

19 files changed

+603
-101
lines changed

19 files changed

+603
-101
lines changed

‎src/_variables.scss

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,62 @@
11
// BootstrapVue custom SCSS variables
22
//
3-
// Users can override thes variables in their custom SCSS
3+
// Users can override these variables in their custom SCSS
44
//
55

6+
// --- Custom inputs (adds sizing support) ---
7+
8+
// Indicator height (and sometimes width)
9+
$b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
10+
$b-custom-control-indicator-size-sm: $custom-control-indicator-size * 0.875 !default;
11+
12+
// Indicator background
13+
$b-custom-control-indicator-bg-size-lg: $custom-control-indicator-bg-size !default;
14+
$b-custom-control-indicator-bg-size-sm: $custom-control-indicator-bg-size !default;
15+
16+
// Gutter widths
17+
$b-custom-control-gutter-lg: $custom-control-gutter * 1.25 !default;
18+
$b-custom-control-gutter-sm: $custom-control-gutter * 0.875 !default;
19+
20+
// Custom radio sizes (uses defaults of 50%, since radios are round)
21+
$b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default;
22+
$b-custom-radio-indicator-border-radius-sm: $custom-radio-indicator-border-radius !default;
23+
24+
// Custom checkbox sizes
25+
$b-custom-checkbox-indicator-border-radius-lg: $border-radius-lg !default;
26+
$b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
27+
28+
// Custom switch sizes
29+
$b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
30+
$b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
31+
$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg / 2 !default;
32+
$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm / 2 !default;
33+
$b-custom-switch-indicator-size-lg: calc(
34+
#{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
35+
) !default;
36+
$b-custom-switch-indicator-size-sm: calc(
37+
#{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
38+
) !default;
39+
40+
// Custom file sizes
41+
$b-custom-file-font-size-lg: $input-font-size-lg !default;
42+
$b-custom-file-font-size-sm: $input-font-size-sm !default;
43+
$b-custom-file-line-height-lg: $input-line-height-lg !default;
44+
$b-custom-file-line-height-sm: $input-line-height-sm !default;
45+
$b-custom-file-height-lg: $input-height-lg !default;
46+
$b-custom-file-height-sm: $input-height-sm !default;
47+
$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
48+
$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
49+
$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
50+
$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
51+
$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
52+
$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
53+
$b-custom-file-height-inner-lg: calc(
54+
#{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
55+
) !default;
56+
$b-custom-file-height-inner-sm: calc(
57+
#{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
58+
) !default;
59+
660
// --- Tables ---
761

862
// Table busy state
@@ -57,7 +111,7 @@ $bv-tooltip-bg-level: null !default;
57111

58112
// --- Popovers ---
59113

60-
// Flag to enable popover variant CSS genearation
114+
// Flag to enable popover variant CSS generation
61115
$bv-enable-popover-variants: true !default;
62116

63117
// Popover variant levels wrt theme color value

‎src/components/form-checkbox/README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,29 @@ or if using individual checkboxes not inside a `<b-form-checkbox-group>`, set th
167167
<!-- b-form-checkbox-stacked.vue -->
168168
```
169169

170+
## Control sizing
171+
172+
<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
173+
174+
Use the `size` prop to control the size of the checkbox. The default size is medium. Supported size
175+
values are `sm` (small) and `lg` (large).
176+
177+
```html
178+
<div>
179+
<b-form-checkbox size="sm">Small</b-form-checkbox>
180+
<b-form-checkbox>Default</b-form-checkbox>
181+
<b-form-checkbox size="lg">Large</b-form-checkbox>
182+
</div>
183+
184+
<!-- form-checkbox-sizes.vue -->
185+
```
186+
187+
Sizes can be set on individual `<b-form-checkbox>` components, or inherited from the size setting of
188+
`<b-form-checkbox-group>`.
189+
190+
**Note:** Bootstrap v4.x does not natively support sizes for the custom checkbox control. However,
191+
BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom checkboxes.
192+
170193
## Checkbox values and `v-model`
171194

172195
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
381404
<!-- b-form-checkboxes-switch-group.vue -->
382405
```
383406

407+
### Switch sizing
408+
409+
<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
410+
411+
Use the `size` prop to control the size of the switch. The default size is medium. Supported size
412+
values are `sm` (small) and `lg` (large).
413+
414+
```html
415+
<div>
416+
<b-form-checkbox switch size="sm">Small</b-form-checkbox>
417+
<b-form-checkbox switch>Default</b-form-checkbox>
418+
<b-form-checkbox switch size="lg">Large</b-form-checkbox>
419+
</div>
420+
421+
<!-- form-checkbox-switch-sizes.vue -->
422+
```
423+
424+
Sizes can be set on individual `<b-form-checkbox>` components, or inherited from the size setting of
425+
`<b-form-checkbox-group>`.
426+
427+
**Note:** Bootstrap v4.x does not natively support sizes for the custom switch control. However,
428+
BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom switches.
429+
384430
## Non custom check inputs (plain)
385431

386432
You can have `<b-form-checkbox-group>` or `<b-form-checkbox>` render a browser native checkbox input

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// Adds control sizing to bootstrap custom checkbox/switch inputs
2+
3+
.custom-checkbox.b-custom-control-lg,
4+
.input-group-lg .custom-checkbox {
5+
font-size: $font-size-lg;
6+
line-height: $line-height-lg;
7+
padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
8+
9+
.custom-control-label::before {
10+
top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
11+
left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
12+
width: $b-custom-control-indicator-size-lg;
13+
height: $b-custom-control-indicator-size-lg;
14+
@include border-radius($b-custom-checkbox-indicator-border-radius-lg);
15+
}
16+
17+
.custom-control-label::after {
18+
top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
19+
left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
20+
width: $b-custom-control-indicator-size-lg;
21+
height: $b-custom-control-indicator-size-lg;
22+
background-size: $b-custom-control-indicator-bg-size-lg;
23+
}
24+
}
25+
26+
.custom-checkbox.b-custom-control-sm,
27+
.input-group-sm .custom-checkbox {
28+
font-size: $font-size-sm;
29+
line-height: $line-height-sm;
30+
padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
31+
32+
.custom-control-label::before {
33+
top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
34+
left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
35+
width: $b-custom-control-indicator-size-sm;
36+
height: $b-custom-control-indicator-size-sm;
37+
@include border-radius($b-custom-checkbox-indicator-border-radius-sm);
38+
}
39+
40+
.custom-control-label::after {
41+
top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
42+
left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
43+
width: $b-custom-control-indicator-size-sm;
44+
height: $b-custom-control-indicator-size-sm;
45+
background-size: $b-custom-control-indicator-bg-size-sm;
46+
}
47+
}
48+
49+
.custom-switch.b-custom-control-lg,
50+
.input-group-lg .custom-switch {
51+
padding-left: $b-custom-switch-width-lg + $b-custom-control-gutter-lg;
52+
53+
.custom-control-label {
54+
font-size: $font-size-lg;
55+
line-height: $line-height-lg;
56+
57+
&::before {
58+
top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
59+
height: $b-custom-control-indicator-size-lg;
60+
left: -($b-custom-switch-width-lg + $b-custom-control-gutter-lg);
61+
width: $b-custom-switch-width-lg;
62+
border-radius: $b-custom-switch-indicator-border-radius-lg;
63+
}
64+
65+
&::after {
66+
top: calc(
67+
#{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2)} + #{$custom-control-indicator-border-width *
68+
2}
69+
);
70+
left: calc(
71+
#{- ($b-custom-switch-width-lg + $b-custom-control-gutter-lg)} + #{$custom-control-indicator-border-width *
72+
2}
73+
);
74+
width: $b-custom-switch-indicator-size-lg;
75+
height: $b-custom-switch-indicator-size-lg;
76+
border-radius: $b-custom-switch-indicator-border-radius-lg;
77+
background-size: $b-custom-control-indicator-bg-size-lg;
78+
}
79+
}
80+
81+
.custom-control-input:checked ~ .custom-control-label {
82+
&::after {
83+
transform: translateX($b-custom-switch-width-lg - $b-custom-control-indicator-size-lg);
84+
}
85+
}
86+
}
87+
88+
.custom-switch.b-custom-control-sm,
89+
.input-group-sm .custom-switch {
90+
padding-left: $b-custom-switch-width-sm + $b-custom-control-gutter-sm;
91+
92+
.custom-control-label {
93+
font-size: $font-size-sm;
94+
line-height: $line-height-sm;
95+
96+
&::before {
97+
top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
98+
left: -($b-custom-switch-width-sm + $b-custom-control-gutter-sm);
99+
width: $b-custom-switch-width-sm;
100+
height: $b-custom-control-indicator-size-sm;
101+
border-radius: $b-custom-switch-indicator-border-radius-sm;
102+
}
103+
104+
&::after {
105+
top: calc(
106+
#{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2)} + #{$custom-control-indicator-border-width *
107+
2}
108+
);
109+
left: calc(
110+
#{- ($b-custom-switch-width-sm + $b-custom-control-gutter-sm)} + #{$custom-control-indicator-border-width *
111+
2}
112+
);
113+
width: $b-custom-switch-indicator-size-sm;
114+
height: $b-custom-switch-indicator-size-sm;
115+
border-radius: $b-custom-switch-indicator-border-radius-sm;
116+
background-size: $b-custom-control-indicator-bg-size-sm;
117+
}
118+
}
119+
120+
.custom-control-input:checked ~ .custom-control-label {
121+
&::after {
122+
transform: translateX($b-custom-switch-width-sm - $b-custom-control-indicator-size-sm);
123+
}
124+
}
125+
}

‎src/components/form-checkbox/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
@import "form-checkbox";
12
@import "form-checkbox-group";

‎src/components/form-checkbox/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0",
44
"meta": {
55
"title": "Form Checkbox",
6+
"enhanced": true,
67
"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.",
78
"components": [
89
{

‎src/components/form-file/README.md

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,46 @@ standard media types.
9999

100100
**Note:** Not all browsers support or respect the `accept` attribute on file inputs.
101101

102-
## Customize the placeholder text
102+
## Customizing
103+
104+
`<b-form-file>`, when not in ]`plain` mode](#non-custom-file-input), provides several features for
105+
customizing its appearance.
106+
107+
### Control sizing
108+
109+
<span class="badge badge-info small">NEW in 2.0.0-rc.28</span>
110+
111+
Use the `size` prop to control the visual size of the input. The default size is considered `md`
112+
(medium). Optional sizes are `lg` (large) and `sm` (small). These sizes line up with the sizes
113+
available on other form controls.
114+
115+
```html
116+
<div>
117+
<b-form-group label="Small:" label-for="file-small" label-cols-sm="2" label-size="sm">
118+
<b-form-file id="file-small" size="sm"></b-form-file>
119+
</b-form-group>
120+
121+
<b-form-group label="Default:" label-for="file-default" label-cols-sm="2">
122+
<b-form-file id="file-default"></b-form-file>
123+
</b-form-group>
124+
125+
<b-form-group label="Large:" label-for="file-large" label-cols-sm="2" label-size="lg">
126+
<b-form-file id="file-large" size="lg"></b-form-file>
127+
</b-form-group>
128+
</div>
129+
130+
<!-- form-file-sizes.vue -->
131+
```
132+
133+
**Note:** Bootstrap v4.x does not natively support sizes for the custom file control. However,
134+
BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom file input control.
135+
136+
### Customize the placeholder text
103137

104138
Use the prop `placeholder` to change the prompt text that is shown when no files are selected. Only
105139
plain text is supported. HTML and components are not supported.
106140

107-
## Customize browse button label
141+
### Customize browse button label
108142

109143
If you want to globally change `Browse` label, you can add something like this to your global
110144
stylesheets. Also it is advised to use
@@ -119,11 +153,6 @@ stylesheets. Also it is advised to use
119153
Alternatively you can set the content of the custom file browse button text via the `browse-text`
120154
prop. Note, only plain text is supported. HTML and components are not supported.
121155

122-
## Customize the formatting of the selected file names
123-
124-
By default, the custom styled file input lists the file names separated by commas. You can customize
125-
how the file names are shown either via a custom formatter function or the `file-name` scoped slot.
126-
127156
### File name formatter function
128157

129158
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.
225254

226255
With inputs of type file, normally the `v-model` is uni-directional (meaning you cannot pre-set the
227256
selected files). However, you can clear the file input's selected files by setting the `v-model` to
228-
either `null`, an empty string, or an empty array).
257+
either `null`, an empty string `''`, or an empty array `[]`).
229258

230259
Alternatively, `<b-form-file>` provides a `reset()` method that can be called to clear the file
231260
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
263292

264293
**Implementation note:** As not all browsers allow setting a value of a file input (even to null or
265294
an empty string), `b-form-input` employs a technique that works cross-browser that involves changing
266-
the input type to null and then back to type file.
295+
the input type to `null` and then immediately back to type `file`.
267296

268297
<!-- Component reference added automatically from component package.json -->

0 commit comments

Comments
 (0)