Skip to content

Commit

Permalink
Loading
Loading status checks…
refactor(chip-set): replace mdc-chip with limel-chip
Browse files Browse the repository at this point in the history 
This reduces the component's complexity and
amount of code and styles. Also makes us less
dependent on MDC, and enables other
upcoming improvements
@Kiarokh @adrianschmidt
Kiarokh authored and adrianschmidt committed Feb 16, 2024
1 parent 26731ba commit 65ce890
Showing 4 changed files with 171 additions and 451 deletions.
104 changes: 36 additions & 68 deletions src/components/chip-set/chip-set.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ describe('limel-chip-set', () => {
await page.waitForChanges();

label = await page.find('limel-chip-set >>> .chip-set__label');
chips = await page.findAll('limel-chip-set >>> .mdc-chip');
chips = await page.findAll('limel-chip-set >>> limel-chip');

spy = await chipSet.spyOnEvent('interact');
});
@@ -37,8 +37,8 @@ describe('limel-chip-set', () => {

it('renders the chips', () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');
});

describe('when a chip is clicked', () => {
@@ -78,7 +78,7 @@ describe('limel-chip-set', () => {
await page.waitForChanges();

label = await page.find('limel-chip-set >>> .chip-set__label');
chips = await page.findAll('limel-chip-set >>> .mdc-chip');
chips = await page.findAll('limel-chip-set >>> limel-chip');

spy = await chipSet.spyOnEvent('change');
});
@@ -89,11 +89,8 @@ describe('limel-chip-set', () => {

it('renders the chips correctly', () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');

expect(chips[0]).toHaveClass('mdc-chip--selected');
expect(chips[1]).not.toHaveClass('mdc-chip--selected');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');
});

describe('when the first chip is clicked', () => {
@@ -111,11 +108,7 @@ describe('limel-chip-set', () => {
});

it('deselects the first chip', () => {
expect(chips[0]).not.toHaveClass('mdc-chip--selected');
});

it('does not select the second chip', () => {
expect(chips[1]).not.toHaveClass('mdc-chip--selected');
expect(chips[0].getAttribute('selected')).toBeNull();
});
});

@@ -124,26 +117,20 @@ describe('limel-chip-set', () => {
await chips[1].click();
});

it('emits two change events', () => {
expect(spy).toHaveReceivedEventTimes(2);
it('emits a change event', () => {
expect(spy.events[0].detail).toEqual({
id: '1',
text: 'Lime',
selected: false,
});
expect(spy.events[1].detail).toEqual({
id: '2',
text: 'Apple',
selected: true,
});
});

it('deselects the first chip', async () => {
expect(chips[0]).not.toHaveClass('mdc-chip--selected');
expect(chips[0].getAttribute('selected')).toBeNull();
});

it('selects the second chip', async () => {
expect(chips[1]).toHaveClass('mdc-chip--selected');
expect(chips[1].getAttribute('selected')).not.toBeNull();
});
});
});
@@ -169,18 +156,18 @@ describe('limel-chip-set', () => {

await page.waitForChanges();

chips = await page.findAll('limel-chip-set >>> .mdc-chip');
chips = await page.findAll('limel-chip-set >>> limel-chip');

spy = await chipSet.spyOnEvent('change');
});

it('renders the chips correctly', () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');

expect(chips[0]).toHaveClass('mdc-chip--selected');
expect(chips[1]).not.toHaveClass('mdc-chip--selected');
expect(chips[0].getAttribute('selected')).not.toBeNull();
expect(chips[1].getAttribute('selected')).toBeNull();
});

describe('when the first chip is clicked', () => {
@@ -198,11 +185,11 @@ describe('limel-chip-set', () => {
});

it('deselects the first chip', () => {
expect(chips[0]).not.toHaveClass('mdc-chip--selected');
expect(chips[0].getAttribute('selected')).toBeNull();
});

it('does not select the second chip', () => {
expect(chips[1]).not.toHaveClass('mdc-chip--selected');
expect(chips[1].getAttribute('selected')).toBeNull();
});
});

@@ -220,12 +207,12 @@ describe('limel-chip-set', () => {
});
});

it('deselects the first chip', () => {
expect(chips[0]).toHaveClass('mdc-chip--selected');
it('selects the first chip', () => {
expect(chips[0].getAttribute('selected')).not.toBeNull();
});

it('selects the second chip', () => {
expect(chips[1]).toHaveClass('mdc-chip--selected');
expect(chips[1].getAttribute('selected')).not.toBeNull();
});
});
});
@@ -254,20 +241,18 @@ describe('limel-chip-set', () => {

await page.waitForChanges();

chips = await page.findAll('limel-chip-set >>> .mdc-chip');
chips = await page.findAll('limel-chip-set >>> limel-chip');

firstChipRemoveButton = await chips[0].find(
'button.mdc-deprecated-chip-trailing-action',
);
secondChipRemoveButton = await chips[1].find(
'button.mdc-deprecated-chip-trailing-action',
);
firstChipRemoveButton =
await chips[0].shadowRoot.querySelector('.remove-button');
secondChipRemoveButton =
await chips[1].shadowRoot.querySelector('.remove-button');
});

it('renders the chips correctly', () => {
it('renders the chips correctly', async () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');

expect(firstChipRemoveButton).toBeTruthy();
expect(secondChipRemoveButton).toBeFalsy();
@@ -308,38 +293,21 @@ describe('limel-chip-set', () => {
});
});

describe('when a chip delete button is clicked', () => {
beforeEach(async () => {
spy = await chipSet.spyOnEvent('change');
await firstChipRemoveButton.click();
});

it('emits a change event where the removed chip is not present', () => {
expect(spy).toHaveReceivedEventTimes(1);
expect(spy.events[0].detail).toEqual([
{
id: '2',
text: 'Apple',
},
]);
});
});

describe('when disabled', () => {
beforeEach(async () => {
chipSet.setAttribute('disabled', true);
await page.waitForChanges();

firstChipRemoveButton =
await chips[0].find('div[role="button"]');
await chips[0].shadowRoot.querySelector('.remove-button');
secondChipRemoveButton =
await chips[1].find('div[role="button"]');
await chips[1].shadowRoot.querySelector('.remove-button');
});

it('renders the chips without delete-buttons', async () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');

expect(firstChipRemoveButton).toBeFalsy();
expect(secondChipRemoveButton).toBeFalsy();
@@ -352,15 +320,15 @@ describe('limel-chip-set', () => {
await page.waitForChanges();

firstChipRemoveButton =
await chips[0].find('div[role="button"]');
await chips[0].shadowRoot.querySelector('.remove-button');
secondChipRemoveButton =
await chips[1].find('div[role="button"]');
await chips[1].shadowRoot.querySelector('.remove-button');
});

it('renders the chips without delete-buttons', async () => {
expect(chips.length).toEqual(2);
expect(chips[0]).toEqualText('Lime');
expect(chips[1]).toEqualText('Apple');
expect(chips[0].getAttribute('text')).toEqualText('Lime');
expect(chips[1].getAttribute('text')).toEqualText('Apple');

expect(firstChipRemoveButton).toBeFalsy();
expect(secondChipRemoveButton).toBeFalsy();
175 changes: 14 additions & 161 deletions src/components/chip-set/chip-set.scss
View file
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@
@use '@material/notched-outline/mdc-notched-outline';
@use '@material/floating-label';
@use '@material/floating-label/mdc-floating-label';
@use '@material/chips/deprecated/mdc-chips';

/**
* @prop --icon-background-color: Background color of the icon. Defaults to transparent.
@@ -33,118 +32,15 @@

$height-of-chip-set-input: functions.pxToRem(36);
$leading-icon-space: functions.pxToRem(40);
$background-color-of-remove-chip-buton-when-hovered: rgba(
var(--color-red-default),
0.2
);
$scale-of-remove-chip-x-when-hovered: scale(0.7);

:host(limel-chip-set) {
isolation: isolate;
}

.mdc-chip {
// As long as this component is depended on MDC,
// we need to force it to be font-agnostic.
// When MDC-dependency is removed, this block can also be removed.
// However, on removal of MDC-dependency, we should also make sure to check
// other font-related styles that might be set by MDC,
// such as `letter-spacing` or `font-size`.
font-family: inherit;
}

.mdc-chip {
@include mixins.is-elevated-inset-clickable();
max-width: 100%;
min-width: functions.pxToRem(32);
padding: 0 functions.pxToRem(1);
display: inline-grid;
grid-auto-flow: column;

span[role='gridcell'] {
min-width: 0; // This is needed to force mdc-chip__text (which is inside this span) to truncate

&:only-child {
.mdc-chip__text {
padding-left: functions.pxToRem(12);
}
}

&:first-child {
.mdc-chip__text {
padding-left: functions.pxToRem(12);
}
}

a[role='button'],
span[role='checkbox'] {
&:focus-visible {
&:after {
// visualizes keyboard navigation on Chrome & Firefox
// only when non-pointer input is being used,
// e.g. tabbed into using keyboard
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: functions.pxToRem(60);
box-shadow: var(--shadow-depth-8-focused);
}
}
}
}

&.mdc-chip--selected {
color: var(--mdc-theme-primary) !important;
background-color: var(--mdc-theme-surface) !important;
box-shadow: var(--button-shadow-inset);

&:active {
box-shadow: var(--button-shadow-inset-pressed);
}

.mdc-chip__icon--leading {
color: var(--mdc-theme-primary) !important;
}
}
}

.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
.mdc-chip__checkmark {
margin-right: functions.pxToRem(4);
margin-left: functions.pxToRem(8);
}

limel-badge {
margin-right: functions.pxToRem(4);
margin-left: functions.pxToRem(-4);
}

.mdc-chip__text {
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding: 0 functions.pxToRem(12) 0 functions.pxToRem(4);
color: inherit;
text-decoration: none;

&:focus,
&:focus-visible {
outline: none;
}
}

limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
background-color: var(--icon-background-color, transparent);
margin: 0 !important;
color: var(--icon-color, rgb(var(--contrast-1100)));
}

.mdc-chip-set {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: shared_input-select-picker.$height-of-mdc-text-field;
position: relative;

@@ -158,20 +54,6 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
padding: functions.pxToRem(8);

width: 100%;

.mdc-chip--selected {
// When chip is selected with keyboard (backspace / arrow-keys) to be deleted
box-shadow: var(--shadow-depth-8-error);

.mdc-chip__icon--trailing {
color: rgb(var(--color-red-dark));
background-color: $background-color-of-remove-chip-buton-when-hovered;

svg {
transform: $scale-of-remove-chip-x-when-hovered;
}
}
}
}

&.has-clear-all-button {
@@ -183,45 +65,16 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
}
}

.mdc-chip__icon {
&.mdc-chip__icon--trailing {
transition:
background-color 0.2s ease,
color 0.2s ease;

color: var(--mdc-theme-on-surface);
margin-left: 0;
margin-right: functions.pxToRem(5);

width: functions.pxToRem(22);
height: functions.pxToRem(22);

&:hover {
background-color: $background-color-of-remove-chip-buton-when-hovered;

svg {
transform: $scale-of-remove-chip-x-when-hovered;
}
}

svg {
transition: transform 0.2s ease;
display: block;
transform: scale(0.9);
}
}
}

.mdc-text-field {
height: auto;
cursor: text;
flex-wrap: wrap;
row-gap: 0.5rem;

.mdc-text-field__input {
@include shared_input-select-picker.input-field-placeholder;

width: auto;
height: $height-of-chip-set-input;
line-height: $height-of-chip-set-input;
padding: 0 functions.pxToRem(12);

flex-grow: 1;
@@ -247,15 +100,6 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
}
}

.mdc-text-field--disabled .mdc-chip {
pointer-events: all;

&.disabled {
@include shared_input-select-picker.looks-disabled;
pointer-events: none;
}
}

// used only in chipsets that do not have input
.chip-set__label {
@include mixins.truncate-text;
@@ -328,7 +172,7 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
}
}

.mdc-chip {
limel-chip {
&:first-of-type {
margin-left: 40px;
}
@@ -352,6 +196,15 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
color: var(--mdc-theme-on-surface);
}

limel-chip {
border-radius: 2rem;

&.can-be-removed {
// When chip is selected with keyboard (backspace / arrow-keys) to be deleted
box-shadow: var(--shadow-depth-8-error);
}
}

@import './partial-styles/_readonly';
@import './partial-styles/_file-picker';
@import './partial-styles/_helper-text';
341 changes: 120 additions & 221 deletions src/components/chip-set/chip-set.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { Chip } from '../chip-set/chip.types';
import { Chip, ChipType } from '../chip-set/chip.types';
import { Languages } from '../date-picker/date.types';
import {
MDCChipInteractionEvent,
MDCChipSelectionEvent,
MDCChipSet,
} from '@material/chips/deprecated';
import { MDCTextField } from '@material/textfield';
import {
Component,
@@ -21,14 +16,8 @@ import { handleKeyboardEvent } from './chip-set-input-helpers';
import translate from '../../global/translations';
import { getHref, getTarget } from '../../util/link-helper';
import { isEqual } from 'lodash-es';
import {
getIconBackgroundColor,
getIconColor,
getIconName,
getIconTitle,
} from '../icon/get-icon-props';
import { LimelChipCustomEvent } from 'src/components';

const SELECTED_CHIP_CLASS = 'mdc-chip--selected';
const INPUT_FIELD_TABINDEX = 1;

/**
@@ -58,7 +47,7 @@ export class ChipSet {
* Type of chip set
*
* - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored
* - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored
* - `filter` renders a set of selectable chips where all are selectable.
* - `input` renders a set of chips that can be used in conjunction with an input field
*
* If no type is set, a basic set of chips without additional functionality will be rendered
@@ -208,16 +197,16 @@ export class ChipSet {
@State()
private inputChipIndexSelected: number = null;

private mdcChipSet: MDCChipSet;
@State()
private selectedChipIds: Array<string | number>;

private mdcTextField: MDCTextField;
private handleKeyDown = handleKeyboardEvent;

constructor() {
this.renderChip = this.renderChip.bind(this);
this.renderInputChip = this.renderInputChip.bind(this);
this.isFull = this.isFull.bind(this);
this.handleInteractionEvent = this.handleInteractionEvent.bind(this);
this.handleSelection = this.handleSelection.bind(this);
this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);
this.handleInputBlur = this.handleInputBlur.bind(this);
this.handleTextInput = this.handleTextInput.bind(this);
@@ -229,6 +218,18 @@ export class ChipSet {
this.renderDelimiter = this.renderDelimiter.bind(this);
}

public connectedCallback() {
this.initialize();
}

private initialize() {
if (this.value.length) {
this.selectedChipIds = this.value
.filter((chip) => chip.selected)
.map((chip) => chip.id);
}
}

/**
* Used to find out whether the chip-set is in edit mode.
*
@@ -279,25 +280,16 @@ export class ChipSet {
this.host.shadowRoot.querySelector('.mdc-text-field'),
);
}

this.createMDCChipSet();
}

public componentWillUpdate() {
this.destroyMDCChipSet();
}

public componentDidUpdate() {
this.createMDCChipSet();
const input = this.host.shadowRoot.querySelector('input');
if (input && this.editMode) {
input.focus();
}
}

public disconnectedCallback() {
this.destroyMDCChipSet();

if (this.mdcTextField) {
this.mdcTextField.destroy();
}
@@ -322,51 +314,34 @@ export class ChipSet {
classes['chip-set--with-label'] = true;
}

const value = this.getValue();

return (
<div class={classes} role="grid">
{chipSetLabel}
{this.value.map(this.renderChip)}
{value.map(this.renderChip)}
{this.renderHelperLine()}
</div>
);
}

private getValue = () => {
return this.value.map((chip) => ({
...chip,
...(this.type && {
selected: this.selectedChipIds.includes(chip.id),
}),
}));
};

@Watch('value')
protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {
if (isEqual(newValue, oldValue)) {
return;
}

this.syncEmptyInput();
}

private createMDCChipSet() {
this.mdcChipSet = new MDCChipSet(
this.host.shadowRoot.querySelector('.mdc-chip-set'),
);

if (!this.type || this.type === 'input') {
this.mdcChipSet.listen(
'MDCChip:interaction',
this.handleInteractionEvent,
);
}

if (this.type === 'choice' || this.type === 'filter') {
this.mdcChipSet.listen('MDCChip:selection', this.handleSelection);
}
}

private destroyMDCChipSet() {
if (this.mdcChipSet) {
this.mdcChipSet.unlisten(
'MDCChip:interaction',
this.handleInteractionEvent,
);
this.mdcChipSet.unlisten('MDCChip:selection', this.handleSelection);

this.mdcChipSet.destroy();
}
this.initialize();
}

private renderChipSetLabel() {
@@ -566,72 +541,17 @@ export class ChipSet {
this.input.emit(event.target.value && event.target.value.trim());
}

private handleInteractionEvent(event: MDCChipInteractionEvent) {
const chip = this.value.find((item) => {
return `${item.id}` === event.detail.chipId;
});
this.emitInteraction(chip);
}

private emitInteraction(chip: Chip) {
this.interact.emit(chip);
}

private handleSelection(event: MDCChipSelectionEvent) {
let chip = this.value.find((item) => {
return `${item.id}` === event.detail.chipId;
});
chip = { ...chip, selected: event.detail.selected };
this.change.emit(chip);
}

private removeChip(id: string | number) {
const newValue = this.value.filter((chip) => {
return `${chip.id}` !== `${id}`;
});
this.change.emit(newValue);
}

private renderChip(chip: Chip) {
if (this.type === 'filter') {
return this.renderFilterChip(chip);
}

return this.renderDefaultChip(chip);
}

private renderDefaultChip(chip: Chip) {
return (
<div
class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}
role="row"
id={`${chip.id}`}
>
{chip.icon ? this.renderChipIcon(chip) : null}
{chip.text ? this.renderChipLabel(chip) : null}
</div>
);
}
const chipType: ChipType =
this.type === 'filter' ? 'filter' : 'default';

private renderChipLabel(chip: Chip<any>) {
const attributes: any = {};
if (chip.href) {
attributes.href = getHref(chip.href);
attributes.target = getTarget(chip.href);
}
const chipProps = this.getChipProps(chip, chipType);

return (
<span role="gridcell">
<a
role="button"
tabindex={this.disabled ? '-1' : '0'}
class="mdc-chip__text"
{...attributes}
>
{chip.text}
</a>
</span>
);
return <limel-chip {...chipProps} />;
}

private hasHelperText = () => {
@@ -653,91 +573,108 @@ export class ChipSet {
);
};

private renderFilterChip(chip: Chip) {
return (
<div
class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}
role="row"
id={`${chip.id}`}
>
<span class="mdc-chip__checkmark">
<svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
<path
class="mdc-chip__checkmark-path"
fill="none"
stroke="currentColor"
d="M1.73,12.91 8.1,19.28 22.79,4.59"
/>
</svg>
</span>
<span role="gridcell">
<span
role="checkbox"
tabindex={this.disabled ? '-1' : '0'}
aria-checked="false"
class="mdc-chip__text"
>
{chip.text}
</span>
</span>
{this.renderBadge(chip)}
</div>
);
}

private renderInputChip(chip: Chip, index: number) {
const chipProps = this.getChipProps(chip, 'default');

return [
<div
<limel-chip
key={chip.id}
class={{
'mdc-chip': true,
'mdc-chip--selected': this.inputChipIndexSelected === index,
disabled: this.disabled,
'can-be-removed': this.inputChipIndexSelected === index,
}}
role="row"
id={`${chip.id}`}
onClick={this.catchInputChipClicks}
>
{chip.icon ? this.renderChipIcon(chip) : null}
{this.renderChipLabel(chip)}
{this.renderChipRemoveButton(chip)}
</div>,
{...chipProps}
/>,
this.renderDelimiter(),
];
}

private catchInputChipClicks(event) {
event.stopPropagation();
private getChipProps(chip: Chip, chipType: ChipType) {
const removable = this.type === 'input' && chip.removable;

return {
role: 'row',
identifier: chip.id,
text: chip.text,
icon: chip.icon,
badge: chip.badge,
selected: chip.selected,
disabled: this.disabled,
readonly: this.readonly,
type: chipType,
removable: removable,
onClick: this.catchInputChipClicks(chip),
onRemove: this.handleRemoveChip,
...(chip.href && {
link: {
href: getHref(chip.href),
target: getTarget(chip.href),
},
}),
};
}

private renderChipIcon(chip: Chip) {
const name = getIconName(chip.icon);
const color = getIconColor(chip.icon, chip.iconFillColor);
const backgroundColor = getIconBackgroundColor(
chip.icon,
chip.iconBackgroundColor,
);
const title = getIconTitle(chip.icon, chip.iconTitle);
const style = {};
if (color) {
style['--icon-color'] = color;
private catchInputChipClicks = (chip: Chip) => () => {
if (this.isSelectableChip(chip)) {
this.updateSelectedChipIds(chip);
this.change.emit(chip);
}

if (backgroundColor) {
style['--icon-background-color'] = backgroundColor;
this.emitInteraction(chip);
};

private isSelectableChip(chip: Chip): boolean {
return this.type !== 'input' && 'selected' in chip;
}

private updateSelectedChipIds(chip: Chip): void {
chip.selected = !chip.selected;
const id = chip.id;
if (this.type === 'choice') {
this.updateChoiceTypeSelectedIds(id);
} else {
this.updateFilterTypeSelectedIds(id);
}
}

return (
<limel-icon
class="mdc-chip__icon mdc-chip__icon--leading"
name={name}
style={style}
size="small"
badge={true}
title={title}
/>
private updateChoiceTypeSelectedIds(id: number | string): void {
this.selectedChipIds = this.isChipSelected(id) ? [] : [id];
}

private isChipSelected(id: number | string): boolean {
return !!this.selectedChipIds.find((chipId) => chipId === id);
}

private updateFilterTypeSelectedIds(id: number | string): void {
if (this.isChipSelected(id)) {
this.removeChipIdFromSelectedChipIds(id);
} else {
this.addChipIdToSelectedChipIds(id);
}
}

private removeChipIdFromSelectedChipIds(id: number | string): void {
this.selectedChipIds = this.selectedChipIds.filter(
(chipId) => chipId !== id,
);
}

private addChipIdToSelectedChipIds(id: number | string): void {
this.selectedChipIds = [...this.selectedChipIds, id];
}

private handleRemoveChip = (
event: LimelChipCustomEvent<string | number>,
) => {
this.removeChip(event.detail);
};

private removeChip = (identifier: string | number) => {
const newValue = this.value.filter((chip) => {
return chip.id !== identifier;
});
this.change.emit(newValue);
};

private renderLeadingIcon() {
if (!this.leadingIcon) {
return;
@@ -750,32 +687,6 @@ export class ChipSet {
);
}

private renderChipRemoveButton(chip: Chip) {
if (!chip.removable || this.readonly || this.disabled) {
return;
}

const svgData = `<svg style="height:100%;width:100%;" width="32" height="32" x="0px" y="0px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<line fill="none" id="svg_1" stroke="currentColor" stroke-width="2" x1="8" x2="24" y1="8" y2="24"/>
<line fill="none" id="svg_2" stroke="currentColor" stroke-width="2" x1="24" x2="8" y1="8" y2="24"/>
</svg>`;

const removeFunc = (event: MouseEvent) => {
event.stopPropagation();
this.removeChip(chip.id);
};

return (
<button
class="mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action"
aria-label={this.removeChipLabel}
tabindex="-1"
innerHTML={svgData}
onClick={removeFunc}
/>
);
}

private renderClearAllChipsButton() {
if (this.disabled || this.readonly || !this.clearAllButton) {
return;
@@ -798,10 +709,6 @@ export class ChipSet {
return translate.get('chip-set.clear-all', this.language);
};

private removeChipLabel = (): string => {
return translate.get('chip-set.remove-chip', this.language);
};

private handleDeleteAllIconClick(event: Event) {
event.preventDefault();
this.change.emit([]);
@@ -815,14 +722,6 @@ export class ChipSet {
return <div class="delimiter">{this.delimiter}</div>;
}

private renderBadge(chip: Chip) {
if (!chip.badge) {
return;
}

return <limel-badge label={chip.badge} />;
}

private triggerIconColorWarning(value: Chip[]) {
for (const chip of value) {
if (
2 changes: 1 addition & 1 deletion src/components/chip-set/chip.types.ts
View file
Original file line number Diff line number Diff line change
@@ -80,7 +80,7 @@ export interface Chip<T = any> {
value?: T;

/**
* The value of the badge. Only valid for `filter`.
* The value of the badge.
*/
badge?: number;

0 comments on commit 65ce890

Please sign in to comment.