react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

Implement bootstrap5 theme

Open nurikk opened this issue 3 years ago • 1 comments

Implement bootstrap5 theme

This PR adds support for bootstrap5 theme. It 99.99% copy of bootstrap4 theme, but has following differences:

  1. This package depends on react-boostrap v2 (which enables support for bootstrap5) instead of v1
  2. This package depends on updated react-icons
  3. This package has slight changes in SelectWidget, to support react-boostrap v2

Resolves #2428

Checklist

  • [ ] I'm updating documentation
  • [x] I'm adding or updating code
    • [x] I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
    • [ ] I've updated docs if needed
    • [ ] I've updated the changelog with a description of the PR
  • [x] I'm adding a new feature
    • [x] I've updated the playground with an example use of the feature

nurikk avatar Jun 20 '22 02:06 nurikk

@nurikk Have you considered making this theme use the @rjsf/bootstrap-4 and simply override SelectWidget in the widgets... something like:

import { Theme } from '@rjsf/bootstrap-4';
import SelectWidget from `../src/SelectWidget`;

const Theme5: WithThemeProps = {
  ...Theme,
  widgets: { ...Theme.widgets, SelectWidget }
}

export Theme;

You might keep all of the tests but you won't need most of the source files. Because you are using the latest 2.x version of bootstrap, the imports in the bootstrap-4 version will actually pick up the v2 code as react-bootstrap is a peer-dependency and should supercede things.

heath-freenome avatar Jul 21 '22 17:07 heath-freenome

Hi there, just asking for an indication, whether this pull request is going to be merged?

jochenschmich-aeberle avatar Feb 21 '23 08:02 jochenschmich-aeberle

@jochenschmich-aeberle This PR will likely never be merged as it was made against a now very out-of-date v4 codebase. We are keeping it around as we are considering dropping support for bootstrap-4 in favor of bootstrap-5 when we officially support React 18 as part of the future v6 release. In the meantime, I believe that using the bootstrap-4 theme with bootstrap-5 is possible, assuming you fix the SelectWidget

heath-freenome avatar Feb 21 '23 17:02 heath-freenome

Is there a tracking issue for BS5 implementation?

johan-smits avatar Aug 10 '23 09:08 johan-smits

Is there a tracking issue for BS5 implementation?

@johan-smits Yes, it is https://github.com/rjsf-team/react-jsonschema-form/issues/3638

heath-freenome avatar Aug 11 '23 16:08 heath-freenome

@nurikk We are doing this in v6 with #3974

heath-freenome avatar Jan 05 '24 20:01 heath-freenome