Skip to content

Commit 210ff02

Browse files
andrewseguintinayuangao
authored andcommitted
feat(compatibility): remove conflicts with material1 css styling (#2790)
* feat(compatibility): remove conflicts with material1 css styling * fix tests * fix input changes * autocomplete changes * merge changes * change class assignment to evaluation * add back in the line truncate for select * fix button on simple snackbar * fix tests
1 parent 4b830d3 commit 210ff02

File tree

186 files changed

+2529
-2134
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

186 files changed

+2529
-2134
lines changed

CODING_STANDARDS.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ if (!$attrs['tabindex']) {
4343
For example, rather than doing this:
4444
```html
4545
<md-button>Basic button</md-button>
46-
<md-button class="md-fab">FAB</md-button>
47-
<md-button class="md-icon-button">pony</md-button>
46+
<md-button class="mat-fab">FAB</md-button>
47+
<md-button class="mat-icon-button">pony</md-button>
4848
```
4949

5050
do this:
@@ -192,13 +192,13 @@ code organization.** This will allow users to much more easily override styles.
192192

193193
For example, rather than doing this:
194194
```scss
195-
md-calendar {
195+
.mat-calendar {
196196
display: block;
197197

198-
.md-month {
198+
.mat-month {
199199
display: inline-block;
200200

201-
.md-date.md-selected {
201+
.mat-date.mat-selected {
202202
font-weight: bold;
203203
}
204204
}
@@ -207,15 +207,15 @@ md-calendar {
207207

208208
do this:
209209
```scss
210-
md-calendar {
210+
.mat-calendar {
211211
display: block;
212212
}
213213

214-
.md-calendar-month {
214+
.mat-calendar-month {
215215
display: inline-block;
216216
}
217217

218-
.md-calendar-date.md-selected {
218+
.mat-calendar-date.mat-selected {
219219
font-weight: bold;
220220
}
221221
```
@@ -260,11 +260,11 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
260260
When it is not super obvious, include a brief description of what a class represents. For example:
261261
```scss
262262
// The calendar icon button used to open the calendar pane.
263-
.md-datepicker-button { ... }
263+
.mat-datepicker-button { ... }
264264

265265
// Floating pane that contains the calendar at the bottom of the input.
266-
.md-datepicker-calendar-pane { ... }
266+
.mat-datepicker-calendar-pane { ... }
267267

268268
// Portion of the floating panel that sits, invisibly, on top of the input.
269-
.md-datepicker-input-mask { }
269+
.mat-datepicker-input-mask { }
270270
```

e2e/components/menu/menu-page.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {browser, by, element, ElementFinder} from 'protractor';
33
export class MenuPage {
44
constructor() { browser.get('/menu'); }
55

6-
menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
6+
menu(): ElementFinder { return element(by.css('.mat-menu-panel')); }
77

88
start(): ElementFinder { return element(by.id('start')); }
99

@@ -23,11 +23,11 @@ export class MenuPage {
2323

2424
combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
2525

26-
beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
26+
beforeMenu(): ElementFinder { return element(by.css('.mat-menu-panel.before')); }
2727

28-
aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
28+
aboveMenu(): ElementFinder { return element(by.css('.mat-menu-panel.above')); }
2929

30-
combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
30+
combinedMenu(): ElementFinder { return element(by.css('.mat-menu-panel.combined')); }
3131

3232
getResultText() { return this.textArea().getText(); }
3333
}

e2e/components/menu/menu.e2e.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '.
44
import {pressKeys} from '../../util/actions';
55

66
describe('menu', () => {
7-
const menuSelector = '.md-menu-panel';
7+
const menuSelector = '.mat-menu-panel';
88
let page: MenuPage;
99

1010
beforeEach(() => page = new MenuPage());
@@ -60,7 +60,7 @@ describe('menu', () => {
6060
it('should mirror classes on host to menu template in overlay', () => {
6161
page.trigger().click();
6262
page.menu().getAttribute('class').then((classes: string) => {
63-
expect(classes).toContain('md-menu-panel custom');
63+
expect(classes).toContain('mat-menu-panel custom');
6464
});
6565
});
6666

e2e/components/radio/radio.e2e.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('radio', () => {
77
it('should be checked when clicked', () => {
88
element(by.id('water')).click();
99
element(by.id('water')).getAttribute('class').then((value: string) => {
10-
expect(value).toContain('md-radio-checked');
10+
expect(value).toContain('mat-radio-checked');
1111
});
1212
element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
1313
expect(value).toBeTruthy();
@@ -18,7 +18,7 @@ describe('radio', () => {
1818

1919
element(by.id('leaf')).click();
2020
element(by.id('leaf')).getAttribute('class').then((value: string) => {
21-
expect(value).toContain('md-radio-checked');
21+
expect(value).toContain('mat-radio-checked');
2222
});
2323
element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
2424
expect(value).toBeTruthy();
@@ -32,15 +32,15 @@ describe('radio', () => {
3232
element(by.id('toggle-disable')).click();
3333
element(by.id('water')).click();
3434
element(by.id('water')).getAttribute('class').then((value: string) => {
35-
expect(value).toContain('md-radio-disabled');
35+
expect(value).toContain('mat-radio-disabled');
3636
});
3737
element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
3838
expect(value).toBeTruthy();
3939
});
4040

4141
element(by.id('leaf')).click();
4242
element(by.id('leaf')).getAttribute('class').then((value: string) => {
43-
expect(value).toContain('md-radio-disabled');
43+
expect(value).toContain('mat-radio-disabled');
4444
});
4545
element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
4646
expect(value).toBeTruthy();

e2e/components/slide-toggle/slide-toggle.e2e.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ describe('slide-toggle', () => {
4343

4444
it('should move the thumb on state change', () => {
4545
let slideToggleEl = getNormalToggle();
46-
let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
46+
let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
4747

4848
let previousX = thumbEl.getLocation().then(pos => pos.x);
4949

e2e/components/tabs/tabs.e2e.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('tabs', () => {
1010
beforeEach(() => {
1111
browser.get('/tabs');
1212
tabGroup = element(by.css('md-tab-group'));
13-
tabLabels = element.all(by.css('.md-tab-label'));
13+
tabLabels = element.all(by.css('.mat-tab-label'));
1414
tabBodies = element.all(by.css('md-tab-body'));
1515
});
1616

@@ -67,12 +67,12 @@ function getFocusStates(elements: ElementArrayFinder) {
6767

6868
/** Returns an array of true/false that represents the active states for the provided elements. */
6969
function getLabelActiveStates(elements: ElementArrayFinder) {
70-
return getClassStates(elements, 'md-tab-label-active');
70+
return getClassStates(elements, 'mat-tab-label-active');
7171
}
7272

7373
/** Returns an array of true/false that represents the active states for the provided elements */
7474
function getBodyActiveStates(elements: ElementArrayFinder) {
75-
return getClassStates(elements, 'md-tab-body-active');
75+
return getClassStates(elements, 'mat-tab-body-active');
7676
}
7777

7878
/**

src/demo-app/autocomplete/autocomplete-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
display: flex;
33
flex-flow: row wrap;
44

5-
md-card {
5+
.mat-card {
66
width: 400px;
77
margin: 24px;
88
}
99

10-
md-input-container {
10+
.mat-input-container {
1111
margin-top: 16px;
1212
}
1313
}

src/demo-app/baseline/baseline-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.demo-basic {
33
padding: 0;
44
}
5-
.demo-basic md-card-content {
5+
.demo-basic .mat-card-content {
66
padding: 16px;
77
}
88
.demo-full-width {

src/demo-app/card/card-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</md-card-content>
5252
</md-card>
5353

54-
<md-card class="demo-card-blue md-card-flat">
54+
<md-card class="demo-card-blue mat-card-flat">
5555
<md-card-title>Easily customizable</md-card-title>
5656
<md-card-actions>
5757
<button md-button>First</button>

src/demo-app/card/card-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
flex-flow: column nowrap;
44

5-
md-card {
5+
.mat-card {
66
margin: 0 16px 16px 0;
77
width: 350px;
88
}
@@ -15,7 +15,7 @@
1515
.demo-card-blue {
1616
background-color: #b0becc;
1717

18-
md-card-actions {
18+
.mat-card-actions {
1919
display: flex;
2020
flex-direction: column;
2121
}

0 commit comments

Comments
 (0)