feat(bootstrap): update bootstrap to v5 (#2846)

Signed-off-by: Gary Lockett <gary@creativecow.uk>
ngx-formly · Nov 30, 2021 · 6130804 · 6130804
1 parent 5fc6c85
commit 6130804
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 573 deletions.
diff --git a/UPGRADE-6.0.md b/UPGRADE-6.0.md
@@ -90,7 +90,17 @@ UPGRADE FROM 5.0 to 6.0
 
 @ngx-formly/bootstrap
 ---------------------
- * add-on: The two first argument of `onClick` handler has been replaced by `field` instance.
+- Bootstrap v4 support is removed and replaced with v5 support. To upgrade check the migration documentation [https://getbootstrap.com/docs/5.0/migration/](https://getbootstrap.com/docs/5.0/migration/)
+
+- `formCheck`: `custom` prefix has been removed and replaced by the following values:
+
+  | Before        | After    |
+  | ------------- | -------- |
+  | custom        | default  |
+  | custom-inline | inline   |
+  | custom-switch | switch   |
+
+- add-on: The two first argument of `onClick` handler has been replaced by `field` instance.
 
   ```patch
   - onClick: (to, fieldType, $event) => ...,

diff --git a/demo/src/app/examples/bootstrap-specific/advanced-layout/config.module.ts b/demo/src/app/examples/bootstrap-specific/advanced-layout/config.module.ts
@@ -17,9 +17,9 @@ import { AppComponent } from './app.component';
             {
               title: 'Advanced Layout',
               description: `
-              This is an example of using
-              <code>formGroup</code>s and the
-              <code>className</code> property to have an advanced layout.
+              This is an example of using the
+              <code>fieldGroup</code> and
+              <code>className</code> properties to have an advanced layout.
             `,
               component: AppComponent,
               files: [

diff --git a/demo/src/app/examples/bootstrap-specific/bootstrap-horizontal/horizontal-wrapper.ts b/demo/src/app/examples/bootstrap-specific/bootstrap-horizontal/horizontal-wrapper.ts
@@ -4,7 +4,7 @@ import { FieldWrapper } from '@ngx-formly/core';
 @Component({
   selector: 'formly-horizontal-wrapper',
   template: `
-    <div class="form-group row">
+    <div class="row mb-3">
       <label [attr.for]="id" class="col-sm-2 col-form-label" *ngIf="to.label">
         {{ to.label }}
         <ng-container *ngIf="to.required && to.hideRequiredMarker !== true">*</ng-container>

diff --git a/demo/src/app/examples/form-options/form-state/app.component.html b/demo/src/app/examples/form-options/form-state/app.component.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-3">
   <label>
     <code>formState.disabled</code>
   </label>

diff --git a/demo/src/styles.scss b/demo/src/styles.scss
@@ -1,17 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
 // bootstrap
+html {
+  box-sizing: border-box;
+  -ms-overflow-style: scrollbar;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 @import '~bootstrap/scss/bootstrap-grid';
 @import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/alert';
 @import '~bootstrap/scss/root';
-@import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/input-group';
-@import '~bootstrap/scss/utilities/display';
-@import '~bootstrap/scss/utilities/text';
-@import '~bootstrap/scss/utilities/spacing';
-@import '~bootstrap/scss/custom-forms';
+@import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/card';
+@import '~bootstrap/scss/alert';
 
 legend {
   margin-bottom: 20px;