grid iwd

canonical · Dec 16, 2024 · 0192add · 0192add
1 parent e38a681
commit 0192add
Showing 1 changed file with 43 additions and 25 deletions.
diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
@@ -199,45 +199,63 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
-@mixin list-horizontal-item-intrinsic-sizing-impl($num-chars, $num-cols, $gutter-width, $list-item-width, $ch-to-rem-factor: 0.5) {
-  width: calc($list-item-width - ($num-cols * $gutter-width));
-
-  // add element borders
-  // todo see if we can make this span the row, rather than just the top of items
-  //&:nth-child(#{$num-cols + 1})::after {
-  //  content: "";
-  //  width: 100%;
-  //  display: block;
-  //  border-top: $border;
-  //}
+// todo this extraction may not be necessary but keeping it for now should the list items need more styling
+@mixin list-horizontal-item-intrinsic-sizing-impl($num-cols) {
+  grid-column-end: span #{$num-cols};
 }
 
-@mixin list-horizontal-item-intrinsic-sizing($num-chars, $num-cols, $gutter-width, $list-item-width, $ch-to-rem-factor: 0.5) {
-  @if $num-chars > 0 {
-    @container (width > #{$num-cols * $num-chars * $ch-to-rem-factor + ($num-cols - 1) * $gutter-width}) {
-        @include list-horizontal-item-intrinsic-sizing-impl($num-chars, $num-cols, $gutter-width, $list-item-width);
+@mixin list-horizontal-item-intrinsic-sizing($min-chars, $max-chars, $num-cols, $gutter-width, $ch-to-rem-factor: 0.5) {
+  $lower-bound: 0;
+  $upper-bound: 0;
+
+  @if $min-chars {
+    $lower-bound: #{$num-cols * $min-chars * $ch-to-rem-factor + ($min-chars - 1) * $gutter-width};
+  }
+  @if $max-chars {
+    $upper-bound: #{$num-cols * $max-chars * $ch-to-rem-factor + ($max-chars - 1) * $gutter-width};
+  }
+
+  @if $lower-bound and $upper-bound {
+    @container ($lower-bound <= width < $upper-bound) {
+      @include list-horizontal-item-intrinsic-sizing-impl($num-cols);
+    }
+  } @else if $lower-bound {
+    @container (width >= $lower-bound) {
+      @include list-horizontal-item-intrinsic-sizing-impl($num-cols);
+    }
+  } @else if $upper-bound {
+    @container (width < $upper-bound) {
+      @include list-horizontal-item-intrinsic-sizing-impl($num-cols);
     }
-  } @else {
-    @include list-horizontal-item-intrinsic-sizing-impl($num-chars, $num-cols, $gutter-width, $list-item-width);
   }
 }
 
 @mixin vf-p-list-horizontal {
   .p-list--horizontal {
     @extend %vf-list-with-state-icons;
-    display: flex;
-    flex-flow: row wrap;
-    column-gap: map-get($grid-gutter-widths, small);
+    @extend %vf-grid-row;
     container-type: inline-size;
   }
   .p-list--horizontal .p-list__item {
     @extend %vf-list-item;
+    border-top: $border;
   }
-  .p-list--horizontal.is-4-cols-on-large {
-    .p-list__item {
-      @include list-horizontal-item-intrinsic-sizing(0, 1, map-get($grid-gutter-widths, small), 100%);
-      @include list-horizontal-item-intrinsic-sizing(40, 2, map-get($grid-gutter-widths, small), 50%);
-      @include list-horizontal-item-intrinsic-sizing(70, 2, map-get($grid-gutter-widths, small), 25%);
+
+  .p-list--horizontal.is-4-cols-on-large .p-list__item {
+    @include list-horizontal-item-intrinsic-sizing(null, 50, $grid-8-columns-small, map-get($grid-gutter-widths, small));
+    @include list-horizontal-item-intrinsic-sizing(50, 100, $grid-8-columns-medium / 2, map-get($grid-gutter-widths, default));
+    @include list-horizontal-item-intrinsic-sizing(100, null, $grid-8-columns / 4, map-get($grid-gutter-widths, default));
+
+    @container (width < 50ch) {
+      grid-column-end: span $grid-8-columns-small;
+    }
+
+    @container (50ch <= width < 100ch) {
+      grid-column-end: span $grid-8-columns-medium / 2;
+    }
+
+    @container (100ch <= width) {
+      grid-column-end: span $grid-8-columns / 4;
     }
   }
 }