Uploaded image for project: 'Observability UI'
  1. Observability UI
  2. OU-847

Remove usages of Bootstrap grid CSS

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Done
    • Icon: Undefined Undefined
    • openshift-4.20
    • openshift-4.20
    • None
    • None
    • None
    • None
    • Sprint 275

      Background

      The bootstrap grid is being deprecated: https://issues.redhat.com/browse/CONSOLE-4550 

       
      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 offsetsmOffset, ..., 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 
      https://redhat-internal.slack.com/archives/C032NLNEE8G/p1749050172288819

      Outcomes

      We need to replace it with the Patternfly Grid

              jezhu@redhat.com Jenny Zhu
              gbernal@redhat.com Gabriel Bernal
              None
              None
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: