Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-73114

Jenkins css classes for alerts collide with bootstrap5

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • core
    • 2.459, 2.452.2

      https://weekly.ci.jenkins.io/design-library/Banner/ describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

      At least "alert-warning" and "alert-info"  and "alert-danger" have a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (e.g. warnings-ng)

      E.g. the effect is that the banner gets a border in the same color as the text.,

      This was especially visible in older Jenkins version before https://github.com/jenkinsci/jenkins/pull/9115 was merged, but also affects current Jenkins version:

      Expected:

      Actual:

      Originally reported as https://github.com/jenkinsci/customizable-header-plugin/issues/99

          [JENKINS-73114] Jenkins css classes for alerts collide with bootstrap5

          Markus Winter created issue -
          Markus Winter made changes -
          Description Original: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-error" and "alert-success".

          At least "alert-warning" (maybe also "alert-error") has a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          Originally reported as https://github.com/jenkinsci/customizable-header-plugin/issues/99
          New: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

          At least "alert-warning" (maybe also "alert-danger") has a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          Originally reported as [https://github.com/jenkinsci/customizable-header-plugin/issues/99]
          Markus Winter made changes -
          Description Original: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

          At least "alert-warning" (maybe also "alert-danger") has a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          Originally reported as [https://github.com/jenkinsci/customizable-header-plugin/issues/99]
          New: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

          At least "alert-warning" and "alert-info"  and "alert-danger" have a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (e.g. warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          Originally reported as [https://github.com/jenkinsci/customizable-header-plugin/issues/99]
          Markus Winter made changes -
          Attachment New: image-2024-05-09-00-31-06-313.png [ 62531 ]
          Markus Winter made changes -
          Attachment New: image-2024-05-09-00-31-36-686.png [ 62532 ]
          Markus Winter made changes -
          Description Original: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

          At least "alert-warning" and "alert-info"  and "alert-danger" have a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (e.g. warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          Originally reported as [https://github.com/jenkinsci/customizable-header-plugin/issues/99]
          New: [https://weekly.ci.jenkins.io/design-library/Banner/] describes how to create banners. This makes use of the css classes "alert-warning", "alert-info", "alert-danger" and "alert-success".

          At least "alert-warning" and "alert-info"  and "alert-danger" have a conflict when a page with such a banner also includes parts that lead to loading of bootstrap5 styles (e.g. warnings-ng)

          E.g. the effect is that the banner gets a border in the same color as the text.,

          This was especially visible in older Jenkins version before [https://github.com/jenkinsci/jenkins/pull/9115] was merged, but also affects current Jenkins version:

          Expected:

          !image-2024-05-09-00-08-41-094.png!

          Actual:

          !image-2024-05-09-00-08-07-166.png!

          !image-2024-05-09-00-31-36-686.png!

          !image-2024-05-09-00-31-06-313.png!

          Originally reported as [https://github.com/jenkinsci/customizable-header-plugin/issues/99]
          Markus Winter made changes -
          Status Original: Open [ 1 ] New: In Progress [ 3 ]
          Markus Winter made changes -
          Assignee New: Markus Winter [ mawinter69 ]
          Markus Winter made changes -
          Remote Link New: This issue links to "PR-9254 (Web Link)" [ 29652 ]

          Tim Jacomb added a comment - - edited

          Probably we should change core (and design-library) to use a class prefixed with jenkins- and deprecate the old class?

          Tim Jacomb added a comment - - edited Probably we should change core (and design-library) to use a class prefixed with jenkins- and deprecate the old class?

            mawinter69 Markus Winter
            mawinter69 Markus Winter
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: