feat(list): add property for setting size on icon

src/components/list/list-renderer-config.ts

@@ -1,7 +1,10 @@
+import { IconSize } from '../icon/icon.types';
 import { ListType } from './list.types';
+
 export interface ListRendererConfig {
     isMenu?: boolean;
     isOpen?: boolean;
     badgeIcons?: boolean;
     type?: ListType;
+    iconSize?: IconSize;
 }

src/components/list/list-renderer.tsx

@@ -48,6 +48,8 @@ export class ListRenderer {
             'mdc-list--two-line': twoLines,
             selectable: selectableListTypes.includes(config.type),
             'mdc-list--avatar-list': badgeIcons,
+            'list--compact':
+                twoLines && ['small', 'x-small'].includes(config.iconSize),
         };
 
         return (
@@ -151,7 +153,7 @@ export class ListRenderer {
                 class="mdc-list-item__graphic"
                 name={item.icon}
                 style={style}
-                size={config.isMenu ? 'small' : 'medium'}
+                size={config.iconSize}
             />
         );
     }

src/components/list/list.scss

@@ -29,4 +29,14 @@
             color: white;
         }
     }
+
+    &.mdc-list--two-line.list--compact {
+        .mdc-list-item {
+            height: 4rem;
+
+            .mdc-list-item__text {
+                margin-top: pxToRem(-4);
+            }
+        }
+    }
 }

src/components/list/list.tsx

@@ -9,6 +9,7 @@ import {
     Watch,
 } from '@stencil/core';
 import { ListItem, ListSeparator } from '../../interface';
+import { IconSize } from '../icon/icon.types';
 import { ListRenderer } from './list-renderer';
 import { ListRendererConfig } from './list-renderer-config';
 import { ListType } from './list.types';
@@ -33,6 +34,12 @@ export class List {
     @Prop()
     public badgeIcons: boolean;
 
+    /**
+     * Size of the icons in the list
+     */
+    @Prop()
+    public iconSize: IconSize = 'medium';
+
     /**
      * The type of the list, omit to get a regular list. Available types are:
      * `selectable`: regular list with single selection.
@@ -81,6 +88,7 @@ export class List {
         this.config = {
             badgeIcons: this.badgeIcons,
             type: this.type,
+            iconSize: this.iconSize,
         };
         return this.listRenderer.render(this.items, this.config);
     }

src/components/menu/menu.tsx

@@ -90,6 +90,7 @@ export class Menu {
     public render() {
         const config: ListRendererConfig = {
             isMenu: true,
+            iconSize: 'small',
             isOpen: this.open,
             badgeIcons: this.badgeIcons,
             type: 'selectable',

src/components/picker/picker.tsx

@@ -259,6 +259,7 @@ export class Picker {
             >
                 <limel-list
                     badgeIcons={hasIcons}
+                    iconSize="small"
                     onChange={this.handleListChange}
                     type="selectable"
                     items={this.items}