In Synapse-React-Components, lock Bootstrap version to 3.x.x
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.
Closing because we currently have a workaround with div inside the bootstrap-4-backport class
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.
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 email@example.com, a <span> containing a caret is always created for the Dropdown React Component.
In firstname.lastname@example.org, 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 email@example.com 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).
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.