Skip to content

Commit 962d450

Browse files
tkrotofftkrotoff
committed
Upgrade Bootstrap from v4 to v5
1 parent 4064f77 commit 962d450

File tree

6 files changed

+33
-165
lines changed

6 files changed

+33
-165
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## Next
2+
3+
### Breaking Changes
4+
5+
- Upgrade Bootstrap from v4 to v5
6+
17
## v0.17.0 (2021/05/16)
28

39
### Breaking Changes

‎examples/Bootstrap/App.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function Form() {
9494

9595
return (
9696
<FormWithConstraints ref={form} onSubmit={handleSubmit} noValidate>
97-
<div className="form-group">
97+
<div className="mb-3">
9898
<label htmlFor="username">
9999
Username <small>(already taken: john, paul, george, ringo)</small>
100100
</label>
@@ -116,7 +116,7 @@ function Form() {
116116
pending={<span className="d-block">...</span>}
117117
then={available =>
118118
available ? (
119-
<FieldFeedback key="1" info style={{ color: '#28a745' }}>
119+
<FieldFeedback key="1" info style={{ color: '#198754' /* $green */ }}>
120120
Username available
121121
</FieldFeedback>
122122
) : (
@@ -127,7 +127,7 @@ function Form() {
127127
<FieldFeedback when="valid">Looks good!</FieldFeedback>
128128
</FieldFeedbacks>
129129
</div>
130-
<div className="form-group">
130+
<div className="mb-3">
131131
<label htmlFor="password">Password</label>
132132
<Input
133133
type="password"
@@ -158,7 +158,7 @@ function Form() {
158158
<FieldFeedback when="valid">Looks good!</FieldFeedback>
159159
</FieldFeedbacks>
160160
</div>
161-
<div className="form-group">
161+
<div className="mb-3">
162162
<label htmlFor="password-confirm">Confirm Password</label>
163163
<Input
164164
type="password"

‎examples/Bootstrap/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"test:e2e": "jest --config jest-e2e.config.js --verbose"
2222
},
2323
"dependencies": {
24-
"bootstrap": "^4.5.3",
24+
"bootstrap": "^5.0.1",
2525
"core-js": "^3.6.5",
2626
"lodash-es": "^4.17.15",
2727
"raf": "^3.4.1",

‎packages/react-form-with-constraints-bootstrap/scss/bootstrap.scss‎

Lines changed: 14 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,15 @@
1-
// Bootstrap 4 likes to hide feedbacks, we don't like it, especially react-form-with-constraints-tools's DisplayFields
2-
// [.invalid-feedback doesn't show for .input-group with an invalid control](https://github.com/twbs/bootstrap/issues/23454)
3-
.valid-feedback,
4-
.invalid-feedback {
5-
// stylelint-disable-next-line declaration-no-important
6-
display: block !important; // [Is there an opposite to display:none?](https://stackoverflow.com/a/37289654/990356)
7-
}
8-
9-
// stylelint-disable max-nesting-depth
10-
11-
// [v4-beta form-validation-state() mixin does not work](https://github.com/twbs/bootstrap/issues/23371)
12-
// [Fix form-validation-state() for unknown pseudo classes](https://github.com/twbs/bootstrap/pull/27409)
13-
// [ability to generate warning form state](https://github.com/twbs/bootstrap/pull/26471)
14-
// Taken and adapted from https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_forms.scss#L29
15-
// Commented lines: 'display: none' + '.was-validated &:#{$state}'
16-
@mixin form-validation-state2($state, $color) {
17-
.#{$state}-feedback {
18-
//display: none;
19-
width: 100%;
20-
margin-top: $form-feedback-margin-top;
21-
font-size: $form-feedback-font-size;
22-
color: $color;
23-
}
24-
25-
.#{$state}-tooltip {
26-
position: absolute;
27-
top: 100%;
28-
z-index: 5;
29-
display: none;
30-
max-width: 100%; // Contain to parent when possible
31-
padding: $tooltip-padding-y $tooltip-padding-x;
32-
margin-top: 0.1rem;
33-
font-size: $tooltip-font-size;
34-
line-height: $line-height-base;
35-
color: color-yiq($color);
36-
background-color: rgba($color, $tooltip-opacity);
37-
@include border-radius($tooltip-border-radius);
38-
}
39-
40-
.form-control,
41-
.custom-select {
42-
//.was-validated &:#{$state},
43-
&.is-#{$state} {
44-
border-color: $color;
45-
46-
&:focus {
47-
border-color: $color;
48-
box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
49-
}
50-
51-
~ .#{$state}-feedback,
52-
~ .#{$state}-tooltip {
53-
display: block;
54-
}
55-
}
56-
}
57-
58-
.form-control-file {
59-
//.was-validated &:#{$state},
60-
&.is-#{$state} {
61-
~ .#{$state}-feedback,
62-
~ .#{$state}-tooltip {
63-
display: block;
64-
}
65-
}
66-
}
67-
68-
.form-check-input {
69-
//.was-validated &:#{$state},
70-
&.is-#{$state} {
71-
~ .form-check-label {
72-
color: $color;
73-
}
74-
75-
~ .#{$state}-feedback,
76-
~ .#{$state}-tooltip {
77-
display: block;
78-
}
79-
}
80-
}
81-
82-
.custom-control-input {
83-
//.was-validated &:#{$state},
84-
&.is-#{$state} {
85-
~ .custom-control-label {
86-
color: $color;
87-
88-
&::before {
89-
background-color: lighten($color, 25%);
90-
}
91-
}
92-
93-
~ .#{$state}-feedback,
94-
~ .#{$state}-tooltip {
95-
display: block;
96-
}
97-
98-
&:checked {
99-
~ .custom-control-label::before {
100-
@include gradient-bg(lighten($color, 10%));
101-
}
102-
}
103-
104-
&:focus {
105-
~ .custom-control-label::before {
106-
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, 0.25);
107-
}
108-
}
109-
}
110-
}
111-
112-
// custom file
113-
.custom-file-input {
114-
//.was-validated &:#{$state},
115-
&.is-#{$state} {
116-
~ .custom-file-label {
117-
border-color: $color;
118-
119-
&::after {
120-
border-color: inherit;
121-
}
122-
}
123-
124-
~ .#{$state}-feedback,
125-
~ .#{$state}-tooltip {
126-
display: block;
127-
}
128-
129-
&:focus {
130-
~ .custom-file-label {
131-
box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
132-
}
133-
}
134-
}
135-
}
136-
}
137-
138-
// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L572
139-
// $form-feedback-valid-color => $success => $green => #28a745
140-
// $form-feedback-invalid-color => $danger => $red => #dc3545
141-
$form-feedback-warning-color: theme-color('warning') !default; // $yellow => #ffc107
142-
$form-feedback-info-color: theme-color('info') !default; // $cyan => #17a2b8
143-
144-
// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_forms.scss#L243
1+
// FIXME Bootstrap 5.0.1 form-validation-state mixin needs an icon
2+
// We should submit a PR to remove this requirement
3+
$empty-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>");
4+
5+
// https://github.com/twbs/bootstrap/blob/v5.0.1/scss/_variables.scss#L884-L893
6+
// https://github.com/twbs/bootstrap/blob/v5.0.1/scss/mixins/_forms.scss#L18
7+
@include form-validation-state('info', $info, $empty-icon);
8+
@include form-validation-state('warning', $warning, $empty-icon);
1459
// The order matters: invalid should be the last to override the other CSS rules
146-
// @include form-validation-state("valid", $form-feedback-valid-color);
147-
// @include form-validation-state("invalid", $form-feedback-invalid-color);
148-
@include form-validation-state2('info', $form-feedback-info-color);
149-
@include form-validation-state2('warning', $form-feedback-warning-color);
150-
@include form-validation-state2('valid', $form-feedback-valid-color);
151-
@include form-validation-state2('invalid', $form-feedback-invalid-color);
10+
@include form-validation-state('valid', $form-feedback-valid-color, $form-feedback-icon-valid);
11+
@include form-validation-state(
12+
'invalid',
13+
$form-feedback-invalid-color,
14+
$form-feedback-icon-invalid
15+
);

‎packages/react-form-with-constraints-bootstrap/src/Bootstrap.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ import {
1010

1111
// ## Error
1212
//
13-
// - Bootstrap 4 "input.form-control.is-invalid":
14-
// https://getbootstrap.com/docs/4.1/components/forms/#server-side
15-
// https://github.com/twbs/bootstrap/blob/v4.1.2/scss/_forms.scss#L245
13+
// - Bootstrap 5 "input.form-control.is-invalid":
14+
// https://getbootstrap.com/docs/5.0/forms/validation/#server-side
1615
//
1716
// ## Warning
1817
//
@@ -40,9 +39,8 @@ import {
4039
//
4140
// ## WhenValid
4241
//
43-
// - Bootstrap 4 "input.form-control.is-valid":
44-
// https://getbootstrap.com/docs/4.1/components/forms/#server-side
45-
// https://github.com/twbs/bootstrap/blob/v4.1.2/scss/_forms.scss#L245
42+
// - Bootstrap 5 "input.form-control.is-valid":
43+
// https://getbootstrap.com/docs/5.0/forms/validation/#server-side
4644

4745
export class FieldFeedback extends _FieldFeedback {
4846
static defaultProps: FieldFeedbackProps = {

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4038,10 +4038,10 @@ boolbase@~1.0.0:
40384038
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
40394039
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
40404040

4041-
bootstrap@^4.5.3:
4042-
version "4.5.3"
4043-
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
4044-
integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
4041+
bootstrap@^5.0.1:
4042+
version "5.0.1"
4043+
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.1.tgz#e7939d599119dc818a90478a2a299bdaff037e09"
4044+
integrity sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==
40454045

40464046
boxen@^4.2.0:
40474047
version "4.2.0"

0 commit comments

Comments
 (0)