feat: add three line lists (modifying MintyMods code)

Author: hperrin

packages/list/List.svelte

@@ -8,7 +8,7 @@
     class:mdc-list--dense={dense}
     class:mdc-list--avatar-list={avatarList}
     class:mdc-list--two-line={twoLine}
-	class:mdc-list--three-line={threeLine}
+    class:smui-list--three-line={threeLine && !twoLine}
     on:MDCList:action={handleAction}
     {...props}
   ><slot></slot></nav>
@@ -22,7 +22,7 @@
     class:mdc-list--dense={dense}
     class:mdc-list--avatar-list={avatarList}
     class:mdc-list--two-line={twoLine}
-	class:mdc-list--three-line={threeLine}
+    class:smui-list--three-line={threeLine && !twoLine}
     {role}
     on:MDCList:action={handleAction}
     {...props}

packages/list/_mixins.scss

@@ -0,0 +1,28 @@
+/*
+ Temporary addition until support for three-line added to @material
+https://github.com/material-components/material-components-web/issues/31
+*/
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+
+@mixin smui-list-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .smui-list--three-line .mdc-list-item__text {
+    @include mdc-feature-targets($feat-structure) {
+      align-self: flex-start;
+    }
+  }
+
+  .smui-list--three-line .mdc-list-item {
+    @include mdc-feature-targets($feat-structure) {
+      height: 88px;
+    }
+  }
+
+  .smui-list--three-line.mdc-list--dense .mdc-list-item {
+    @include mdc-feature-targets($feat-structure) {
+      height: 76px;
+    }
+  }
+}

packages/list/_style.scss

@@ -1,20 +1,4 @@
 @import "@material/list/mdc-list";
 @import "@smui/ripple/style";
-
-
-/* 
- Temporary addition until support for three-line added to @material 
-https://github.com/material-components/material-components-web/issues/31 
-*/
-.mdc-list--three-line .mdc-list-item__text {
-	align-self: flex-start;
-}
-
-.mdc-list--three-line .mdc-list-item {
-	height: 88px;
-}
-
-.mdc-list--three-line.mdc-list--dense .mdc-list-item,
-.mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
-	height: 76px;
-}
+@import "./mixins";
+@include smui-list-core-styles;

packages/list/package.json

@@ -28,6 +28,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@material/feature-targeting": "^3.1.0",
     "@material/list": "^3.1.0",
     "@smui/common": "^1.0.0-beta.15",
     "@smui/ripple": "^1.0.0-beta.16"

site/src/routes/demo/list.svelte

@@ -73,6 +73,26 @@
 
   <pre class="status">Selected: {selectionTwoLine}, value of selectedIndex: {selectionIndex}</pre>
 
+  <div>
+    A three-line list:
+    <List class="demo-list" threeLine nonInteractive>
+      <Item>
+        <Text>
+          <PrimaryText>FruitPhone 11</PrimaryText>
+          <SecondaryText>$1,100</SecondaryText>
+          <SecondaryText>A beautiful phone with good specs.</SecondaryText>
+        </Text>
+      </Item>
+      <Item>
+        <Text>
+          <PrimaryText>Addition Phone</PrimaryText>
+          <SecondaryText>$700</SecondaryText>
+          <SecondaryText>Pretty much the same phone, but a different brand name and OS.</SecondaryText>
+        </Text>
+      </Item>
+    </List>
+  </div>
+
   <div>
     A list group:
     <Group>