@gitlab/ui 122.6.0 → 122.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.6.0",
+  "version": "122.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -133,7 +133,7 @@
     "acorn": "^8.15.0",
     "acorn-walk": "^8.3.4",
     "autoprefixer": "10.4.21",
-    "axe-playwright": "^2.1.0",
+    "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "14.5.4",
     "cypress-real-events": "^1.15.0",

package/src/components/base/banner/banner.scss

@@ -11,7 +11,7 @@
     max-width: $grid-size * 15;
   }
 
-  @include gl-container-width-down(sm) {
+  @include gl-container-width-down(md) {
     display: none;
   }
 }

package/src/components/base/table/table.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 table.gl-table {
   background-color: var(--gl-color-alpha-0);
   @apply gl-text-default;
@@ -96,22 +98,18 @@ table.gl-table {
     }
   }
 
-  $stacked-table-breakpoints: (
-    'sm': 'xs',
-    'md': 'sm',
-    'lg': 'md',
-    'xl': 'lg',
-  );
-
   &.b-table {
     &.b-table-stacked {
       @include gl-tmp-stacked-override();
     }
 
-    @each $class, $mq in $stacked-table-breakpoints {
-      &.b-table-stacked-#{$class} {
-        @include media-breakpoint-down(#{$mq}) {
-          @include gl-tmp-stacked-override();
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      $next: breakpoint-next($breakpoint, $grid-breakpoints);
+      @if ($next != null) {
+        &.b-table-stacked-#{$next} {
+          @include gl-container-width-down(#{$next}) {
+            @include gl-tmp-stacked-override();
+          }
         }
       }
     }

package/src/scss/gitlab_ui.scss

@@ -1,5 +1,6 @@
-@import 'bootstrap';
+@import 'mixins';
 
+@import 'bootstrap';
 @import 'bootstrap_vue';
 
 // Design Tokens
@@ -8,7 +9,6 @@
 // Settings
 @import 'functions';
 @import 'variables';
-@import 'mixins';
 @import 'typescale/index';
 
 // Body

package/src/scss/storybook.scss

@@ -7,9 +7,11 @@
 @import '../vendor/bootstrap/scss/variables';
 @import '../vendor/bootstrap/scss/mixins';
 
+@import 'mixins';
+
+@import 'bootstrap';
 @import 'bootstrap_vue';
 
-@import 'mixins';
 
 @import 'fonts';
 

package/src/vendor/bootstrap/scss/_tables.scss

@@ -135,24 +135,32 @@
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen
 // size of where your table will overflow.
+@mixin resonsive-table-styles {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent double border on horizontal scroll due to use of `display: block;`
+  > .table-bordered {
+    border: 0;
+  }
+}
 
 .table-responsive {
   @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
+    @if ($next != null) {
+      &#{$infix} {
+        @include gl-container-width-down($next) {
+          @include resonsive-table-styles;
         }
       }
     }
   }
+
+  & {
+    @include resonsive-table-styles;
+  }
 }

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -378,6 +378,89 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 }
 
 // --- Stacked tables ---
+@mixin stacked-table-styles {
+  display: block;
+  width: 100%;
+
+  // Convert to blocks when stacked
+  > caption,
+  > tbody,
+  > tbody > tr,
+  > tbody > tr > td,
+  > tbody > tr > th {
+    display: block;
+  }
+
+  // Hide when stacked
+  > thead,
+  > tfoot {
+    display: none;
+
+    > tr.b-table-top-row,
+    > tr.b-table-bottom-row {
+      display: none;
+    }
+  }
+
+  // Caption positioning
+  > caption {
+    caption-side: top !important;
+  }
+
+  > tbody {
+    > tr {
+      // Turn cells with labels into micro-grids
+      > [data-label] {
+        // Cell header label pseudo element
+        &::before {
+          content: attr(data-label);
+          width: $b-table-stacked-heading-width;
+          float: left;
+          text-align: right;
+          overflow-wrap: break-word;
+          font-weight: bold;
+          font-style: normal;
+          padding: 0 calc(#{$b-table-stacked-gap} / 2) 0 0;
+          margin: 0;
+        }
+
+        // Add clearfix in-case field label wraps
+        &::after {
+          display: block;
+          clear: both;
+          content: "";
+        }
+
+        // Cell value (we wrap the cell value in a div when stacked)
+        > div {
+          display: inline-block;
+          width: calc(100% - #{$b-table-stacked-heading-width});
+          // Add "gap" between "cells"
+          padding: 0 0 0 calc(#{$b-table-stacked-gap} / 2);
+          margin: 0;
+        }
+      }
+
+      // Dont show the fixed top/bottom rows
+      &.top-row,
+      &.bottom-row {
+        display: none;
+      }
+
+      // Give the top cell of each "row" a heavy border
+      > :first-child {
+        border-top-width: (3 * $table-border-width);
+      }
+
+      // Give any cell after a rowspan'ed cell a heavy top border
+      > [rowspan] + td,
+      > [rowspan] + th {
+        border-top-width: (3 * $table-border-width);
+      }
+    }
+  }
+}
+
 @if $bv-enable-table-stacked {
   .table.b-table {
     &.b-table-stacked {
@@ -385,91 +468,18 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
         $infix: breakpoint-infix($next, $grid-breakpoints);
 
-        &#{$infix} {
-          @include media-breakpoint-down($breakpoint) {
-            display: block;
-            width: 100%;
-
-            // Convert to blocks when stacked
-            > caption,
-            > tbody,
-            > tbody > tr,
-            > tbody > tr > td,
-            > tbody > tr > th {
-              display: block;
-            }
-
-            // Hide when stacked
-            > thead,
-            > tfoot {
-              display: none;
-
-              > tr.b-table-top-row,
-              > tr.b-table-bottom-row {
-                display: none;
-              }
-            }
-
-            // Caption positioning
-            > caption {
-              caption-side: top !important;
-            }
-
-            > tbody {
-              > tr {
-                // Turn cells with labels into micro-grids
-                > [data-label] {
-                  // Cell header label pseudo element
-                  &::before {
-                    content: attr(data-label);
-                    width: $b-table-stacked-heading-width;
-                    float: left;
-                    text-align: right;
-                    overflow-wrap: break-word;
-                    font-weight: bold;
-                    font-style: normal;
-                    padding: 0 calc(#{$b-table-stacked-gap} / 2) 0 0;
-                    margin: 0;
-                  }
-
-                  // Add clearfix in-case field label wraps
-                  &::after {
-                    display: block;
-                    clear: both;
-                    content: "";
-                  }
-
-                  // Cell value (we wrap the cell value in a div when stacked)
-                  > div {
-                    display: inline-block;
-                    width: calc(100% - #{$b-table-stacked-heading-width});
-                    // Add "gap" between "cells"
-                    padding: 0 0 0 calc(#{$b-table-stacked-gap} / 2);
-                    margin: 0;
-                  }
-                }
-
-                // Dont show the fixed top/bottom rows
-                &.top-row,
-                &.bottom-row {
-                  display: none;
-                }
-
-                // Give the top cell of each "row" a heavy border
-                > :first-child {
-                  border-top-width: (3 * $table-border-width);
-                }
-
-                // Give any cell after a rowspan'ed cell a heavy top border
-                > [rowspan] + td,
-                > [rowspan] + th {
-                  border-top-width: (3 * $table-border-width);
-                }
-              }
+        @if ($next != null) {
+          &#{$infix} {
+            @include gl-container-width-down($next) {
+              @include stacked-table-styles;
             }
           }
         }
       }
+
+      & {
+        @include stacked-table-styles;
+      }
     }
   }
 }