Skip to content

Commit 712e279

Browse files
CalinaCristianCalinaCristian
authored
Merge pull request #384 from UiPath/feat/add-custom-tooltip-suggest-cherry
feat(suggest): add custom tooltip 🍒
2 parents 5f5ce10 + 5b8cdbc commit 712e279

File tree

8 files changed

+47
-45
lines changed

8 files changed

+47
-45
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# v14.8.8 (2023-08-11)
2+
* **suggest** add custom tooltip
3+
* **a11y** make columns reset button focusable
4+
* **chore** bump version to v14.8.7
5+
16
# v14.8.7 (2023-07-20)
27
* **grid** arrow cursor on grid header text
38

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-components",
3-
"version": "14.8.7",
3+
"version": "14.8.8",
44
"author": {
55
"name": "UiPath Inc",
66
"url": "https://uipath.com"

‎projects/angular/components/ui-suggest/src/models/suggestValue.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,9 @@ export interface ISuggestValue extends VirtualScrollItem {
5353
svgIcon?: string;
5454
matIcon?: string;
5555
};
56+
57+
/**
58+
* Tooltip associated to the entry.
59+
*/
60+
tooltip?: string;
5661
}

‎projects/angular/components/ui-suggest/src/ui-suggest.component.html‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -100,28 +100,31 @@
100100
(keydown.esc)="preventDefault($event)"
101101
(keydown.tab)="close(false)"
102102
(keydown.shift.tab)="close()">
103-
<mat-chip *ngFor="let option of value; let i = index"
104-
[removable]="canRemoveChip(option)"
105-
[matTooltip]="intl.translateLabel(option.text)"
106-
(removed)="deselectItem(option)"
107-
class="chip-selectable">
108-
<mat-icon *ngIf="!!option?.icon?.svgIcon"
109-
[svgIcon]="option!.icon!.svgIcon!"
110-
class="chip-selectable-icon">
111-
</mat-icon>
112-
<mat-icon *ngIf="!!option?.icon?.matIcon"
113-
class="chip-selectable-icon">
114-
{{option?.icon?.matIcon}}
115-
</mat-icon>
116-
<span>
117-
{{ intl.translateLabel(option.text) }}
118-
</span>
119-
<button [attr.aria-hidden]="true"
120-
matChipRemove
121-
tabindex="-1">
122-
<mat-icon>close</mat-icon>
123-
</button>
124-
</mat-chip>
103+
<ng-container *ngFor="let option of value; let i = index">
104+
<mat-chip *ngLet="canRemoveChip(option) as canRemoveChip"
105+
[removable]="canRemoveChip"
106+
[matTooltip]="intl.translateLabel(option.text)"
107+
(removed)="deselectItem(option)"
108+
class="chip-selectable">
109+
<mat-icon *ngIf="!!option?.icon?.svgIcon"
110+
[svgIcon]="option!.icon!.svgIcon!"
111+
class="chip-selectable-icon">
112+
</mat-icon>
113+
<mat-icon *ngIf="!!option?.icon?.matIcon"
114+
class="chip-selectable-icon">
115+
{{option?.icon?.matIcon}}
116+
</mat-icon>
117+
<span>
118+
{{ intl.translateLabel(option.text) }}
119+
</span>
120+
<button *ngIf="canRemoveChip"
121+
[attr.aria-hidden]="true"
122+
matChipRemove
123+
tabindex="-1">
124+
<mat-icon>close</mat-icon>
125+
</button>
126+
</mat-chip>
127+
</ng-container>
125128

126129
<ng-container *ngIf="searchable">
127130
<input #searchInput
@@ -411,7 +414,7 @@
411414
</ng-container>
412415
</ng-container>
413416
<ng-template #defaultItem>
414-
<div [matTooltip]="disableTooltip ? '' : intl.translateLabel(item.text)"
417+
<div [matTooltip]="disableTooltip ? '' : intl.translateLabel(item.tooltip ?? item.text)"
415418
[attr.data-item-id]="item.id"
416419
matTooltipPosition="right"
417420
class="ui-suggest-item">

‎projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1456,7 +1456,7 @@ const sharedSpecifications = (
14561456
discardPeriodicTasks();
14571457
}));
14581458

1459-
it('should NOT be able to remove chip if readonly', fakeAsync(() => {
1459+
it('should NOT show remove button if chip is readonly', fakeAsync(() => {
14601460
const items = component.items!.slice(0, 3);
14611461
component.value = items;
14621462
component.readonly = true;
@@ -1466,19 +1466,7 @@ const sharedSpecifications = (
14661466
const initialChips = fixture.debugElement.queryAll(By.css('.mat-chip'));
14671467
expect(initialChips.length).toBe(3);
14681468

1469-
const chipRemoveButton = getNativeElement<HTMLButtonElement>(initialChips[1].query(By.css('button')));
1470-
chipRemoveButton.click();
1471-
1472-
fixture.detectChanges();
1473-
tick(5000);
1474-
1475-
const updatedChips = fixture.debugElement
1476-
.queryAll(By.css('.mat-chip span'))
1477-
.map(el => getNativeElement<HTMLSpanElement>(el));
1478-
1479-
expect(updatedChips.length).toEqual(3);
1480-
expect(updatedChips.map(chip => chip.innerText)).toEqual(items.map(item => item.text));
1481-
1469+
expect(initialChips[1].query(By.css('button'))).toBeFalsy();
14821470
discardPeriodicTasks();
14831471
}));
14841472
});

‎projects/angular/components/ui-suggest/src/ui-suggest.component.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
331331
!this.isOpen &&
332332
this._hasValue
333333
) {
334-
return this._getValueSummary();
334+
return this._getValueSummary(true);
335335
}
336336

337337
return null;
@@ -1719,11 +1719,12 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
17191719
});
17201720
}
17211721

1722-
private _getValueSummary() {
1723-
return (this.displayValueFactory ?? this._defaultDisplayValueFactory)(this.value);
1722+
private _getValueSummary(fromTooltip = false) {
1723+
return (this.displayValueFactory ?? this._defaultDisplayValueFactory)(this.value, fromTooltip);
17241724
}
17251725

1726-
private _defaultDisplayValueFactory = (value?: ISuggestValue[]) => (value ?? []).map(v => this.intl.translateLabel(v.text)).join(', ');
1726+
private _defaultDisplayValueFactory = (value?: ISuggestValue[], fromTooltip = false) =>
1727+
(value ?? []).map(v => this.intl.translateLabel((fromTooltip && v.tooltip) || v.text)).join(', ');
17271728

17281729
private _cantNavigate(increment: number) {
17291730
return (!this.items.length &&

‎projects/angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@uipath/angular",
3-
"version": "14.8.7",
3+
"version": "14.8.8",
44
"license": "MIT",
55
"author": {
66
"name": "UiPath Inc",

0 commit comments

Comments
 (0)