In Synapse-React-Components, lock Bootstrap version to 3.x.x

Description

We need bootstrap version to be on 3 to maintain parity with the GWT SynapseWebClient portal

in package.json it is set to "bootstrap": ">=3.4.1", which then caused yarn to download Bootstrap 4 and write that in the yarn.lock file.

Environment

None

Activity

Show:
Ziming Dong
March 4, 2021, 1:51 AM
Ziming Dong
October 2, 2020, 2:08 AM

I was trying this library and it seems to work well:

https://github.com/arqex/react-datetime
Example from their README.md:
https://codesandbox.io/s/boring-dew-uzln3

Jay Hodgson
October 2, 2020, 2:01 AM

Welcome to front-end .
We're currently being pulled between bootstrap 3 and 4, and material UI (I guess we got off lucky since semantic ui or fluent ui are not in the conversation).
One option is for you to just define the form schemas and use the react-jsonschema-form library that's being used for the AD compound nomination tool (bootstrap 3.x theme), but that library doesn't have a good solution for a date/time picker (which I think you need for that project, right?). I think that's going to be one of the biggest issues with SWC-5199, we need to find a cross-browser react date time picker.

Ziming Dong
October 2, 2020, 1:23 AM
Edited

The Dropdown issue is rather odd because it is only currently working as expected because of the fact we are using the mismatching react-bootstrap library.

In react-bootstrap@0.33, a <span> containing a caret is always created for the Dropdown React Component.

In react-bootstrap@1.3.0, which we currently use, the caret <span> is not created because the visibility of the caret is toggled in Bootstrap 4 via CSS (visible by default).

Since we use react-bootstrap@1.3.0 which does not create a <span>, and are using Bootstrap3 CSS. It just so happens that we get the desired behavior of no carets in our Dropdown (e.g. DownloadOptions).

Ziming Dong
October 2, 2020, 1:16 AM

The bootstrap listed in package.json does not seem to have any effect because we are not actually using it.

The purpose of including it in the JSON manifest is so that we can package it alongside the React App. However, we are instead linking Bootstrap3 CSS from a CDN in our index.html files.

https://react-bootstrap.github.io/getting-started/introduction/#css

Won't Fix

Assignee

Ziming Dong

Reporter

Ziming Dong

Validator

Xavier Schildwachter

Priority

Major

Labels

None

Development Area

None

Sprint

None

Release Version History

None

Story Points

None

Epic Link

None

Slack Channel

None