diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts b/stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts
index fabee2e84..90a7aa7c1 100644
--- a/stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts
+++ b/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('');
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('>> .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('');
+ 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');
+ });
});
diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.tsx b/stencil-workspace/src/components/modus-chip/modus-chip.tsx
index d1be9559d..08c37cc52 100644
--- a/stencil-workspace/src/components/modus-chip/modus-chip.tsx
+++ b/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 {
) : null}
{this.value}
+ {this.trailingIcon && (
+
+ )}
{this.showClose ? (
- this.onCloseClick(event)} size={'16'}>
+ this.onCloseClick(event)} size={'16'}>
) : null}
);
diff --git a/stencil-workspace/src/components/modus-chip/readme.md b/stencil-workspace/src/components/modus-chip/readme.md
index dcfa07c28..846873e57 100644
--- a/stencil-workspace/src/components/modus-chip/readme.md
+++ b/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` |
diff --git a/stencil-workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx
index 8ca3fd2ee..1afc97e90 100644
--- a/stencil-workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx
+++ b/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 | | | |
diff --git a/stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx b/stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx
index 6550ebe90..205fc5edf 100644
--- a/stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx
+++ b/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}>
@@ -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`
`;
@@ -195,5 +207,6 @@ Outline.args = {
showCheckmark: false,
showClose: false,
size: 'medium',
+ trailingIcon: '',
value: 'Bryan',
};