Skip to content

Commit 8dee696

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into mpopov/grid-symaries-css
2 parents a14f403 + b0e2942 commit 8dee696

27 files changed

+1523
-1466
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
# Ignite UI for Angular Change Log
22

33
All notable changes for each version of this project will be documented in this file.
4+
5+
## 12.0.0
6+
7+
### Themes:
8+
- Breaking Changes:
9+
- `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
10+
411
## 11.1.1
512

613
### New Features
@@ -10,7 +17,6 @@ All notable changes for each version of this project will be documented in this
1017
```html
1118
<input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/>
1219
```
13-
1420
## 11.1.0
1521

1622
### New Features

‎projects/igniteui-angular/migrations/update-12_0_0/changes/theme-props.json

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
{
2+
"$schema": "../../common/schema/theme-props.schema.json",
3+
"changes": [
4+
{
5+
"name": "$flat-border-radius",
6+
"replaceWith": "$border-radius",
7+
"owner": "igx-button-theme"
8+
},
9+
{
10+
"name": "$raised-border-radius",
11+
"replaceWith": "$border-radius",
12+
"owner": "igx-button-theme"
13+
},
14+
{
15+
"name": "$outlined-border-radius",
16+
"replaceWith": "$border-radius",
17+
"owner": "igx-button-theme"
18+
},
19+
{
20+
"name": "$fab-border-radius",
21+
"replaceWith": "$border-radius",
22+
"owner": "igx-button-theme"
23+
},
24+
{
25+
"name": "$icon-border-radius",
26+
"replaceWith": "$border-radius",
27+
"owner": "igx-button-theme"
28+
},
29+
{
30+
"name": "$flat-shadow-color",
31+
"replaceWith": "$shadow-color",
32+
"owner": "igx-button-theme"
33+
},
34+
{
35+
"name": "$raised-shadow-color",
36+
"replaceWith": "$shadow-color",
37+
"owner": "igx-button-theme"
38+
},
39+
{
40+
"name": "$outlined-shadow-color",
41+
"replaceWith": "$shadow-color",
42+
"owner": "igx-button-theme"
43+
},
44+
{
45+
"name": "$fab-shadow-color",
46+
"replaceWith": "$shadow-color",
47+
"owner": "igx-button-theme"
48+
},
49+
{
50+
"name": "$icon-shadow-color",
51+
"replaceWith": "$shadow-color",
52+
"owner": "igx-button-theme"
53+
},
54+
{
55+
"name": "$flat-background",
56+
"replaceWith": "$background",
57+
"owner": "igx-button-theme"
58+
},
59+
{
60+
"name": "$flat-hover-background",
61+
"replaceWith": "$hover-background",
62+
"owner": "igx-button-theme"
63+
},
64+
{
65+
"name": "$flat-focus-background",
66+
"replaceWith": "$focus-background",
67+
"owner": "igx-button-theme"
68+
},
69+
{
70+
"name": "$raised-background",
71+
"replaceWith": "$background",
72+
"owner": "igx-button-theme"
73+
},
74+
{
75+
"name": "$raised-hover-background",
76+
"replaceWith": "$hover-background",
77+
"owner": "igx-button-theme"
78+
},
79+
{
80+
"name": "$raised-focus-background",
81+
"replaceWith": "$focus-background",
82+
"owner": "igx-button-theme"
83+
},
84+
{
85+
"name": "$outlined-background",
86+
"replaceWith": "$background",
87+
"owner": "igx-button-theme"
88+
},
89+
{
90+
"name": "$outlined-hover-background",
91+
"replaceWith": "$hover-background",
92+
"owner": "igx-button-theme"
93+
},
94+
{
95+
"name": "$outlined-focus-background",
96+
"replaceWith": "$focus-background",
97+
"owner": "igx-button-theme"
98+
},
99+
{
100+
"name": "$fab-background",
101+
"replaceWith": "$background",
102+
"owner": "igx-button-theme"
103+
},
104+
{
105+
"name": "$fab-hover-background",
106+
"replaceWith": "$hover-background",
107+
"owner": "igx-button-theme"
108+
},
109+
{
110+
"name": "$fab-focus-background",
111+
"replaceWith": "$focus-background",
112+
"owner": "igx-button-theme"
113+
},
114+
{
115+
"name": "$icon-background",
116+
"replaceWith": "$background",
117+
"owner": "igx-button-theme"
118+
},
119+
{
120+
"name": "$icon-hover-background",
121+
"replaceWith": "$hover-background",
122+
"owner": "igx-button-theme"
123+
},
124+
{
125+
"name": "$icon-focus-background",
126+
"replaceWith": "$focus-background",
127+
"owner": "igx-button-theme"
128+
},
129+
{
130+
"name": "$flat-text-color",
131+
"replaceWith": "$foreground",
132+
"owner": "igx-button-theme"
133+
},
134+
{
135+
"name": "$flat-hover-text-color",
136+
"replaceWith": "$hover-foreground",
137+
"owner": "igx-button-theme"
138+
},
139+
{
140+
"name": "$flat-focus-text-color",
141+
"replaceWith": "$focus-foreground",
142+
"owner": "igx-button-theme"
143+
},
144+
{
145+
"name": "$raised-text-color",
146+
"replaceWith": "$foreground",
147+
"owner": "igx-button-theme"
148+
},
149+
{
150+
"name": "$raised-hover-text-color",
151+
"replaceWith": "$hover-foreground",
152+
"owner": "igx-button-theme"
153+
},
154+
{
155+
"name": "$raised-focus-text-color",
156+
"replaceWith": "$focus-foreground",
157+
"owner": "igx-button-theme"
158+
},
159+
{
160+
"name": "$outlined-text-color",
161+
"replaceWith": "$foreground",
162+
"owner": "igx-button-theme"
163+
},
164+
{
165+
"name": "$outlined-hover-text-color",
166+
"replaceWith": "$hover-foreground",
167+
"owner": "igx-button-theme"
168+
},
169+
{
170+
"name": "$outlined-focus-text-color",
171+
"replaceWith": "$focus-foreground",
172+
"owner": "igx-button-theme"
173+
},
174+
{
175+
"name": "$fab-text-color",
176+
"replaceWith": "$foreground",
177+
"owner": "igx-button-theme"
178+
},
179+
{
180+
"name": "$fab-hover-text-color",
181+
"replaceWith": "$hover-foreground",
182+
"owner": "igx-button-theme"
183+
},
184+
{
185+
"name": "$fab-focus-text-color",
186+
"replaceWith": "$focus-foreground",
187+
"owner": "igx-button-theme"
188+
},
189+
{
190+
"name": "$icon-color",
191+
"replaceWith": "$foreground",
192+
"owner": "igx-button-theme"
193+
},
194+
{
195+
"name": "$icon-hover-color",
196+
"replaceWith": "$hover-foreground",
197+
"owner": "igx-button-theme"
198+
},
199+
{
200+
"name": "$icon-focus-color",
201+
"replaceWith": "$focus-foreground",
202+
"owner": "igx-button-theme"
203+
},
204+
{
205+
"name": "$flat-icon-color",
206+
"remove": true,
207+
"owner": "igx-button-theme"
208+
},
209+
{
210+
"name": "$flat-hover-icon-color",
211+
"remove": true,
212+
"owner": "igx-button-theme"
213+
},
214+
{
215+
"name": "$flat-focus-icon-color",
216+
"remove": true,
217+
"owner": "igx-button-theme"
218+
},
219+
{
220+
"name": "$raised-icon-color",
221+
"remove": true,
222+
"owner": "igx-button-theme"
223+
},
224+
{
225+
"name": "$raised-hover-icon-color",
226+
"remove": true,
227+
"owner": "igx-button-theme"
228+
},
229+
{
230+
"name": "$raised-focus-icon-color",
231+
"remove": true,
232+
"owner": "igx-button-theme"
233+
},
234+
{
235+
"name": "$outlined-icon-color",
236+
"remove": true,
237+
"owner": "igx-button-theme"
238+
},
239+
{
240+
"name": "$outlined-hover-icon-color",
241+
"remove": true,
242+
"owner": "igx-button-theme"
243+
},
244+
{
245+
"name": "$outlined-focus-icon-color",
246+
"remove": true,
247+
"owner": "igx-button-theme"
248+
},
249+
{
250+
"name": "$raised-resting-shadow",
251+
"replaceWith": "$resting-shadow",
252+
"owner": "igx-button-theme"
253+
},
254+
{
255+
"name": "$raised-hover-shadow",
256+
"replaceWith": "$hover-shadow",
257+
"owner": "igx-button-theme"
258+
},
259+
{
260+
"name": "$raised-focus-shadow",
261+
"replaceWith": "$focus-shadow",
262+
"owner": "igx-button-theme"
263+
},
264+
{
265+
"name": "$fab-resting-shadow",
266+
"replaceWith": "$resting-shadow",
267+
"owner": "igx-button-theme"
268+
},
269+
{
270+
"name": "$fab-hover-shadow",
271+
"replaceWith": "$hover-shadow",
272+
"owner": "igx-button-theme"
273+
},
274+
{
275+
"name": "$fab-focus-shadow",
276+
"replaceWith": "$focus-shadow",
277+
"owner": "igx-button-theme"
278+
},
279+
{
280+
"name": "$outlined-outline-color",
281+
"replaceWith": "$border-color",
282+
"owner": "igx-button-theme"
283+
},
284+
{
285+
"name": "$outlined-disabled-outline-color",
286+
"replaceWith": "$disabled-border-color",
287+
"owner": "igx-button-theme"
288+
},
289+
{
290+
"name": "$disabled-text-color",
291+
"replaceWith": "$disabled-foreground",
292+
"owner": "igx-button-theme"
293+
}
294+
]
295+
}

‎projects/igniteui-angular/src/lib/chips/chip.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ let CHIP_ID = 0;
7979
templateUrl: 'chip.component.html'
8080
})
8181
export class IgxChipComponent extends DisplayDensityBase {
82-
8382
/**
8483
* An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
8584
*
@@ -404,10 +403,17 @@ export class IgxChipComponent extends DisplayDensityBase {
404403
@HostBinding('attr.class')
405404
public get hostClass(): string {
406405
const classes = [this.getComponentDensityClass('igx-chip')];
406+
407+
// Add the base class first for each density
408+
if (!classes.includes('igx-chip')) {
409+
classes.unshift('igx-chip');
410+
}
411+
407412
classes.push(this.disabled ? 'igx-chip--disabled' : '');
413+
408414
// The custom classes should be at the end.
409415
classes.push(this.class);
410-
return classes.join(' ');
416+
return classes.join(' ').toString().trim();
411417
}
412418

413419
/**

‎projects/igniteui-angular/src/lib/chips/chip.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ describe('IgxChip', () => {
179179
// Assert default css class is applied
180180
const comfortableComponents = fix.debugElement.queryAll(By.css(CHIP_CLASS));
181181

182-
expect(comfortableComponents.length).toEqual(7);
182+
expect(comfortableComponents.length).toEqual(9);
183183
expect(comfortableComponents[0].nativeElement).toBe(firstComponent.nativeElement);
184184
expect(comfortableComponents[1].nativeElement).toBe(secondComponent.nativeElement);
185185
});

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,23 @@
1515
@extend %igx-group-item !optional;
1616
}
1717

18-
@include e(button-text) {
19-
@extend %igx-button-group__button-text !optional;
20-
}
21-
2218
@include e(item, $m: selected) {
23-
@extend %igx-group-item !optional;
2419
@extend %igx-group-item-selected !optional;
2520
}
2621

2722
@include e(item-content) {
2823
@extend %igx-group-item-content !optional;
2924
}
3025

31-
@include m(vertical) {
26+
@include e(button-text) {
27+
@extend %igx-button-group__button-text !optional;
28+
}
3229

33-
@extend %igx-group-display !optional;
30+
@include m(vertical) {
3431
@extend %igx-group-vertical !optional;
3532

3633
@include e(item) {
37-
@extend %igx-group-item !optional;
3834
@extend %igx-group-item-vertical !optional;
3935
}
40-
41-
@include e(item, $m: selected) {
42-
@extend %igx-group-item !optional;
43-
@extend %igx-group-item-selected !optional;
44-
}
4536
}
4637
}

0 commit comments

Comments
 (0)