Merge pull request #160 from coliff/dev/coliff/v521-update

coliff · Sep 8, 2022 · f3a0853 · f3a0853
2 parents 4c60000 + bc33653
commit f3a0853
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 20 deletions.
diff --git a/.stylelintrc → .stylelintrc.json b/.stylelintrc → .stylelintrc.json
@@ -4,11 +4,7 @@
     "declaration-no-important": null,
     "no-invalid-position-at-import-rule": null,
     "number-leading-zero": null,
-    "property-disallowed-list": [
-      "gap",
-      "text-size-adjust",
-      "will-change"
-    ],
+    "property-disallowed-list": ["gap", "text-size-adjust", "will-change"],
     "property-no-vendor-prefix": null,
     "selector-max-type": null,
     "selector-max-universal": null,

diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use
 The CSS can be loaded via a CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.2.1/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
 ```
 
 ## FAQS
@@ -65,6 +65,7 @@ The CSS can be loaded via a CDN:
 - Polyfill for CSS custom properties ([ie11CustomProperties](https://github.com/nuxodin/ie11CustomProperties))
 - Polyfill to fix most JavaScript components ([Polyfill.io](https://polyfill.io/v3/))
 - Polyfill to fix tabs ([element-qsa-scope polyfill](https://www.npmjs.com/package/element-qsa-scope))
+- Fixes for Accordion button icons
 
 ### Known Issues
 
@@ -73,6 +74,7 @@ The CSS can be loaded via a CDN:
 - SVG images with `.img-fluid` are sometimes disproportionately sized. To fix this, add `width: 100%;` or `.w-100` where necessary. This fix improperly sizes other image formats, so this isn't applied automatically.
 - There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding `body{font-family:"Segoe UI", Arial, sans-serif;}` to your IE11-only stylesheet so there isn't a delay in the text displaying.
 - View a list of known issues at [https://github.com/coliff/bootstrap-ie11/issues](https://github.com/coliff/bootstrap-ie11/issues).
+- From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.
 
 ### How can I test this?
 

diff --git a/css/bootstrap-ie11.css b/css/bootstrap-ie11.css
diff --git a/css/bootstrap-ie11.css.map b/css/bootstrap-ie11.css.map
diff --git a/css/bootstrap-ie11.min.css b/css/bootstrap-ie11.min.css
diff --git a/css/bootstrap-ie11.min.css.map b/css/bootstrap-ie11.min.css.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-ie11",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Bootstrap 5 for Internet Explorer 11",
   "keywords": [
     "bootstrap",
@@ -41,6 +41,7 @@
     "css-compile": "sass --style expanded --source-map --embed-sources scss:css",
     "css-lint": "stylelint \"scss/*.scss\"",
     "css-minify": "cleancss --format breakWith=lf --source-map --source-map-inline-sources --output css/bootstrap-ie11.min.css css/bootstrap-ie11.css",
+    "html-lint": "npx htmlhint \"tests/*.html\"",
     "prettier": "npx prettier --write \"scss/*.scss\"",
     "test": "npm run css-lint"
   },

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -0,0 +1,15 @@
+.accordion-button:not(.collapsed)::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  transform: rotate(-180deg);
+}
+
+.accordion-button::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  transition: transform 0.2s ease-in-out;
+}
+
+.accordion-flush .accordion-item,
+.accordion-flush .accordion-item .accordion-button,
+.accordion-flush .accordion-item .accordion-button.collapsed {
+  border-radius: 0 !important;
+}
diff --git a/scss/bootstrap-ie11.scss b/scss/bootstrap-ie11.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap for IE11 v5.2.0 (https://github.com/coliff/bootstrap-ie11)
+ * Bootstrap for IE11 v5.2.1 (https://github.com/coliff/bootstrap-ie11)
  * Copyright 2022 C.Oliff
  * Licensed under MIT (https://github.com/coliff/bootstrap-ie11/blob/main/LICENSE)
  */
@@ -16,6 +16,7 @@
   @import "forms/form-range";
   @import "forms/form-select";
   @import "card";
+  @import "accordion";
   @import "modal";
   @import "progress";
   @import "list-group";

diff --git a/tests/.htmlhintrc b/tests/.htmlhintrc
@@ -14,8 +14,8 @@
   "id-unique": true,
   "inline-script-disabled": false,
   "inline-style-disabled": false,
-  "space-tab-mixed-disabled": true,
-  "spec-char-escape": true,
+  "space-tab-mixed-disabled": space,
+  "spec-char-escape": false,
   "src-not-empty": true,
   "style-disabled": false,
   "tag-self-close": false,

diff --git a/tests/index.html b/tests/index.html
@@ -7,11 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Bootstrap 5 - IE11 Test</title>
   <meta name="description" content="Bootstrap 5 for Internet Explorer 11 Test Page">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../css/bootstrap-ie11.css"
     media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
 
-  <script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
 
   <!-- required JavaScript polyfills for IE11 -->
   <script nomodule crossorigin="anonymous"
@@ -41,7 +41,7 @@
 
   <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top fixed-top mb-5" id="nav">
     <div class="container">
-      <a class="navbar-brand" href="#">Bootstrap 5 for IE 11 <small class="text-muted small fs-6">5.2.0</small></a>
+      <a class="navbar-brand" href="#">Bootstrap 5 for IE 11 <small class="text-muted small fs-6">5.2.1</small></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -564,6 +564,56 @@ <h2 class="accordion-header" id="headingThree">
       </div>
     </div>
   </div>
+  <h5 class="mt-4">Accordion Flush</h5>
+
+  <div class="accordion accordion-flush" id="accordionFlushExample">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="flush-headingOne">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
+        data-bs-parent="#accordionFlushExample">
+        <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+          <code>.accordion-flush</code> class. This is the first item's accordion body.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="flush-headingTwo">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
+        data-bs-parent="#accordionFlushExample">
+        <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+          <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled
+          with some actual content.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="flush-headingThree">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
+          Accordion Item #3
+        </button>
+      </h2>
+      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
+        data-bs-parent="#accordionFlushExample">
+        <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+          <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening
+          here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more
+          representative of how this would look in a real-world application.
+        </div>
+      </div>
+    </div>
+  </div>
+
   <hr id="alerts" class="my-5">
 
   <h3 class="pt-3">Alerts</h3>
@@ -2370,7 +2420,7 @@ <h4 class="pt-1 h5 fw-normal">Radius</h4>
     <div class="d-inline-block bg-secondary py-4 px-4 m-1 rounded-pill" style="width: 80px"></div>
   </div>
 
-  <h5 class="pt-1 h6 fw-normal">Radius Sizes</h4>
+  <h5 class="pt-1 h6 fw-normal">Radius Sizes</h5>
 
     <div class="my-1">
       <div class="d-inline-block bg-secondary p-4 m-1 rounded-0"></div>
@@ -2589,7 +2639,7 @@ <h5 class="pt-3">Text decoration</h5>
 
   </main>
 
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>