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', };