Skip to content

Commit ec1e180

Browse files
authored
feat(core): directive to add extra classes to components for m1 compat (#1498)
* feat(core): directive to add extra classes to components for m1 compatibility * fix e2e tests for menu
1 parent 5a528aa commit ec1e180

File tree

10 files changed

+94
-13
lines changed

10 files changed

+94
-13
lines changed

e2e/components/icon/icon.e2e.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ describe('icon', () => {
1515

1616
it('should have the correct class when used', () => {
1717
testIcon.getAttribute('class').then((attr: string) => {
18-
expect(attr).toEqual('md-24 material-icons');
18+
expect(attr).toContain('md-24');
19+
expect(attr).toContain('material-icons');
1920
});
2021
});
2122

e2e/components/menu/menu-page.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export class MenuPage {
66
browser.get('/menu');
77
}
88

9-
menu() { return element(by.css('.md-menu')); }
9+
menu() { return element(by.css('.md-menu-panel')); }
1010

1111
start() { return element(by.id('start')); }
1212

@@ -28,11 +28,11 @@ export class MenuPage {
2828

2929
combinedTrigger() { return element(by.id('combined-t')); }
3030

31-
beforeMenu() { return element(by.css('.md-menu.before')); }
31+
beforeMenu() { return element(by.css('.md-menu-panel.before')); }
3232

33-
aboveMenu() { return element(by.css('.md-menu.above')); }
33+
aboveMenu() { return element(by.css('.md-menu-panel.above')); }
3434

35-
combinedMenu() { return element(by.css('.md-menu.combined')); }
35+
combinedMenu() { return element(by.css('.md-menu-panel.combined')); }
3636

3737
// TODO(kara): move to common testing utility
3838
pressKey(key: any): void {
@@ -46,7 +46,7 @@ export class MenuPage {
4646
}
4747

4848
expectMenuPresent(expected: boolean) {
49-
return browser.isElementPresent(by.css('.md-menu')).then((isPresent) => {
49+
return browser.isElementPresent(by.css('.md-menu-panel')).then(isPresent => {
5050
expect(isPresent).toBe(expected);
5151
});
5252
}

e2e/components/menu/menu.e2e.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ describe('menu', () => {
6262
it('should mirror classes on host to menu template in overlay', () => {
6363
page.trigger().click();
6464
page.menu().getAttribute('class').then((classes) => {
65-
expect(classes).toEqual('md-menu custom');
65+
expect(classes).toEqual('md-menu-panel custom');
6666
});
6767
});
6868

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {NgModule, ModuleWithProviders, Directive, Renderer, ElementRef} from '@angular/core';
2+
3+
4+
/** Selector that matches all elements that may have style collisions with material1. */
5+
export const ELEMENTS_SELECTOR = `
6+
md-card,
7+
md-card-actions,
8+
md-card-content,
9+
md-card-footer,
10+
md-card-header,
11+
md-card-subtitle,
12+
md-card-title,
13+
md-card-title-group,
14+
md-checkbox,
15+
md-dialog-container,
16+
md-divider,
17+
md-grid-list,
18+
md-grid-tile,
19+
md-grid-tile-footer,
20+
md-grid-tile-header,
21+
md-hint,
22+
md-icon,
23+
md-ink-bar,
24+
md-input,
25+
md-list,
26+
md-list-item,
27+
md-menu,
28+
md-nav-list,
29+
md-placeholder,
30+
md-progress-bar,
31+
md-progress-circle,
32+
md-radio-button,
33+
md-radio-group,
34+
md-select,
35+
md-sidenav,
36+
md-slider,
37+
md-spinner,
38+
md-tab,
39+
md-toolbar
40+
`;
41+
42+
/**
43+
* Directive to apply to all material2 components that use the same element name as a
44+
* component in material2. It does two things:
45+
* 1) Adds the css class "md2" to the host element so that material1 can use this class with a
46+
* :not() in order to avoid affecting material2 elements.
47+
* 2) Adds a css class to the element that is identical to the element's tag. E.g., the element
48+
* `<md-card>` would be given a css class `md-card`. This is done so that material2 can style
49+
* only these classes instead of defining element rules that would affect material1 components.
50+
*/
51+
@Directive({
52+
selector: ELEMENTS_SELECTOR,
53+
})
54+
export class StyleCompatibility {
55+
constructor(renderer: Renderer, elementRef: ElementRef) {
56+
const element = elementRef.nativeElement as Node;
57+
renderer.setElementClass(element, 'md2', true);
58+
renderer.setElementClass(element, element.nodeName.toLowerCase(), true);
59+
}
60+
}
61+
62+
63+
@NgModule({
64+
declarations: [StyleCompatibility],
65+
exports: [StyleCompatibility],
66+
})
67+
export class StyleCompatibilityModule {
68+
static forRoot(): ModuleWithProviders {
69+
return {
70+
ngModule: StyleCompatibilityModule,
71+
providers: [],
72+
};
73+
}
74+
}

src/lib/core/core.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ export {ComponentType} from './overlay/generic-component-type';
7979
// Keybindings
8080
export * from './keyboard/keycodes';
8181

82+
export * from './compatibility/style-compatibility';
83+
8284
// Animation
8385
export * from './animation/animation';
8486

src/lib/menu/_menu-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
$background: map-get($theme, background);
77
$foreground: map-get($theme, foreground);
88

9-
.md-menu {
9+
.md-menu-panel {
1010
background: md-color($background, 'card');
1111
}
1212

src/lib/menu/menu.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
2-
<div class="md-menu" [ngClass]="_classList" (click)="_emitCloseEvent()" (keydown)="_handleKeydown($event)">
2+
<div class="md-menu-panel" [ngClass]="_classList"
3+
(click)="_emitCloseEvent()" (keydown)="_handleKeydown($event)">
34
<ng-content></ng-content>
45
</div>
56
</template>
6-
<div class="md-menu-click-catcher" *ngIf="_showClickCatcher" (click)="_emitCloseEvent()"></div>
7+
<div class="md-menu-click-catcher" *ngIf="_showClickCatcher" (click)="_emitCloseEvent()"></div>

src/lib/menu/menu.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $md-menu-font-size: 16px !default;
1616
$md-menu-side-padding: 16px !default;
1717
$md-menu-vertical-padding: 8px !default;
1818

19-
.md-menu {
19+
.md-menu-panel {
2020
@include md-elevation(2);
2121
min-width: $md-menu-overlay-min-width;
2222
max-width: $md-menu-overlay-max-width;

src/lib/menu/menu.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ describe('MdMenu', () => {
1818
it('should open the menu as an idempotent operation', () => {
1919
let fixture = TestBed.createComponent(SimpleMenu);
2020
fixture.detectChanges();
21-
let menu = fixture.debugElement.query(By.css('.md-menu'));
21+
let menu = fixture.debugElement.query(By.css('.md-menu-panel'));
2222
expect(menu).toBe(null);
2323
expect(() => {
2424
fixture.componentInstance.trigger.openMenu();
2525
fixture.componentInstance.trigger.openMenu();
2626

27-
menu = fixture.debugElement.query(By.css('.md-menu'));
27+
menu = fixture.debugElement.query(By.css('.md-menu-panel'));
2828
expect(menu.nativeElement.innerHTML.trim()).toEqual('Content');
2929
}).not.toThrowError();
3030
});

src/lib/module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
PortalModule,
77
OverlayModule,
88
A11yModule,
9+
StyleCompatibilityModule,
910
} from './core/index';
1011

1112
import {MdButtonToggleModule} from './button-toggle/index';
@@ -58,6 +59,7 @@ const MATERIAL_MODULES = [
5859
PortalModule,
5960
RtlModule,
6061
A11yModule,
62+
StyleCompatibilityModule,
6163
];
6264

6365
@NgModule({
@@ -90,6 +92,7 @@ const MATERIAL_MODULES = [
9092
MdSnackBarModule.forRoot(),
9193
MdTooltipModule.forRoot(),
9294
OverlayModule.forRoot(),
95+
StyleCompatibilityModule.forRoot(),
9396
],
9497
exports: MATERIAL_MODULES,
9598
})

0 commit comments

Comments
 (0)