Chips: Add Trailing Icon

stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts

@@ -98,7 +98,7 @@ describe('modus-chip', () => {
     await page.waitForChanges();
     expect(await chip.getProperty('showClose')).toBeTruthy();
 
-    const shadowIconRemove = await page.find('modus-chip >>> .icon-remove');
+    const shadowIconRemove = await page.find('modus-chip >>> .icon-close');
     expect(shadowIconRemove).not.toBeNull();
   });
 
@@ -168,7 +168,7 @@ describe('modus-chip', () => {
     await page.setContent('<modus-chip show-close></modus-chip>');
     const closeClick = await page.spyOnEvent('closeClick');
     const chipClick = await page.spyOnEvent('chipClick');
-    const shadowCloseIcon = await page.find('modus-chip >>> .icon-remove');
+    const shadowCloseIcon = await page.find('modus-chip >>> .icon-close');
     await page.waitForChanges();
 
     await shadowCloseIcon.click();
@@ -192,7 +192,7 @@ describe('modus-chip', () => {
     const page = await newE2EPage();
 
     await page.setContent('<modus-chip show-close size="small"></modus-chip');
-    const shadowIconRemove = await page.find('modus-chip >>> .icon-remove');
+    const shadowIconRemove = await page.find('modus-chip >>> .icon-close');
     await page.waitForChanges();
 
     const computedStyles = shadowIconRemove.getComputedStyle();
@@ -237,4 +237,16 @@ describe('modus-chip', () => {
     const shadowContainer = await page.find('modus-chip >>> .modus-chip');
     expect(shadowContainer.classList.contains('active'));
   });
+
+  it('renders changes to trailingIcon', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-chip></modus-chip>');
+    const chip = await page.find('modus-chip');
+    expect(await chip.getProperty('trailingIcon')).toBeFalsy();
+
+    chip.setProperty('trailingIcon', 'caret_down');
+    await page.waitForChanges();
+    expect(await chip.getProperty('trailingIcon')).toEqual('caret_down');
+  });
 });

stencil-workspace/src/components/modus-chip/modus-chip.tsx

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, Prop, h, EventEmitter, Event, Listen } from '@stencil/core';
-import { IconRemove } from '../../icons/svgs/icon-remove';
+import { IconClose } from '../../icons/generated-icons/IconClose';
 import { IconCheck } from '../../icons/svgs/icon-check';
+import { ModusIconMap } from '../../icons/ModusIconMap';
 
 @Component({
   tag: 'modus-chip',
@@ -24,6 +25,9 @@ export class ModusChip {
   /** (optional) The image's url. */
   @Prop() imageUrl: string;
 
+  /** (optional) The chip's trailing icon */
+  @Prop() trailingIcon: string;
+
   /** (optional) Whether to show the checkmark. */
   @Prop() showCheckmark = false;
 
@@ -125,8 +129,11 @@ export class ModusChip {
           <IconCheck size={'16'}></IconCheck>
         ) : null}
         <span {...style}>{this.value}</span>
+        {this.trailingIcon && (
+          <ModusIconMap icon={this.trailingIcon} size={this.size === 'small' ? '16' : '24'}></ModusIconMap>
+        )}
         {this.showClose ? (
-          <IconRemove onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconRemove>
+          <IconClose onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconClose>
         ) : null}
       </button>
     );

stencil-workspace/src/components/modus-chip/readme.md

@@ -20,6 +20,7 @@
 | `showCheckmark` | `show-checkmark` | (optional) Whether to show the checkmark.                                      | `boolean`              | `false`     |
 | `showClose`     | `show-close`     | (optional) Whether to show the close icon.                                     | `boolean`              | `false`     |
 | `size`          | `size`           | (optional) The chip's size.                                                    | `"medium" \| "small"`  | `'medium'`  |
+| `trailingIcon`  | `trailing-icon`  | (optional) The chip's trailing icon                                            | `string`               | `undefined` |
 | `value`         | `value`          | (optional) The chip's value.                                                   | `string`               | `undefined` |
 
 

stencil-workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx

@@ -71,6 +71,7 @@ import { Anchor } from '@storybook/addon-docs';
 | show-checkmark | Whether to show the checkmark                                       | boolean |                    | false         |          |
 | show-close     | Whether to show the close icon                                      | boolean |                    | false         |          |
 | size           | The chip's size                                                     | string  | 'medium', 'small'  | 'medium'      |          |
+| trailingIcon   | The chip's trailing icon                                            | string  |                    |               |          |
 | value          | The chip's value                                                    | string  |                    |               |          |
 | maxWidth       | Maximum width for the Chip's text and shows ellipsis when truncated | string  |                    |               |          |
 | chipId         | This chip's id will create much more visibility for testing         | string  |                    |               |          |

stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx

@@ -78,6 +78,13 @@ export default {
         type: { summary: `medium' | 'small'` },
       },
     },
+    trailingIcon: {
+      name: 'trailing-icon',
+      description: "The chip's trailing icon",
+      table: {
+        type: { summary: 'string' },
+      },
+    },
     value: {
       description: "The chip's value",
       table: {
@@ -124,6 +131,7 @@ export const Default = ({
   showCheckmark,
   showClose,
   size,
+  trailingIcon,
   value,
   chipId,
 }) => html`
@@ -138,6 +146,7 @@ export const Default = ({
     show-checkmark=${showCheckmark}
     show-close=${showClose}
     size=${size}
+    trailing-icon=${trailingIcon}
     value=${value}
     chip-id=${chipId}>
   </modus-chip>
@@ -153,6 +162,7 @@ Default.args = {
   showCheckmark: false,
   showClose: false,
   size: 'medium',
+  trailingIcon: '',
   value: 'Bryan',
   chipId: '',
 };
@@ -168,6 +178,7 @@ export const Outline = ({
   showCheckmark,
   showClose,
   size,
+  trailingIcon,
   value,
 }) => html`
   <modus-chip
@@ -181,6 +192,7 @@ export const Outline = ({
     show-checkmark=${showCheckmark}
     show-close=${showClose}
     size=${size}
+    trailing-icon=${trailingIcon}
     value=${value}>
   </modus-chip>
 `;
@@ -195,5 +207,6 @@ Outline.args = {
   showCheckmark: false,
   showClose: false,
   size: 'medium',
+  trailingIcon: '',
   value: 'Bryan',
 };