Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tag): add remove tag event #1361

Merged
merged 2 commits into from
Nov 30, 2022
Merged

feat(tag): add remove tag event #1361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
551ecd7
Add the remove tag event and removeEventOnly property
YonatanKra Nov 30, 2022
1bfa547
Update docs
YonatanKra Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 17 additions & 26 deletions components/tags/readme.md
View file
Open in desktop
@@ -1,34 +1,25 @@
# vwc-tags
# vwc-tag

## Properties

| Property | Attribute | Type |
| -------------- | -------------- | ----------------------------------------------------- |
| `connotation` | `connotation` | `Connotation.Primary \| Connotation.CTA \| undefined` |
| `dense` | `dense` | `boolean \| undefined` |
| `enlarged` | `enlarged` | `boolean \| undefined` |
| `icon` | `icon` | `string \| undefined` |
| `layout` | `layout` | `string \| undefined` |
| `selected` | `selected` | `boolean \| undefined` |
| `shape` | `shape` | `Shape.Rounded \| Shape.Pill \| undefined` |
| `text` | `text` | `string \| undefined` |
| `trailingIcon` | `trailingIcon` | `string \| undefined` |

# vwc-tag
| Property | Type |
| -------------- | ----------------------------------------------------- |
| `connotation` | `Connotation.Primary \| Connotation.CTA \| undefined` |
| `dense` | `boolean \| undefined` |
| `enlarged` | `boolean \| undefined` |
| `icon` | `string \| undefined` |
| `layout` | `string \| undefined` |
| `selected` | `boolean \| undefined` |
| `shape` | `Shape.Rounded \| Shape.Pill \| undefined` |
| `text` | `string \| undefined` |
| `removable` | `boolean \| undefined` |
| `removeEventOnly`| `boolean \| undefined` |

## Properties
## Events

| Property | Type |
| -------------- | ----------------------------------------------------- |
| `connotation` | `Connotation.Primary \| Connotation.CTA \| undefined` |
| `dense` | `boolean \| undefined` |
| `enlarged` | `boolean \| undefined` |
| `icon` | `string \| undefined` |
| `layout` | `string \| undefined` |
| `selected` | `boolean \| undefined` |
| `shape` | `Shape.Rounded \| Shape.Pill \| undefined` |
| `text` | `string \| undefined` |
| `trailingIcon` | `string \| undefined` |
| Event | Description |
|------------ |------------------|
| `remove-tag` | {VwcTag} |

## Accessibility

Expand Down
12 changes: 11 additions & 1 deletion components/tags/src/vwc-tag-base.ts
View file
Open in desktop
Expand Up @@ -48,6 +48,9 @@ export class VWCTagBase extends LitElement {
@property({ type: Boolean, reflect: true })
removable = false;

@property({ type: Boolean, reflect: true })
removeEventOnly = false;

@state() protected shouldRenderRipple = false;

protected rippleHandlers = new RippleHandlers(() => {
Expand Down Expand Up @@ -124,8 +127,15 @@ export class VWCTagBase extends LitElement {
</span>`;
}

protected removeTag(): void {
this.dispatchEvent(new CustomEvent('remove-tag', {detail: this}));
if (!this.removeEventOnly) {
this.remove();
}
}

protected renderRemoveButton(): TemplateResult {
return html`<button class="remove-button" @click="${()=> this.remove()}">
return html`<button class="remove-button" @click="${()=> this.removeTag()}">
${this.renderIcon('close-line')}
</button>`;
}
Expand Down
46 changes: 45 additions & 1 deletion components/tags/test/tag.test.js
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@ describe('Tag', () => {

it('should reflect from attribute to property', async () => {
const [actualElement] = addElement(
textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation=cta></${COMPONENT_NAME}>`)
textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
);
await actualElement.updateComplete;
expect(actualElement.layout)
Expand All @@ -68,4 +68,48 @@ describe('Tag', () => {
.equal('cta');
});
});

describe('removable', () => {
it('should remove the tag if remove button clicked', async () => {
const [actualElement] = addElement(
textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
);
actualElement.removable = true;
await actualElement.updateComplete;
const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
removeButton?.click();
expect(Array.from(document.body.children).includes(actualElement)).to.equal(false);
});

it('should fire an event remove tag with tag in detail', async () => {
let elementFromRemoveEvent = null;
const [actualElement] = addElement(
textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
);
actualElement.removable = true;
await actualElement.updateComplete;
const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
actualElement.addEventListener('remove-tag', (event) => {
elementFromRemoveEvent = event.detail;
});
removeButton?.click();
expect(elementFromRemoveEvent).to.equal(actualElement);
});

it('should fire an event remove-tag leaving the element in the dom with removeEventOnly true', async () => {
let elementFromRemoveEvent = null;
const [actualElement] = addElement(
textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
);
actualElement.removable = true;
actualElement.removeEventOnly = true;
await actualElement.updateComplete;
const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
actualElement.addEventListener('remove-tag', (event) => {
elementFromRemoveEvent = event.detail;
});
removeButton?.click();
expect(Array.from(document.body.children).includes(elementFromRemoveEvent)).to.equal(true);
});
});
});