From 249a8b94c2379039303dd2c122208a61347b82d4 Mon Sep 17 00:00:00 2001 From: Guy Sartorelli Date: Thu, 23 Jan 2025 14:03:39 +1300 Subject: [PATCH] DOC Document bootstrap upgrade --- en/08_Changelogs/6.0.0.md | 12 ++++++++++++ .../03_CSS_Coding_Conventions.md | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/en/08_Changelogs/6.0.0.md b/en/08_Changelogs/6.0.0.md index 8993bea5..4567cccc 100644 --- a/en/08_Changelogs/6.0.0.md +++ b/en/08_Changelogs/6.0.0.md @@ -878,6 +878,18 @@ Several JavaScript dependencies have been updated, and a few have been replaced. Notably, [`react-dnd`](https://react-dnd.github.io/react-dnd/about) has been replaced with [`dnd-kit`](https://dndkit.com/). If you were using `react-dnd` and relying on the webpack externals provided by `silverstripe/admin`, these are no longer available. We recommend refactoring your code to use `dnd-kit` so that your UX is consistent with other drag-and-drop in the CMS. +#### Bootstrap upgrade + +We have upgraded from bootstrap 4 to bootstrap 5. Part of this upgrade also included upgrading reactstrap from 8 to 9 and upgrading popperjs from 1 to 2. + +Refer to the following upgrade guides for details about changes you may need to make to styling and JavaScript in your CMS customisations: + +- [bootstrap upgrade guide](https://getbootstrap.com/docs/5.0/migration/) +- [reactstrap upgrade guide](https://reactstrap.github.io/?path=/story/home-upgrading--page) +- [popper upgrade guide](https://popper.js.org/docs/v2/migration-guide/) + +Note that while the bootstrap guide mentions removing the styling for the `.form-group`, `.form-row`, or `.form-inline` CSS classes, that styling has been included in the CMS to reduce upgrade pain. + ## Bug fixes This release includes a number of bug fixes to improve a broad range of areas. Check the change logs for full details of these fixes split by module. Thank you to the community members that helped contribute these fixes as part of the release! diff --git a/en/10_Contributing/05_Coding_Conventions/03_CSS_Coding_Conventions.md b/en/10_Contributing/05_Coding_Conventions/03_CSS_Coding_Conventions.md index cbb008b3..9016a292 100644 --- a/en/10_Contributing/05_Coding_Conventions/03_CSS_Coding_Conventions.md +++ b/en/10_Contributing/05_Coding_Conventions/03_CSS_Coding_Conventions.md @@ -17,14 +17,14 @@ Check our [requirements](/getting_started/server_requirements) documentation. ## Tools and libraries Styles are written in the [SCSS language](https://sass-lang.com/). -We use [Bootstrap 4](https://getbootstrap.com/) styles where possible. +We use [Bootstrap 5](https://getbootstrap.com/) styles where possible. ## Conventions We follow the [AirBnB CSS Conventions](https://github.com/airbnb/css) and the [BEM](https://getbem.com/) methodology (block-element-modifier). -Because we use [Bootstrap 4](https://getbootstrap.com/) which +Because we use [Bootstrap 5](https://getbootstrap.com/) which does not follow [BEM](https://getbem.com/) naming convention there will be a lot of places where class names voilate BEM. However, please note that they are not a indicator of how to name classes.