[v6] Add react-bootstrap theme to replace bootstrap-4 (#3638) (#3974)

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -24,11 +24,11 @@ body:
       options:
         - core
         - antd
-        - bootstrap-4
         - chakra-ui
         - fluent-ui
         - material-ui
         - mui
+        - react-bootstrap
         - semantic-ui
         - utils
         - validator-ajv6

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -18,11 +18,11 @@ body:
       options:
         - core
         - antd
-        - bootstrap-4
         - chakra-ui
         - fluent-ui
         - material-ui
         - mui
+        - react-bootstrap
         - semantic-ui
         - utils
         - validator-ajv6

.github/ISSUE_TEMPLATE/question_issue.yml

@@ -18,11 +18,11 @@ body:
       options:
         - core
         - antd
-        - bootstrap-4
         - chakra-ui
         - fluent-ui
         - material-ui
         - mui
+        - react-bootstrap
         - semantic-ui
         - utils
         - validator-ajv6

CHANGELOG.md

@@ -15,6 +15,21 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.0.0-beta.1
+
+## @rjsf/bootstrap-4
+
+- Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6.
+
+## @rjsf/react-bootstrap
+
+- Added new package to replace `@rjsf/bootstrap-4`
+- `react-bootstrap` peer dependency bumped to `^2.0.0`, corresponding to Bootstrap 5
+- CheckboxesWidget: Remove deprecated prop `custom`
+- IconButton: Remove deprecated `block` prop
+- RangeWidget: Use `FormRange` component
+- SelectWidget: Use new FormSelect component, remove `bsPrefix` prop to achieve correct styling
+
 # 5.15.1
 
 ## @rjsf/core

README.md

@@ -29,7 +29,7 @@
 
 - [Ant Design](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/antd)
 - [Bootstrap 3](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/core)
-- [Bootstrap 4](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/bootstrap-4)
+- [React-Bootstrap (Bootstrap 5)](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/react-bootstrap)
 - [Chakra UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/chakra-ui)
 - [Fluent UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/fluent-ui)
 - [Fluent UI 9](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/fluentui-rc)

package.json

@@ -61,7 +61,6 @@
   },
   "workspaces": [
     "packages/antd",
-    "packages/bootstrap-4",
     "packages/chakra-ui",
     "packages/core",
     "packages/docs",
@@ -70,6 +69,7 @@
     "packages/material-ui",
     "packages/mui",
     "packages/playground",
+    "packages/react-bootstrap",
     "packages/semantic-ui",
     "packages/utils",
     "packages/validator-ajv6",

packages/docs/docs/usage/themes.md

@@ -5,17 +5,17 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form
 
 ## Supported themes
 
-| Theme Name            | Status    | Package Name / Link |
-| --------------------- | --------- | ------------------- |
-| antd                  | Published | `@rjsf/antd`        |
-| Bootstrap 3 (default) | Published | `@rjsf/core`        |
-| Bootstrap 4           | Published | `@rjsf/bootstrap-4` |
-| Chakra UI             | Published | `@rjsf/chakra-ui`   |
-| fluent-ui             | Published | `@rjsf/fluent-ui`   |
-| fluentui-rc           | Published | `@rjsf/fluentui-rc` |
-| material-ui 4         | Published | `@rjsf/material-ui` |
-| material-ui 5         | Published | `@rjsf/mui`         |
-| Semantic UI           | Published | `@rjsf/semantic-ui` |
+| Theme Name            | Status    | Package Name / Link     |
+| --------------------- | --------- | ----------------------- |
+| antd                  | Published | `@rjsf/antd`            |
+| Bootstrap 3 (default) | Published | `@rjsf/core`            |
+| react-bootstrap       | Published | `@rjsf/react-bootstrap` |
+| Chakra UI             | Published | `@rjsf/chakra-ui`       |
+| fluent-ui             | Published | `@rjsf/fluent-ui`       |
+| fluentui-rc           | Published | `@rjsf/fluentui-rc`     |
+| material-ui 4         | Published | `@rjsf/material-ui`     |
+| material-ui 5         | Published | `@rjsf/mui`             |
+| Semantic UI           | Published | `@rjsf/semantic-ui`     |
 
 ## Using themes
 

packages/playground/package.json

@@ -41,13 +41,13 @@
     "@material-ui/core": "^4.12.4",
     "@mui/material": "^5.14.8",
     "@rjsf/antd": "^5.15.0",
-    "@rjsf/bootstrap-4": "^5.15.0",
     "@rjsf/chakra-ui": "^5.15.0",
     "@rjsf/core": "^5.15.0",
     "@rjsf/fluent-ui": "^5.15.0",
     "@rjsf/fluentui-rc": "^5.15.0",
     "@rjsf/material-ui": "^5.15.0",
     "@rjsf/mui": "^5.15.0",
+    "@rjsf/react-bootstrap": "file:../react-bootstrap",
     "@rjsf/semantic-ui": "^5.15.0",
     "@rjsf/utils": "^5.15.0",
     "@rjsf/validator-ajv6": "^5.15.0",

packages/playground/src/app.tsx

@@ -4,7 +4,7 @@ import { Theme as FluentUITheme } from '@rjsf/fluent-ui';
 import { Theme as FluentUIRCTheme } from '@rjsf/fluentui-rc';
 import { Theme as SuiTheme } from '@rjsf/semantic-ui';
 import { Theme as AntdTheme } from '@rjsf/antd';
-import { Theme as Bootstrap4Theme } from '@rjsf/bootstrap-4';
+import { Theme as BootstrapTheme } from '@rjsf/react-bootstrap';
 import { Theme as ChakraUITheme } from '@rjsf/chakra-ui';
 import v8Validator, { customizeValidator } from '@rjsf/validator-ajv8';
 import v6Validator from '@rjsf/validator-ajv6';
@@ -93,10 +93,6 @@ const themes: PlaygroundProps['themes'] = {
     stylesheet: '//cdnjs.cloudflare.com/ajax/libs/antd/4.1.4/antd.min.css',
     theme: AntdTheme,
   },
-  'bootstrap-4': {
-    stylesheet: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
-    theme: Bootstrap4Theme,
-  },
   'chakra-ui': {
     stylesheet: '',
     theme: ChakraUITheme,
@@ -117,6 +113,10 @@ const themes: PlaygroundProps['themes'] = {
     stylesheet: '',
     theme: MuiV5Theme,
   },
+  'react-bootstrap': {
+    stylesheet: '//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
+    theme: BootstrapTheme,
+  },
   'semantic-ui': {
     stylesheet: '//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css',
     theme: SuiTheme,

packages/playground/tsconfig.json

@@ -23,13 +23,13 @@
   "include": ["src"],
   "references": [
     { "path": "../antd" },
-    { "path": "../bootstrap-4" },
     { "path": "../chakra-ui" },
     { "path": "../core" },
     { "path": "../fluent-ui" },
     { "path": "../fluentui-rc" },
     { "path": "../material-ui" },
     { "path": "../mui" },
+    { "path": "../react-bootstrap"},
     { "path": "../semantic-ui" },
     { "path": "../utils" },
     { "path": "../validator-ajv6" },