feat(action-list): allow specification of action-list row height and improve spacing

ActionList.ts

@@ -62,6 +62,10 @@ export class ActionList extends FilterListBase {
   @property({ type: Array })
   items: ActionItem[] = [];
 
+  /** Height of each list item */
+  @property({ type: Number })
+  height: number = 72;
+
   private renderMoreVertItem(item: ActionItem): TemplateResult {
     item.actions!.shift();
     const otherActions = item.actions!;
@@ -72,7 +76,6 @@ export class ActionList extends FilterListBase {
           id="more-vert-anchor"
           type="button"
           class="${classMap({
-            twoline: !!item.supportingText,
             hidden: !this.searchRegex.test(term(item)),
           })}"
           @click=${(evt: Event) => {
@@ -107,9 +110,8 @@ export class ActionList extends FilterListBase {
     const action = item.actions ? item.actions[index] : null;
 
     if (!action)
-      return html` <md-list-item
+      return html`<md-list-item
           class="${classMap({
-            twoline: !!item.supportingText,
             hidden: !this.searchRegex.test(term(item)),
           })}"
         ></md-list-item
@@ -124,7 +126,6 @@ export class ActionList extends FilterListBase {
     return html`<md-list-item
         type="button"
         class="${classMap({
-          twoline: !!item.supportingText,
           hidden: !this.searchRegex.test(term(item)),
         })}"
         @click=${action.callback}
@@ -170,11 +171,13 @@ export class ActionList extends FilterListBase {
         class="${classMap({
           hidden: !this.searchRegex.test(term(item)),
         })}"
+        title="${item.headline ?? ''}
+${item.headline && item.supportingText ? '-' : ''}${item.supportingText}"
         @click="${item.primaryAction}"
       >
-        <div slot="headline">${item.headline}</div>
+        <div slot="headline" class="firstLine">${item.headline}</div>
         ${item.supportingText
-          ? html`<div slot="headline">${item.supportingText}</div>`
+          ? html`<div slot="supporting-text">${item.supportingText}</div>`
           : html``}
         ${item.startingIcon
           ? html`<md-icon slot="start">${item.startingIcon}</md-icon>`
@@ -194,21 +197,30 @@ export class ActionList extends FilterListBase {
   }
 
   render(): TemplateResult {
-    return html`<section>
-      ${this.renderSearchField()}
-      <div style="display: flex;">
-        <md-list class="listitems">
-          ${this.items.map(item => this.renderListItem(item))}</md-list
-        >
-        ${this.renderActions()}
-      </div>
-    </section>`;
+    return html`<style>
+        md-list-item {
+          height: ${this.height}px;
+        }
+        [slot='supporting-text'] {
+          max-height: ${this.height - 24}px;
+        }
+      </style>
+      <section>
+        ${this.renderSearchField()}
+        <div style="display: flex;">
+          <md-list class="listitems">
+            ${this.items.map(item => this.renderListItem(item))}</md-list
+          >
+          ${this.renderActions()}
+        </div>
+      </section>`;
   }
 
   static styles = css`
     section {
       display: flex;
       flex-direction: column;
+      justify-content: space-between;
     }
 
     md-outlined-text-field {
@@ -217,8 +229,14 @@ export class ActionList extends FilterListBase {
       padding: 8px;
     }
 
-    md-list-item.twoline {
-      height: 72px;
+    [slot='headline'] {
+      white-space: pre;
+    }
+
+    [slot='supporting-text'] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
     }
 
     .listitems {

README.md

@@ -40,6 +40,7 @@ This element was meant to be used only for plugins in this organization. If it s
 | Name           | Privacy | Type           | Default    | Description                                                               | Inherited From |
 | -------------- | ------- | -------------- | ---------- | ------------------------------------------------------------------------- | -------------- |
 | `items`        |         | `ActionItem[]` | `[]`       | ListItems and potential                                                   |                |
+| `height`       |         | `number`       | `72`       | Height of each list item                                                  |                |
 | `filterable`   |         | `boolean`      | `false`    | Whether list items can be filtered on \`headline\` and \`supportingText\` | FilterListBase |
 | `searchhelper` |         | `string`       | `'search'` | Placeholder for search input field                                        | FilterListBase |
 

action-list.test.ts

@@ -386,4 +386,59 @@ describe('Custom List component ActionList', () => {
       await visualDiff(list, `action-list/long headline and supportingText `);
     });
   });
+
+  describe('for a custom size list item', () => {
+    let list: ActionList;
+
+    beforeEach(async () => {
+      list = await fixture(
+        html`<action-list
+          height="120"
+          .items=${[
+            {
+              headline: 'thiiiiiisisaveeeeeeeryloooongtitle',
+              divider: true,
+              filtergroup: ['item2', 'item3', 'item4', 'item5'],
+              primaryAction: () => {},
+              actions: [
+                { icon: 'edit', callback: () => {} },
+                { icon: 'delete', callback: () => {} },
+              ],
+            },
+            {
+              headline: 'thiiiiiisisanotherveeeeeeeryloooongtitle',
+              supportingText: 'thiiiiiiiisisaveeeeeeeerylongsupportingtitle',
+            },
+            {
+              headline:
+                'really long just doing its thing I guess this is how it is',
+              supportingText:
+                'thiiiiiiiisisaveeeeeeeerylongsupportingtitle > MoreStuff > AndStillMoreStuff > It gose on forever until we cannot bear it any moer and eventually we reach our limit and then we truncate it! ',
+              divider: true,
+              filtergroup: ['item2', 'item3', 'item4', 'item5'],
+              primaryAction: () => {},
+              actions: [
+                { icon: 'edit', callback: () => {} },
+                { icon: 'delete', callback: () => {} },
+              ],
+            },
+          ]}
+        ></action-list>`
+      );
+      list.style.width = '100px';
+      document.body.prepend(list);
+    });
+
+    afterEach(() => {
+      if (list) list.remove();
+    });
+
+    it('produces correctly spaced list items', async () => {
+      await timeout(200);
+      await visualDiff(
+        list,
+        `action-list/long headline and supportingText with custom size`
+      );
+    });
+  });
 });

list.stories.ts

@@ -106,6 +106,8 @@ ActionLessList.args = {
       primaryAction: () => {
         window.alert('clicked');
       },
+      supportingText:
+        'a veeeeeeeery veeeeeeeery loooooooong suporting text with empty spaces which just gets longer and longer until we cannot bear it and something will break if we do not truncate it!',
     },
     {
       headline: 'item3',