Bug 1519769 - CSS cleanup for ds-list component (#4675), r=@ScottDowne

content-src/components/DiscoveryStreamComponents/List/_List.scss

@@ -1,7 +1,35 @@
+// Type sizes
+$item-font-size: 13;
+$item-line-height: 20;
+
+.ds-list-title {
+  color: $grey-90;
+
+  // reset these, which come from the browser's <hr> implementation
+  margin-block-start: 0;
+  margin-block-end: 0;
+
+  // Since we don't have a border, we use padding instead of margin in order to
+  // defeat margin collapsing.
+  padding: 8px 0;
+
+  line-height: 24px;
+  font-size: 17px;
+}
+
+.ds-list-border {
+  border: 1px solid $grey-40-36;
+
+  // Instead of using margin, we need to use these to override stuff that comes
+  // by default from <hr>.
+  margin-block-start: 8px;
+  margin-block-end: 8px;
+}
+
 .ds-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-row-gap: 10px;
+  grid-row-gap: 18px;
   grid-column-gap: 24px;
 
   // reset some stuff from <ul>.  Should maybe be hoisted when we have better
@@ -9,10 +37,21 @@
   padding-inline-start: 0;
 }
 
+// XXX this is gross, and attaches the bottom-border to the item above.
+// Ideally, we'd attach the top-border to the item that needs it.
+// Unfortunately the border needs to go _above_ the row gap as currently
+// set up, which means that some refactoring will be required to do this.
+.ds-list-item:nth-child(-n+3) { // all but the last three items
+  border-bottom: 2px solid $grey-40-36;
+  margin-bottom: -2px;  // cancel out the 2 pixels we used for the border
+
+  padding-bottom: 2px;
+}
+
 .ds-list-item {
   // XXX see if we really want absolute units, maybe hoist somewhere central?
-  line-height: 20px;
-  font-size: 13px;
+  line-height: $item-line-height * 1px;
+  font-size: $item-font-size * 1px;
 
   // reset some stuff from <li>.  Should maybe be hoisted when we have better
   // regression detection?
@@ -29,6 +68,8 @@
   }
 
   .ds-list-item-info {
+    @include limit-visibile-lines(1, $item-line-height, $item-font-size);
+
     color: $grey-50;
 
     overflow: hidden;
@@ -36,13 +77,13 @@
   }
 
   .ds-list-item-title {
+    @include limit-visibile-lines(2, $item-line-height, $item-font-size);
+
     margin-bottom: 8px;
-    padding-bottom: 8px;
   }
 
   .ds-list-item-text {
     display: flex;
-    justify-content: space-between;
     flex-direction: column;
   }
 

content-src/styles/_variables.scss

@@ -29,6 +29,7 @@ $grey-10-95: rgba($grey-10, 0.95);
 $grey-20-60: rgba($grey-20, 0.6);
 $grey-20-80: rgba($grey-20, 0.8);
 $grey-30-60: rgba($grey-30, 0.6);
+$grey-40-36: rgba($grey-40, 0.36);
 $grey-60-60: rgba($grey-60, 0.6);
 $grey-60-70: rgba($grey-60, 0.7);
 $grey-80-95: rgba($grey-80, 0.95);