fix!: support Bootstrap 5.2 (#25)

* chore(deps): install 5.2 beta * fix: include new maps partial * fix: set btn-lg border-radius * fix: customise prefix variable * fix: style .active focus state * docs: add responsive table example * chore: install bootstrap 5.2 * docs: update readme * chore: generate styles * fix: update table partial * docs: use new table-group-divider * chore: generate styles
techfromsage · Jul 26, 2022 · cc86e84 · cc86e84
1 parent c046cb1
commit cc86e84
Show file tree

Hide file tree

Showing 14 changed files with 277 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -25,8 +25,11 @@ $enable-shadows: false;
 @import "bootstrap/scss/functions"; // Required
 
 @import "variables"; // Talis customisations are here
-
 @import "bootstrap/scss/variables"; // Required
+
+// Map overrides go here
+@import "bootstrap/scss/maps"; // Required
+
 @import "bootstrap/scss/mixins"; // Required
 @import "bootstrap/scss/utilities"; // Required
 

diff --git a/docs/assets/css/custom-full.css b/docs/assets/css/custom-full.css
diff --git a/docs/assets/css/custom-full.css.map b/docs/assets/css/custom-full.css.map
diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
diff --git a/docs/assets/css/custom.css.map b/docs/assets/css/custom.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -515,8 +515,11 @@ <h3>XS</h3>
 <button class="btn btn-xs btn-default" disabled>XS button</button>
 <hr>
 
+
+
 <h2>Tables</h2>
 <table class="table table-striped">
+  <caption class="visually-hidden">An example caption</caption>
   <thead>
     <tr>
       <th>#</th>
@@ -526,7 +529,7 @@ <h2>Tables</h2>
       <th class="text-end">Actions</th>
     </tr>
   </thead>
-  <tbody>
+  <tbody class="table-group-divider">
     <tr>
       <td>1</td>
       <td>
@@ -536,7 +539,7 @@ <h2>Tables</h2>
       <td>Daniel Matthew</td>
       <td>
         <div class="text-end">
-          <button data-bs-toggle="dropdown" class="btn btn-action">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
             <span class="visually-hidden">Actions</span>
             <i class="far fa-ellipsis-v"></i>
           </button>
@@ -565,7 +568,7 @@ <h2>Tables</h2>
       <td>Daniel Matthew</td>
       <td>
         <div class="text-end">
-          <button data-bs-toggle="dropdown" class="btn btn-action">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
             <span class="visually-hidden">Actions</span>
             <i class="far fa-ellipsis-v"></i>
           </button>
@@ -592,7 +595,7 @@ <h2>Tables</h2>
       <td>Daniel Matthew</td>
       <td>
         <div class="text-end">
-          <button data-bs-toggle="dropdown" class="btn btn-action">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
             <span class="visually-hidden">Actions</span>
             <i class="far fa-ellipsis-v"></i>
           </button>
@@ -621,7 +624,7 @@ <h2>Tables</h2>
       <td>Daniel Matthew</td>
       <td>
         <div class="text-end">
-          <button data-bs-toggle="dropdown" class="btn btn-action">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
             <span class="visually-hidden">Actions</span>
             <i class="far fa-ellipsis-v"></i>
           </button>
@@ -641,6 +644,177 @@ <h2>Tables</h2>
     </tr>
   </tbody>
 </table>
+
+<div class="table-responsive">
+  <table class="table table-striped table-responsive">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Status</th>
+        <th>Course</th>
+        <th>Requester</th>
+        <th class="text-end">Actions</th>
+      </tr>
+    </thead>
+    <tbody class="table-group-divider">
+
+    <tr>
+      <td>1</td>
+      <td>
+        <span class="label label-default">Alpha</span>
+      </td>
+      <td>Mathematics</td>
+      <td>One</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>2</td>
+      <td>
+        <span class="label label-default">Beta</span>
+      </td>
+      <td>Mathematics</td>
+      <td>Two</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>3</td>
+      <td>
+        <span class="label label-default">Delta</span>
+      </td>
+      <td>Mathematics</td>
+      <td>Three</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>4</td>
+      <td>
+        <span class="label label-default">Epsilon</span>
+      </td>
+      <td>Mathematics</td>
+      <td>Four</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>5</td>
+      <td>
+        <span class="label label-default">Gamma</span>
+      </td>
+      <td>Mathematics</td>
+      <td>Five</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    </tbody>
+  </table>
+</div>
 <hr>
 
 <h2>Forms</h2>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "bootstrap": "^5.1.3",
+    "bootstrap": "5.2.0",
     "popper.js": "^1.16.1"
   },
   "devDependencies": {

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -34,7 +34,9 @@
     background-color: $gray-200;
   }
 
-  &:active {
+  &:active,
+  &.active,
+  &.show {
     &:focus {
       box-shadow: 0 0 0 $btn-focus-width $accent;
     }

diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -1,12 +1,3 @@
-.table > :not(:first-child) {
-  border-top: none;
-}
-
-// Temp override while we wait for https://github.com/twbs/bootstrap/pull/35200 to end up in live
-.table > :not(caption):not(colgroup) + * {
-  border-top: (2 * $table-border-width) solid $table-group-separator-color !important;
-}
-
 th,
 .o-table__sort-btn {
   color: $black;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2,6 +2,8 @@ $enable-gradients: false;
 $enable-shadows: false;
 $enable-rounded: true;
 
+$prefix: talis-;
+
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-300: #dee2e6;
@@ -67,7 +69,8 @@ $border-widths: (
   5: 5px,
 );
 
-$border-radius: 3px;
+$border-radius: .1875rem;
+$border-radius-lg: .3125rem;
 
 $spacer: .9375rem;
 

diff --git a/scss/custom.scss b/scss/custom.scss
@@ -8,6 +8,7 @@ $enable-shadows: false;
 @import "variables";
 
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 

diff --git a/src/docs/_includes/macros/tables.njk b/src/docs/_includes/macros/tables.njk
@@ -0,0 +1,31 @@
+{% macro tableRow( id = '1', data = { label: 'default'}) %}
+    <tr>
+      <td>{{ id }}</td>
+      <td>
+        <span class="label label-default">{{ data.label }}</span>
+      </td>
+      <td>{{ data.subject }}</td>
+      <td>{{ data.student }}</td>
+      <td>
+        <div class="text-end">
+          <button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
+            <span class="visually-hidden">Actions</span>
+            <i class="far fa-ellipsis-v"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="#">View details</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">Upload document</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#"
+                >Edit & resubmit</a
+              >
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+{% endmacro %}