feat: Add Bootstrap 4 Theme support #1938

Xtremilicious · 2020-07-22T12:35:40Z

Reasons for making this change

To add Bootstrap 4 theme support for react-jsonschema-form as a task for the MLH Fellowship 2020.

Fix #1455

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
I'm adding a new feature
- I've updated the playground with an example use of the feature

Co-authored-by: Jani Eväkallio <jani.evakallio@gmail.com>

…and support. refactored form component

…owship/react-jsonschema-form into MLH-Fellowship-react-bootstrap-4-final

epicfaace · 2020-07-26T13:55:53Z

Some comments after looking through the playground:

I think the description field is too big here ("Simple" tab):

Any idea why the "nested" example has cut off text?

"nested" example -- can you make sure the buttons ("+" and "-") have a consistent size?

"nested" example -- the "Done?" is supposed to be a checkbox, but it's rendering as a big title:

"nested" example -- apparently [object Object] are being passed in for the uiSchema and registry HTML attributes for the <input> tag. Can you remove them?

"widgets" example -- the read-only fields should have the readonly attribute set, not the disabled attribute.

"simple" example -- whenever I type anything in a textbox, I get this error in the console:

Validation - the validation doesn't seem to look quite like what default validation in bootstrap looks like. Can you use this to render inline validation errors instead: https://react-bootstrap.github.io/components/forms/#forms-validation-libraries

Error List - any idea why the bottom left and bottom right corners aren't connected? Also, can you add a bit more margin below the error list (like how it looks like for the bootstrap 3 form)?

"Widgets" tab - I am not able to click on "No" to change the value for the radio button.

"Files" tab - can you change the file input to use Bootstrap's file input (https://getbootstrap.com/docs/4.0/components/forms/#file-browser)?

"Alternatives" tab - I can't select anything in the multiselect widget:

"Additional Properties" tab - can you implement the additional properties functionality here?

"Nested" tab - can you make the help text grey with the text-muted class as described in the Bootstrap docs? Additionally,

…4-final Fix CI build

anikethsaha · 2020-07-30T08:38:51Z

@epicfaace We have updated the tests and applied suggestions.
CI tests are passing. Not sure about the netlify thing.

epicfaace · 2020-07-30T14:33:10Z

@anikethsaha can you merge the latest master into this branch? That should fix the netlify issue.

netlify build fixes

Xtremilicious · 2020-07-30T14:55:52Z

@anikethsaha can you merge the latest master into this branch? That should fix the netlify issue.

@epicfaace I did the merge, still failing.

anikethsaha · 2020-08-03T07:51:31Z

@epicfaace it seems the build is still failing.

From the logs, it looks like it is simply running the build command instead of installing the dependencies I think.

let us know if anything else is required to fix from our end

epicfaace

Looks good! I wouldn't worry about the Netlify errors; it's probably a problem on their end.

A small minor changes, and this PR should be good to merge. We don't need the file input and additional properties features in order to merge this initial PR in, so I've made separate issues for them (#1962 and #1963). If you're able to work on them, that would be great!

epicfaace · 2020-08-03T17:18:53Z

packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx

+
+const DescriptionField = ({ description }: Partial<FieldProps>) => {
+  if (description) {
+    return <div><h6 className="mb-5">{description}</h6></div>;


We don't want descriptions to be in bold

Suggested change

return <div><h6 className="mb-5">{description}</h6></div>;

return <div><div className="mb-5">{description}</div></div>;

epicfaace · 2020-08-03T17:19:10Z

packages/bootstrap-4/src/ErrorList/ErrorList.tsx

+        {errors.map((error, i: number) => {
+          return (
+            <ListGroup.Item key={i} className="border-0">
+              <small>{error.stack}</small>


Let's use regular-sized text for ErrorList

Suggested change

<small>{error.stack}</small>

<span>{error.stack}</span>

epicfaace · 2020-08-03T17:19:25Z

packages/bootstrap-4/src/ErrorList/ErrorList.tsx

+import { ErrorListProps } from "@rjsf/core";
+
+const ErrorList = ({ errors }: ErrorListProps) => (
+  <Card border="danger" className="mb-2">


Need more margin between this and the form title

Suggested change

<Card border="danger" className="mb-2">

<Card border="danger" className="mb-4">

anikethsaha · 2020-08-04T12:25:44Z

@epicfaace I have updated the code with your changes.

Let us know if there is anything else required.

nicmendoza · 2020-08-04T15:53:06Z

I'm super excited to try this out -- are you planning on updating the documentation so it references this theme? I'm not clear how to actually use it. It appears, based on the other themes, that I need to install @rjsf/bootstrap-4, which doesn't exist.

Edit: Ok, I found the nested documentation for the package. The @rjsf/bootstrap-4 package appears to not be in the npm registry.

epicfaace · 2020-08-04T16:05:03Z

Yeah, it isn't released to npm yet -- it will be released on the next release.

@anikethsaha @Xtremilicious could you make a PR that updates the theme list table on the documentation to add this theme?

anikethsaha · 2020-08-04T16:07:21Z

you meant here https://github.com/rjsf-team/react-jsonschema-form#supported-themes ?

epicfaace · 2020-08-04T16:10:04Z

Yes, that link, and this link: https://react-jsonschema-form.readthedocs.io/en/latest/usage/themes/#supported-themes

feat: Add Bootstrap 4 Theme support (rjsf-team#1938)

epicfaace · 2020-08-08T13:24:58Z

@rjsf/bootstrap-4 has just been published to npm with version 2.3.0. Thanks for your patience!

anikethsaha and others added 30 commits July 21, 2020 12:31

new(theme): initial setup for bootstrap-4 using react-bootstrap

f4756f1

create bootstrap-4 textfield widget

2fc2f27

add * for required fields

6d89f36

chore: fixed formatting issue

1220fd8

tests: added tests for textWidget

1b216f8

create Radio Widget

5e3d410

minor fix

7f9b5c6

removed margin-bottom to fix description/helpertext margin

8d3d162

add bootstrap-4 updown widget

05049c9

Update packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx

831cdf7

Co-authored-by: Jani Eväkallio <jani.evakallio@gmail.com>

Update RadioWidget.tsx

1960f08

Update packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx

b7acde0

Co-authored-by: Jani Eväkallio <jani.evakallio@gmail.com>

Update packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx

d000268

Co-authored-by: Jani Eväkallio <jani.evakallio@gmail.com>

add bootstrap-4 URL widget

4066d17

add email, password, select. modified text, field template for fixes …

e1887e2

…and support. refactored form component

add errorlist component, modified others for required attribute support

f10e70e

code fixes

907ba47

chore: resolve conflicts

04ea422

feat(bootstrap-4): added descriptionField

5b1c3df

chore: removed style tag and using classname for styling

87eedbf

update: changed typedef and using fieldProps

a696905

chore: fix tests

324fb86

types: descriptionField extending from FieldProps

5244da4

tests: updated tests and typinh

ad72f02

feat(bootstrap-4): titleField Component

afd39ef

test: updated test and types for titleField

b56720e

chore: fixed merge conflicts

0705ff0

chore(bootstrap-4): removed fontawesome icons

0591018

feat(bootstrap-4): checboxesWidget

ce69632

style(bootstrap-4): fixed inconsistency of the buttons (fixes #52)

586486b

Xtremilicious requested a review from agustin107 as a code owner July 24, 2020 06:02

epicfaace added 2 commits July 26, 2020 09:22

Merge branch 'react-bootstrap-4-final' of https://github.com/MLH-Fell…

fe9f106

…owship/react-jsonschema-form into MLH-Fellowship-react-bootstrap-4-final

fix CI build

10917a6

epicfaace mentioned this pull request Jul 26, 2020

Fix CI build MLH-Fellowship/react-jsonschema-form#96

Merged

epicfaace and others added 8 commits July 26, 2020 09:58

update deps

a49a95d

Merge pull request #96 from rjsf-team/MLH-Fellowship-react-bootstrap-…

202a242

…4-final Fix CI build

suggestion fixes pt.1

c62a3f6

suggested changes fix pt.2

b228117

fix suggested changes pt.3

6439066

fix: fixed the inconsistency in the radio and select widget

5c94cff

snapshot fixes

5e18566

snapshot fixes pt.2

1cf23dc

Merge pull request #101 from rjsf-team/master

b430544

netlify build fixes

epicfaace mentioned this pull request Aug 3, 2020

Bootstrap 4 theme - add additional properties support #1962

Closed

epicfaace requested changes Aug 3, 2020

View reviewed changes

chore: small changes and test update

62170c5

epicfaace approved these changes Aug 4, 2020

View reviewed changes

epicfaace merged commit b07cb88 into rjsf-team:master Aug 4, 2020

Xtremilicious added a commit to MLH-Fellowship/react-jsonschema-form that referenced this pull request Aug 7, 2020

Merge pull request #106 from rjsf-team/master

e1930b7

feat: Add Bootstrap 4 Theme support (rjsf-team#1938)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Bootstrap 4 Theme support #1938

feat: Add Bootstrap 4 Theme support #1938

Xtremilicious commented Jul 22, 2020

epicfaace commented Jul 26, 2020

anikethsaha commented Jul 30, 2020

epicfaace commented Jul 30, 2020

Xtremilicious commented Jul 30, 2020 •

edited

Loading

anikethsaha commented Aug 3, 2020

epicfaace left a comment

epicfaace Aug 3, 2020

epicfaace Aug 3, 2020

epicfaace Aug 3, 2020

anikethsaha commented Aug 4, 2020

nicmendoza commented Aug 4, 2020 •

edited

Loading

epicfaace commented Aug 4, 2020 •

edited

Loading

anikethsaha commented Aug 4, 2020

epicfaace commented Aug 4, 2020

epicfaace commented Aug 8, 2020

	return <div><h6 className="mb-5">{description}</h6></div>;
	return <div><div className="mb-5">{description}</div></div>;

	<Card border="danger" className="mb-2">
	<Card border="danger" className="mb-4">

feat: Add Bootstrap 4 Theme support #1938

feat: Add Bootstrap 4 Theme support #1938

Conversation

Xtremilicious commented Jul 22, 2020

Reasons for making this change

Checklist

epicfaace commented Jul 26, 2020

anikethsaha commented Jul 30, 2020

epicfaace commented Jul 30, 2020

Xtremilicious commented Jul 30, 2020 • edited Loading

anikethsaha commented Aug 3, 2020

epicfaace left a comment

Choose a reason for hiding this comment

epicfaace Aug 3, 2020

Choose a reason for hiding this comment

epicfaace Aug 3, 2020

Choose a reason for hiding this comment

epicfaace Aug 3, 2020

Choose a reason for hiding this comment

anikethsaha commented Aug 4, 2020

nicmendoza commented Aug 4, 2020 • edited Loading

epicfaace commented Aug 4, 2020 • edited Loading

anikethsaha commented Aug 4, 2020

epicfaace commented Aug 4, 2020

epicfaace commented Aug 8, 2020

Xtremilicious commented Jul 30, 2020 •

edited

Loading

nicmendoza commented Aug 4, 2020 •

edited

Loading

epicfaace commented Aug 4, 2020 •

edited

Loading