Skip to content

MRK-5063: Компоненты: Новые стили чипсов в ките (evo-chip) (v8) #1284

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

Open
andreykiselev92 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

MRK-5063: Компоненты: Новые стили чипсов в ките (evo-chip) (v8) #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e77f7a6
feat(evo-chip): updated styles
Nov 7, 2025
a4816fb
feat(evo-counter): use implementation from market
Feb 19, 2026
e1f1031
refactor(evo-chip): use inner css variables
Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 39 additions & 41 deletions projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,48 @@
<label class="chip" [evoUiClass]="classes">
@switch (type) {
@case (templateVariables?.chipTypes.checkbox) {
<input
type="checkbox"
[disabled]="disabled"
[ngModel]="value"
[value]="inheritedValue"
[name]="name"
(ngModelChange)="onInputChange($event)"
/>
<div class="chip" [evoUiClass]="classes">
<label class="chip__label">
@switch (type()) {
@case (EvoChipType.checkbox) {
<input
type="checkbox"
class="chip__input"
[disabled]="disabled()"
[name]="name()"
[ngModel]="currentValue()"
[value]="chipValue()"
(ngModelChange)="onInputChange($event)"
/>
}
@case (EvoChipType.radio) {
<input
type="radio"
class="chip__input"
[disabled]="disabled()"
[name]="name()"
[ngModel]="currentValue()"
[value]="chipValue()"
(ngModelChange)="onInputChange($event)"
/>
}
}
@case (templateVariables?.chipTypes.radio) {
<input
type="radio"
[disabled]="disabled"
[ngModel]="value"
[value]="inheritedValue"
[name]="name"
(ngModelChange)="onInputChange($event)"
/>
}
}

<div class="chip__label" [evoUiClass]="{disabled: disabled}">
<span class="chip__text">
<ng-content />
<ng-content/>
</span>

@if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {
<div class="chip__counter">
<span class="chip__counter-value">
{{ counter }}
</span>
</div>
@if (hasCounter()) {
<evo-counter [value]="counter()"/>
}
</label>

@if (closable) {
<button
@if (closable()) {
<button
type="button"
class="chip__close"
[disabled]="disabled"
[title]="closeTitle"
class="chip__close-btn"
[disabled]="disabled()"
[title]="closeTitle()"
(click)="onCloseClick($event)"
>
<evo-icon shape="decline" />
</button>
}
</div>
</label>
>
<evo-icon shape="close" class="chip__close-icon"/>
</button>
}
</div>
88 changes: 58 additions & 30 deletions projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';
import {Component, DebugElement, QueryList, ViewChildren} from '@angular/core';
import {fakeAsync, tick} from '@angular/core/testing';
import {FormsModule, ReactiveFormsModule, UntypedFormArray, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
import {Component, QueryList, ViewChildren} from '@angular/core';
import {By} from '@angular/platform-browser';
import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
import {EvoUiClassDirective} from '../../directives';
import {fakeAsync, tick} from '@angular/core/testing';
import {EvoCounterComponent} from '../evo-counter';
import {EvoIconComponent} from '../evo-icon';
import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';

@Component({selector: 'evo-host-component', template: ''})
class TestHostComponent {
Expand All @@ -18,7 +20,8 @@ class TestHostComponent {
radios: new UntypedFormControl(''),
});

onCloseClick(e: Event) {}
onCloseClick(e: Event) {
}
}

const createHost = createHostFactory({
Expand Down Expand Up @@ -55,8 +58,8 @@ describe('EvoChipsComponent', () => {
<evo-chip name="myChip" value="3">Chip 3</evo-chip>
`);
evoChipComponents.forEach((chip: EvoChipComponent) => {
expect(chip.type).toEqual(EvoChipType.radio);
expect(chip.theme).toEqual(EvoChipTheme.grey);
expect(chip.type()).toEqual(EvoChipType.radio);
expect(chip.theme()).toEqual(EvoChipTheme.grey);
});
});

Expand All @@ -77,11 +80,11 @@ describe('EvoChipsComponent', () => {

evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
if (index === 1) {
expect(chip.type).toEqual(EvoChipType.radio);
expect(chip.theme).toEqual(EvoChipTheme.grey);
expect(chip.type()).toEqual(EvoChipType.radio);
expect(chip.theme()).toEqual(EvoChipTheme.grey);
} else {
expect(chip.type).toEqual(EvoChipType.checkbox);
expect(chip.theme).toEqual(EvoChipTheme.white);
expect(chip.type()).toEqual(EvoChipType.checkbox);
expect(chip.theme()).toEqual(EvoChipTheme.white);
}
});
});
Expand Down Expand Up @@ -112,28 +115,52 @@ describe('EvoChipsComponent', () => {
expect(inputElement === null).toBeTruthy();
});

it('should have class chip_theme-grey when theme is not passed', () => {
it('should have class chip_theme_grey when theme is not passed', () => {
createHostByTemplate(`
<evo-chip name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_theme-grey');
expect(chipWrapperElement).toHaveClass('chip_theme_grey');
});

it('should have class chip_theme-white when theme is passed', () => {
it('should have class chip_theme_white when theme is passed', () => {
createHostByTemplate(`
<evo-chip theme="white" name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_theme-white');
expect(chipWrapperElement).toHaveClass('chip_theme_white');
});

it('should have class chip_theme_grey when theme is passed', () => {
createHostByTemplate(`
<evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_theme_grey');
});

it('should have class chip_theme-grey when theme is passed', () => {
it('should have class chip_size_normal when size is not passed', () => {
createHostByTemplate(`
<evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_theme-grey');
expect(chipWrapperElement).toHaveClass('chip_size_normal');
});

it('should have class chip_size_normal when size=normal is passed', () => {
createHostByTemplate(`
<evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_size_normal');
});

it('should have class chip_size_large when size=large is passed', () => {
createHostByTemplate(`
<evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
`);
const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
expect(chipWrapperElement).toHaveClass('chip_size_large');
});

it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
Expand Down Expand Up @@ -181,7 +208,7 @@ describe('EvoChipsComponent', () => {
evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
chipElements[index].querySelector('label').dispatchEvent(new MouseEvent('click'));
host.detectChanges();
expect(chip.value === host.hostComponent.values[index]).toBeTruthy();
expect(chip.currentValue() === host.hostComponent.values[index]).toBeTruthy();
});
});

Expand Down Expand Up @@ -225,7 +252,7 @@ describe('EvoChipsComponent', () => {
host.detectChanges();
const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
chipElements.forEach((chip: HTMLElement, index: number) => {
expect(chip.querySelector('.chip__close') === null).toBeFalsy();
expect(chip.querySelector('.chip__close-btn') === null).toBeFalsy();
});
});

Expand All @@ -237,10 +264,11 @@ describe('EvoChipsComponent', () => {
`);

host.detectChanges();
const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
chipElements.forEach((chip: HTMLElement, index: number) => {
expect(chip.querySelector('.chip__close') === null).toBeTruthy();
expect(chip.querySelector('.chip__counter') === null).toBeFalsy();
const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));

chipDebugElements.forEach((chipDebug: DebugElement) => {
expect(chipDebug.query(By.css('.chip__close-btn'))).toBeFalsy();
expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeTruthy();
});
});

Expand All @@ -252,10 +280,10 @@ describe('EvoChipsComponent', () => {
`);

host.detectChanges();
const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
chipElements.forEach((chip: HTMLElement, index: number) => {
expect(chip.querySelector('.chip__close') === null).toBeFalsy();
expect(chip.querySelector('.chip__counter') === null).toBeTruthy();
const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
chipDebugElements.forEach((chipDebug: DebugElement) => {
expect(chipDebug.query(By.css('.chip__close-btn'))).toBeTruthy();
expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeFalsy();
});
});

Expand All @@ -271,7 +299,7 @@ describe('EvoChipsComponent', () => {
host.detectChanges();
const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
const e = new MouseEvent('click');
chipElement.querySelector('.chip__close').dispatchEvent(e);
chipElement.querySelector('.chip__close-btn').dispatchEvent(e);
expect(host.hostComponent.onCloseClick).toHaveBeenCalledWith(e);
}));

Expand All @@ -286,7 +314,7 @@ describe('EvoChipsComponent', () => {

host.detectChanges();
const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
chipElement.querySelector('.chip__close').click();
chipElement.querySelector('.chip__close-btn').click();
expect(host.hostComponent.onCloseClick).not.toHaveBeenCalled();
}));

Expand All @@ -307,7 +335,7 @@ describe('EvoChipsComponent', () => {
host.detectChanges();

expect(onChangeSpy).not.toHaveBeenCalled();
expect(chipComponent.value).toBe(true);
expect(chipComponent.currentValue()).toBe(true);

// Сбрасываем spy
onChangeSpy.calls.reset();
Expand Down
Loading