Skip to content

Commit 0848f6e

Browse files
LipataLipata
authored
Merge branch '10.0.x' into didimmova/fix-7786-10.0.x
2 parents 16eb309 + 72864e8 commit 0848f6e

File tree

9 files changed

+92
-24
lines changed

9 files changed

+92
-24
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ All notable changes for each version of this project will be documented in this
2828
- `igxGrid`
2929
- **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
3030
- `igx-select`, `igx-combo`, `igx-drop-down`
31-
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
31+
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
3232
- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
3333
- `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
3434
- `actions` - contains information about the transactions, that caused the emission of the event.

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,14 @@
542542
@extend %igx-grid__filtering-cell-indicator--hidden !optional;
543543
}
544544

545+
@include e(filtering-dropdown-items) {
546+
@extend %igx-grid__filtering-dropdown-items !optional;
547+
}
548+
549+
@include e(filtering-dropdown-text) {
550+
@extend %igx-grid__filtering-dropdown-text !optional;
551+
}
552+
545553
@include e(filtering-row) {
546554
@extend %igx-grid__filtering-row !optional;
547555
}
@@ -554,8 +562,12 @@
554562
@extend %igx-grid__filtering-row--compact !optional;
555563
}
556564

557-
@include e(filtering-row-buttons) {
558-
@extend %igx-grid__filtering-row-buttons !optional;
565+
@include e(filtering-row-editing-buttons) {
566+
@extend %igx-grid__filtering-row-editing-buttons !optional;
567+
}
568+
569+
@include e(filtering-row-editing-buttons, $m: small) {
570+
@extend %igx-grid__filtering-row-editing-buttons--small !optional;
559571
}
560572

561573
@include e(filtering-row-main) {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2364,7 +2364,9 @@
23642364
}
23652365

23662366
igx-input-group {
2367-
flex: 0 0 200px;
2367+
width: 100%;
2368+
max-width: rem(200px);
2369+
min-width: rem(140px);
23682370
}
23692371

23702372
igx-prefix:focus {
@@ -2386,6 +2388,15 @@
23862388
}
23872389
}
23882390

2391+
%igx-grid__filtering-dropdown-items {
2392+
display: flex;
2393+
align-items: center;
2394+
}
2395+
2396+
%igx-grid__filtering-dropdown-text {
2397+
margin-left: rem(16px);
2398+
}
2399+
23892400
%igx-grid__filtering-row--cosy {
23902401
height: map-get($grid-header-height, 'cosy');
23912402
}
@@ -2399,6 +2410,7 @@
23992410
flex: 1;
24002411
overflow: hidden;
24012412
max-width: calc(100% - 176px);
2413+
min-width: rem(56px);
24022414

24032415
igx-chips-area {
24042416
transition: transform .25s $ease-out-back;
@@ -2630,4 +2642,28 @@
26302642

26312643
@include _excel-filtering($theme, $palette);
26322644
@include _advanced-filtering($theme, $palette);
2645+
2646+
%igx-grid__filtering-row-editing-buttons--small,
2647+
%igx-grid__filtering-row-editing-buttons {
2648+
display: flex;
2649+
align-items: center;
2650+
}
2651+
2652+
%igx-grid__filtering-row-editing-buttons {
2653+
button {
2654+
igx-icon {
2655+
margin-#{$right}: rem(8px);
2656+
}
2657+
}
2658+
}
2659+
2660+
%igx-grid__filtering-row-editing-buttons--small {
2661+
button {
2662+
&:not([disabled]) {
2663+
igx-icon {
2664+
color: --var($theme, 'sorted-header-icon-color');
2665+
}
2666+
}
2667+
}
2668+
}
26332669
}

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,12 @@ <h6 class="igx-filter-empty__title">
160160
[name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
161161
</igx-icon>
162162
<igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
163-
<igx-icon fontSet="filtering-icons"
164-
[name]="selectedColumn.filters.condition(condition).iconName">
165-
</igx-icon>
166-
<span>{{getConditionFriendlyName(condition)}}</span>
163+
<div class="igx-grid__filtering-dropdown-items">
164+
<igx-icon fontSet="filtering-icons"
165+
[name]="selectedColumn.filters.condition(condition).iconName">
166+
</igx-icon>
167+
<span class="igx-grid__filtering-dropdown-text">{{getConditionFriendlyName(condition)}}</span>
168+
</div>
167169
</igx-select-item>
168170
</igx-select>
169171

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<igx-drop-down-item *ngFor="let condition of conditions"
44
[value]="condition"
55
[selected]="isConditionSelected(condition)">
6-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
7-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
6+
<div class="igx-grid__filtering-dropdown-items">
7+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
8+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
9+
</div>
810
</igx-drop-down-item>
911
</igx-drop-down>
1012

@@ -121,7 +123,13 @@
121123
<igx-icon>navigate_next</igx-icon>
122124
</button>
123125

124-
<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
125-
<button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">{{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</button>
126-
<button #closeButton igxButton igxRipple (click)="close()">{{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</button>
126+
<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
127+
<button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
128+
<igx-icon>refresh</igx-icon>
129+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
130+
</button>
131+
<button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="close()">
132+
<igx-icon>close</igx-icon>
133+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
134+
</button>
127135
</div>

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -778,4 +778,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
778778
private get isColumnFiltered() {
779779
return this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0;
780780
}
781+
782+
public get isNarrowWidth(): boolean {
783+
return this.element.nativeElement.offsetWidth < 432;
784+
}
781785
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
<igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
1010
</igx-prefix>
1111
<igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
12-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
13-
<span>{{translateCondition(condition)}}</span>
12+
<div class="igx-grid__filtering-dropdown-items">
13+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
14+
<span class="igx-grid__filtering-dropdown-text">{{translateCondition(condition)}}</span>
15+
</div>
1416
</igx-select-item>
1517
</igx-select>
1618

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -166,12 +166,16 @@ <h4>{{ column.header || column.field }}</h4>
166166
<igx-drop-down-item
167167
*ngFor="let condition of conditions"
168168
[value]="condition">
169-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
170-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
169+
<div class="igx-grid__filtering-dropdown-items">
170+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
171+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
172+
</div>
171173
</igx-drop-down-item>
172174
<igx-drop-down-item *ngIf="showCustomFilterItem()">
173-
<igx-icon>filter_list</igx-icon>
174-
<span style="margin-left: 16px">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
175+
<div class="igx-grid__filtering-dropdown-items">
176+
<igx-icon>filter_list</igx-icon>
177+
<span class="igx-grid__filtering-dropdown-text">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
178+
</div>
175179
</igx-drop-down-item>
176180
</div>
177181
</igx-drop-down>

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1128,7 +1128,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11281128
const reset = editingBtns.queryAll(By.css('button'))[0];
11291129
const close = editingBtns.queryAll(By.css('button'))[1];
11301130

1131-
expect(reset.nativeElement.innerText).toBe('Reset');
1131+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11321132
}));
11331133

11341134
it('Should correctly change resource strings for filter row using Changei18n.', fakeAsync(() => {
@@ -1151,8 +1151,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11511151
const reset = editingBtns.queryAll(By.css('button'))[0];
11521152
const close = editingBtns.queryAll(By.css('button'))[1];
11531153

1154-
expect(close.nativeElement.innerText).toBe('My close');
1155-
expect(reset.nativeElement.innerText).toBe('Reset');
1154+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1155+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11561156

11571157
changei18n({
11581158
igx_grid_filter: 'Filter',
@@ -1181,8 +1181,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11811181
const reset = editingBtns.queryAll(By.css('button'))[0];
11821182
const close = editingBtns.queryAll(By.css('button'))[1];
11831183

1184-
expect(close.nativeElement.innerText).toBe('My close');
1185-
expect(reset.nativeElement.innerText).toBe('Reset');
1184+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1185+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11861186
}));
11871187

11881188
it('should correctly apply locale to datePicker.', fakeAsync(() => {

0 commit comments

Comments
 (0)