Skip to content

Commit 91da735

Browse files
LipataLipata
authored
Merge pull request #6042 from IgniteUI/fix-#5983-8.2
fix(grid toolbar): Change the default buttons in the grid toolbar from flat to outlined
2 parents 161b166 + 97c5436 commit 91da735

File tree

8 files changed

+151
-131
lines changed

8 files changed

+151
-131
lines changed

‎projects/igniteui-angular/migrations/migration-collection.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@
5555
"version": "8.2.3",
5656
"description": "Updates Ignite UI for Angular from v8.2.0 to v8.2.3",
5757
"factory": "./update-8_2_3"
58+
},
59+
"migration-12": {
60+
"version": "8.2.6",
61+
"description": "Updates Ignite UI for Angular from v8.2.3 to v8.2.6",
62+
"factory": "./update-8_2_6"
5863
}
5964
}
6065
}

‎projects/igniteui-angular/migrations/update-8_2_6/changes/theme-props.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"$schema": "../../common/schema/theme-props.schema.json",
3+
"changes": [
4+
{
5+
"name": "$button-background",
6+
"remove": true,
7+
"owner": "igx-grid-toolbar-theme"
8+
},
9+
{
10+
"name": "$button-text-color",
11+
"remove": true,
12+
"owner": "igx-grid-toolbar-theme"
13+
},
14+
{
15+
"name": "$button-hover-background",
16+
"remove": true,
17+
"owner": "igx-grid-toolbar-theme"
18+
},
19+
{
20+
"name": "$button-hover-text-color",
21+
"remove": true,
22+
"owner": "igx-grid-toolbar-theme"
23+
},
24+
{
25+
"name": "$button-focus-background",
26+
"remove": true,
27+
"owner": "igx-grid-toolbar-theme"
28+
},
29+
{
30+
"name": "$button-focus-text-color",
31+
"remove": true,
32+
"owner": "igx-grid-toolbar-theme"
33+
}
34+
]
35+
}

‎projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import * as path from 'path';
2+
3+
// tslint:disable:no-implicit-dependencies
4+
import { EmptyTree } from '@angular-devkit/schematics';
5+
// tslint:disable-next-line:no-submodule-imports
6+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
7+
8+
describe('Update 8.2.6', () => {
9+
let appTree: UnitTestTree;
10+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
11+
const configJson = {
12+
defaultProject: 'testProj',
13+
projects: {
14+
testProj: {
15+
sourceRoot: '/testSrc'
16+
}
17+
},
18+
schematics: {
19+
'@schematics/angular:component': {
20+
prefix: 'appPrefix'
21+
}
22+
}
23+
};
24+
25+
beforeEach(() => {
26+
appTree = new UnitTestTree(new EmptyTree());
27+
appTree.create('/angular.json', JSON.stringify(configJson));
28+
});
29+
30+
it('should update igx-carousel-theme prop', done => {
31+
appTree.create(
32+
'/testSrc/appPrefix/component/test.component.scss',
33+
`$my-toolbar-theme: igx-grid-toolbar-theme(
34+
$background-color: null,
35+
$button-background: null,
36+
$title-text-color: null,
37+
$button-text-color: null,
38+
$button-hover-background: null,
39+
$button-hover-text-color: null,
40+
$button-focus-background: null,
41+
$button-focus-text-color: null,
42+
$dropdown-background: null,
43+
$item-text-color: null,
44+
$item-hover-background: null,
45+
$item-hover-text-color: null,
46+
$item-focus-background: null,
47+
$item-focus-text-color: null
48+
);`
49+
);
50+
const tree = schematicRunner.runSchematic('migration-12', {}, appTree);
51+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
52+
.toEqual(
53+
`$my-toolbar-theme: igx-grid-toolbar-theme(
54+
$background-color: null,
55+
$title-text-color: null,
56+
$dropdown-background: null,
57+
$item-text-color: null,
58+
$item-hover-background: null,
59+
$item-hover-text-color: null,
60+
$item-focus-background: null,
61+
$item-focus-text-color: null
62+
);`
63+
);
64+
done();
65+
});
66+
});

‎projects/igniteui-angular/migrations/update-8_2_6/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
6+
import { UpdateChanges } from '../common/UpdateChanges';
7+
8+
const version = '8.2.6';
9+
10+
export default function(): Rule {
11+
return (host: Tree, context: SchematicContext) => {
12+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
13+
14+
const update = new UpdateChanges(__dirname, host, context);
15+
update.applyChanges();
16+
};
17+
}

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

Lines changed: 8 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@
1010
///
1111
/// @param {Color} $background-color [null] - The toolbar background color.
1212
/// @param {Color} $title-text-color [null] - The toolbar title text color.
13-
/// @param {Color} $button-background [null] - The toolbar button background color.
14-
/// @param {Color} $button-text-color [null] - The toolbar button text color.
15-
/// @param {Color} $button-hover-background [null] - The toolbar button hover background color.
16-
/// @param {Color} $button-hover-text-color [null] - The toolbar button hover text color.
17-
/// @param {Color} $button-focus-background [null] - The toolbar button focus background color.
18-
/// @param {Color} $button-focus-text-color [null] - The toolbar button focus text color.
1913
/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.
2014
/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color.
2115
/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color.
@@ -41,15 +35,8 @@
4135
$schema: $light-schema,
4236
4337
$background-color: null,
44-
$button-background: null,
4538
$title-text-color: null,
4639
47-
$button-text-color: null,
48-
$button-hover-background: null,
49-
$button-hover-text-color: null,
50-
$button-focus-background: null,
51-
$button-focus-text-color: null,
52-
5340
$dropdown-background: null,
5441
$item-text-color: null,
5542
$item-hover-background: null,
@@ -92,44 +79,13 @@
9279
$item-focus-text-color: text-contrast($item-focus-background);
9380
}
9481

95-
@if not($button-hover-background) and $background-color {
96-
$button-hover-text-color: text-contrast($background-color);
97-
98-
@if type-of($background-color) == 'color' {
99-
$button-hover-background: rgba(text-contrast($background-color), .2);
100-
}
101-
}
102-
103-
@if not($button-focus-background) and $background-color {
104-
$button-focus-text-color: text-contrast($background-color);
105-
106-
@if type-of($background-color) == 'color' {
107-
$button-focus-background: rgba(text-contrast($background-color), .2);
108-
}
109-
}
110-
111-
@if not($button-background) and $background-color {
112-
$button-text-color: text-contrast($background-color);
113-
114-
@if type-of($background-color) == 'color' {
115-
$button-background: rgba(text-contrast($background-color), .1);
116-
}
117-
}
118-
11982
@return extend($theme, (
12083
name: $name,
12184
palette: $palette,
12285

12386
background-color: $background-color,
124-
button-background: $button-background,
12587
title-text-color: $title-text-color,
12688

127-
button-text-color: $button-text-color,
128-
button-hover-background: $button-hover-background,
129-
button-hover-text-color: $button-hover-text-color,
130-
button-focus-background: $button-focus-background,
131-
button-focus-text-color: $button-focus-text-color,
132-
13389
item-text-color: $item-text-color,
13490
dropdown-background: $dropdown-background,
13591
item-hover-background: $item-hover-background,
@@ -191,39 +147,11 @@
191147
padding: map-get($grid-toolbar-padding-rtl, 'comfortable');
192148
}
193149

194-
%igx-button--flat {
195-
background: --var($theme, 'button-background');
196-
color: --var($theme, 'button-text-color');
197-
margin-#{$left}: rem(8);
198-
199-
&:hover {
200-
background: --var($theme, 'button-hover-background');
201-
color: --var($theme, 'button-hover-text-color');
202-
}
203-
204-
&:focus,
205-
&:active {
206-
background: --var($theme, 'button-focus-background');
207-
color: --var($theme, 'button-focus-text-color');
208-
}
209-
}
210-
211-
%igx-button--icon {
212-
background: --var($theme, 'button-background');
213-
color: --var($theme, 'button-text-color');
150+
%igx-button--outlined,
151+
%igx-button--raised,
152+
%igx-button--flat,
153+
%igx-button--icon{
214154
margin-#{$left}: rem(8);
215-
border-radius: 0;
216-
217-
&:hover {
218-
background: --var($theme, 'button-hover-background');
219-
color: --var($theme, 'button-hover-text-color');
220-
}
221-
222-
&:focus,
223-
&:active {
224-
background: --var($theme, 'button-focus-background');
225-
color: --var($theme, 'button-focus-text-color');
226-
}
227155
}
228156

229157
%igx-grid-toolbar__button-space {
@@ -249,8 +177,10 @@
249177
&[dir='rtl'] {
250178
text-align: #{$right};
251179

180+
%igx-button--outlined,
181+
%igx-button--raised,
252182
%igx-button--flat,
253-
%igx-button--icon {
183+
%igx-button--icon{
254184
margin-#{$left}: 0;
255185
margin-#{$right}: rem(8);
256186
}
@@ -321,7 +251,7 @@
321251
}
322252

323253
%igx-grid-toolbar__adv-filter--filtered {
324-
color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
254+
border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
325255
}
326256

327257
%igx-grid-toolbar__dropdown {

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@
1111
///
1212
/// @property {map} background-color [igx-color: ('grays', 50)] - The toolbar background color.
1313
/// @property {map} title-text-color [igx-color: ('grays', 600)] - The toolbar title text color.
14-
/// @property {map} button-background [igx-color: ('grays', 100)] - The toolbar button background color.
15-
/// @property {map} button-text-color [igx-color: ('grays', 600)] - The toolbar button text color.
16-
/// @property {map} button-hover-background [igx-color: ('grays', 100)] - The toolbar button hover background color.
17-
/// @property {map} button-hover-text-color [igx-color: ('grays', 600)] - The toolbar button hover text color.
18-
/// @property {map} button-focus-background [igx-color: ('grays', 100)] - The toolbar button focus background color.
19-
/// @property {map} button-focus-text-color [igx-color: ('grays', 600)] - The toolbar button focus text color.
14+
2015
/// @property {Color} dropdown-background [#fff] - The toolbar drop-down background color.
2116
/// @property {map} item-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item text color.
2217
/// @property {map} item-hover-background [igx-color: ('grays', 100)] - The toolbar drop-down item hover background color.
@@ -35,30 +30,6 @@ $_light-grid-toolbar: (
3530
igx-color: ('grays', 600)
3631
),
3732

38-
button-background: (
39-
igx-color: ('grays', 100)
40-
),
41-
42-
button-text-color: (
43-
igx-color: ('grays', 600)
44-
),
45-
46-
button-hover-background: (
47-
igx-color: ('grays', 100)
48-
),
49-
50-
button-hover-text-color: (
51-
igx-color: ('grays', 600)
52-
),
53-
54-
button-focus-background: (
55-
igx-color: ('grays', 100)
56-
),
57-
58-
button-focus-text-color: (
59-
igx-color: ('grays', 600)
60-
),
61-
6233
dropdown-background: #fff,
6334

6435
item-text-color: (
@@ -79,14 +50,13 @@ $_light-grid-toolbar: (
7950

8051
item-focus-text-color: (
8152
igx-color: ('grays', 600)
82-
)
53+
),
8354
);
8455

8556
/// Generates a fluent grid-toolbar schema.
8657
/// @type {Map}
8758
///
8859
/// @property {map} background-color [igx-color: 'surface'] - The toolbar background color.
89-
/// @property {map} button-hover-text-color [igx-color: ('primary', 500)] - The toolbar button hover text color.
9060
///
9161
/// @requires {function} extend
9262
/// @requires {map} $_light-grid-toolbar
@@ -96,9 +66,5 @@ $_fluent-grid-toolbar: extend(
9666
background-color: (
9767
igx-color: 'surface'
9868
),
99-
100-
button-hover-text-color: (
101-
igx-color: ('primary', 500)
102-
),
10369
)
10470
);

‎projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99

1010
<div class="igx-grid-toolbar__actions">
1111
<div *ngIf="grid.allowAdvancedFiltering">
12-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #advancedFilteringButton name="btnAdvancedFiltering" igxButton igxRipple
12+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #advancedFilteringButton name="btnAdvancedFiltering" igxRipple
13+
[ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'"
1314
(click)="showAdvancedFilteringUI()">
1415
<div class="igx-grid-toolbar__button-space">
15-
<igx-icon [ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">
16+
<igx-icon>
1617
filter_list
1718
</igx-icon>
1819
<span>{{grid.resourceStrings.igx_grid_advanced_filter_title}}</span>
@@ -21,7 +22,7 @@
2122
</div>
2223

2324
<div *ngIf="grid.columnHiding">
24-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #columnHidingButton name="btnColumnHiding" igxButton igxRipple
25+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnHidingButton name="btnColumnHiding" igxRipple
2526
(click)="toggleColumnHidingUI()">
2627
<div class="igx-grid-toolbar__button-space">
2728
<igx-icon *ngIf="grid.hiddenColumnsCount > 0">visibility_off</igx-icon>
@@ -41,7 +42,7 @@
4142
</igx-drop-down>
4243
</div>
4344
<div *ngIf="grid.columnPinning">
44-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxButton igxRipple
45+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
4546
(click)="toggleColumnPinningUI()">
4647
<div class="igx-grid-toolbar__button-space">
4748
<igx-icon *ngIf="pinnedColumnsCount > 0">lock</igx-icon>
@@ -61,7 +62,7 @@
6162
</div>
6263

6364
<div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
64-
<button igxButton="flat" [displayDensity]="grid.displayDensity" igxRipple #btnExport
65+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btnExport
6566
(click)="exportClicked()">
6667
<span class="igx-grid-toolbar__button-space">
6768
<igx-icon fontSet="material">import_export</igx-icon>

0 commit comments

Comments
 (0)