Merge branch 'MintyMods-master'

Author: hperrin

packages/list/List.svelte

@@ -8,6 +8,7 @@
     class:mdc-list--dense={dense}
     class:mdc-list--avatar-list={avatarList}
     class:mdc-list--two-line={twoLine}
+    class:smui-list--three-line={threeLine && !twoLine}
     on:MDCList:action={handleAction}
     {...props}
   ><slot></slot></nav>
@@ -21,6 +22,7 @@
     class:mdc-list--dense={dense}
     class:mdc-list--avatar-list={avatarList}
     class:mdc-list--two-line={twoLine}
+    class:smui-list--three-line={threeLine && !twoLine}
     {role}
     on:MDCList:action={handleAction}
     {...props}
@@ -44,14 +46,15 @@
   export let dense = false;
   export let avatarList = false;
   export let twoLine = false;
+  export let threeLine = false;
   export let vertical = true;
   export let wrapFocus = false;
   export let singleSelection = false;
   export let selectedIndex = null;
   export let radiolist = false;
   export let checklist = false;
 
-  $: props = exclude($$props, ['use', 'class', 'nonInteractive', 'dense', 'avatarList', 'twoLine', 'vertical', 'wrapFocus', 'singleSelection', 'selectedIndex', 'radiolist', 'checklist']);
+  $: props = exclude($$props, ['use', 'class', 'nonInteractive', 'dense', 'avatarList', 'twoLine', 'threeLine', 'vertical', 'wrapFocus', 'singleSelection', 'selectedIndex', 'radiolist', 'checklist']);
 
   let element;
   let list;

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,2 +1,4 @@
 @import "@material/list/mdc-list";
 @import "@smui/ripple/style";
+@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>