-
Epic
-
Resolution: Done
-
Undefined
-
None
-
Replace Bootstrap Grid CSS with PatternFly grid
-
Future Sustainability
-
False
-
-
False
-
CNV v4.20.0.rhel9-59
-
Green
-
Done
-
0% To Do, 0% In Progress, 100% Done
-
Replace Bootstrap Grid CSS with PatternFly grid in kubevirt, nmstate and networking.
In OpenShift 4.20, we plan to remove the Bootstrap Grid CSS from console (jira: CONSOLE-4550). Please check your dynamic plugins to see if you're using these classes, and replace them with PatternFly grid as needed. Here are some notes from when I did this transition in console: * I did a global search with the regex col-[a-z][a-z] to search for the presence of bootstrap columns in the console repo for migration
- You will likely want the hasGutter prop in your <Grid> element to emulate the column gutters in the BS CSS.
- The .clearfix class was removed and no longer does anything
- By default GridItem spans 12 columns, so col-xs-12 is no longer necessary
- Replace col-[a-z][a-z]
(pull|push)[0-9][0-9]? with the order prop in the PF GridItem compoennt - Replace col-[a-z][a-z]
offset[0-9][0-9]? with the offset, smOffset, ..., xl2Offset in the PF GridItem component - In some cases, the usage of Grid would not be best practice (for example, the Form component would be better suited for form layouts)
PS: Please also take a look at the other CSS in the ancillary folder, and remove usage of any of these ancillary classes or styles as well (e.g., the (visible|hidden)-(xs|sm|md|lg) classes, which can be replaced by the PF Display utility classes).We want to aim for a pure PatternFly implementation of console, so these styles will also likely be removed in the future
- links to
- mentioned on