Add horizontal list group modifier (#27970)

Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs.

Also added examples generate from our breakpoints data file with a protip for how to do equal width items.

diff --git a/package.json b/package.json
index 6139ce3316714838bcad6f1366f11e699931e386..2670085e6c5946026e78a3d3f12daf8df2e6594f 100644 (file)
--- a/package.json
+++ b/package.json
@@ -174,11 +174,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "25 kB"
+      "maxSize": "25.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "22.7 kB"
+      "maxSize": "23.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 796cc461f4f719b5105860fe66e5a13f1bc71372..e688f959f7feace60be4f6273bdfa172c7729acd 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -80,6 +80,39 @@
 }
 
 
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $value in $displays {
+      .list-group-horizontal#{$infix} {
+        flex-direction: row;
+
+        .list-group-item {
+          margin-right: -$list-group-border-width;
+          margin-bottom: 0;
+
+          &:first-child {
+            @include border-left-radius($list-group-border-radius);
+            @include border-top-right-radius(0);
+          }
+
+          &:last-child {
+            margin-right: 0;
+            @include border-right-radius($list-group-border-radius);
+            @include border-bottom-left-radius(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most

diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index f32feca90c99ebacc71a1f22dea28af2ad8c7476..3dbc3a6cc0adef89819d14d0bf5c0c4a641a4e57 100644 (file)
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -37,3 +37,15 @@
     border-bottom-left-radius: $radius;
   }
 }
+
+@mixin border-top-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: $radius;
+  }
+}
+
+@mixin border-bottom-left-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-left-radius: $radius;
+  }
+}

diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss
index c508764203de72050cf66bdf635b267862001bc3..ac65e128cebc39380b2a266bbcd720f444413a21 100644 (file)
--- a/site/docs/4.2/assets/scss/_component-examples.scss
+++ b/site/docs/4.2/assets/scss/_component-examples.scss
@@ -246,6 +246,9 @@
 .bd-example > .list-group {
   max-width: 400px;
 }
+.bd-example > [class*="list-group-horizontal"] {
+  max-width: 100%;
+}
 
 // Navbars
 .bd-example {

diff --git a/site/docs/4.2/components/list-group.md b/site/docs/4.2/components/list-group.md
index d3becaefbd230da4481f270ab6c1dcded9772285..251dae672ec6c42901d47e1d02e99dab7576e29d 100644 (file)
--- a/site/docs/4.2/components/list-group.md
+++ b/site/docs/4.2/components/list-group.md
@@ -100,6 +100,22 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 {% endcapture %}
 {% include example.html content=example %}
 
+## Horizontal
+
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+
+**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
+
+{% for bp in site.data.breakpoints %}
+{% capture example %}
+<ul class="list-group list-group-horizontal{{ bp.abbr }}">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+</ul>
+{% endcapture %}
+{% include example.html content=example %}{% endfor %}
+
 ## Contextual classes
 
 Use contextual classes to style list items with a stateful background and color.