Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(dialog): Unprivatize .md-dialog-container class. #7449

Closed
wants to merge 1 commit into from
Closed

fix(dialog): Unprivatize .md-dialog-container class. #7449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/dialog/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,7 +576,7 @@ function MdDialogProvider($$interimElementProvider) {
// an element outside of the container, and the focus trap won't work probably..
// Also the tabindex is needed for the `escapeToClose` functionality, because
// the keyDown event can't be triggered when the focus is outside of the container.
return '<div class="_md-dialog-container" tabindex="-1">' + validatedTemplate(template) + '</div>';
return '<div class="md-dialog-container" tabindex="-1">' + validatedTemplate(template) + '</div>';

/**
* The specified template should contain a <md-dialog> wrapper element....
Expand Down
3 changes: 2 additions & 1 deletion src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ $dialog-padding: $baseline-grid * 3;
.md-dialog-is-showing {
max-height: 100%;
}
._md-dialog-container {

.md-dialog-container {
display: flex;
justify-content: center;
align-items: center;
Expand Down
80 changes: 40 additions & 40 deletions src/components/dialog/dialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
runAnimation();

var mdContainer = angular.element(parent[0].querySelector('._md-dialog-container'));
var mdContainer = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = mdContainer.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
Expand Down Expand Up @@ -90,7 +90,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
runAnimation();

var mdContainer = angular.element(parent[0].querySelector('._md-dialog-container'));
var mdContainer = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = mdContainer.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
Expand Down Expand Up @@ -185,7 +185,7 @@ describe('$mdDialog', function() {
expect(content.id).toMatch(/dialogContent_.*/g);
}));

it('should remove `_md-dialog-container` on mousedown mouseup and remove', inject(function($mdDialog, $rootScope, $timeout) {
it('should remove `md-dialog-container` on mousedown mouseup and remove', inject(function($mdDialog, $rootScope, $timeout) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -203,7 +203,7 @@ describe('$mdDialog', function() {

runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
container.triggerHandler({
type: 'mousedown',
target: container[0]
Expand All @@ -216,11 +216,11 @@ describe('$mdDialog', function() {
$timeout.flush();
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(0);
}));

it('should remove `_md-dialog-container` on scope.$destroy()', inject(function($mdDialog, $rootScope, $timeout) {
it('should remove `md-dialog-container` on scope.$destroy()', inject(function($mdDialog, $rootScope, $timeout) {
var container, parent = angular.element('<div>');

$mdDialog.show(
Expand All @@ -237,7 +237,7 @@ describe('$mdDialog', function() {

runAnimation(parent.find('md-dialog'));
$rootScope.$destroy();
container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));

expect(container.length).toBe(0);
}));
Expand Down Expand Up @@ -267,7 +267,7 @@ describe('$mdDialog', function() {

runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var dialog = parent.find('md-dialog');
var title = parent.find('h2');
var contentBody = parent[0].querySelector('._md-dialog-content-body');
Expand Down Expand Up @@ -302,7 +302,7 @@ describe('$mdDialog', function() {

runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var content = angular.element(container[0].querySelector('.mine'));

expect(content.text()).toBe('Choose');
Expand Down Expand Up @@ -343,7 +343,7 @@ describe('$mdDialog', function() {

runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var contentBody = container[0].querySelector('._md-dialog-content-body');

expect(contentBody.textContent).toBe('Choose breakfast');
Expand All @@ -364,7 +364,7 @@ describe('$mdDialog', function() {

runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var contentBody = container[0].querySelector('._md-dialog-content-body');

expect(contentBody.textContent).toBe('{{1 + 1}}');
Expand All @@ -388,7 +388,7 @@ describe('$mdDialog', function() {
expect($document.activeElement).toBe(parent[0].querySelector('.dialog-close'));
}));

it('should remove `_md-dialog-container` after mousedown mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
it('should remove `md-dialog-container` after mousedown mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -407,7 +407,7 @@ describe('$mdDialog', function() {
);
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
container.triggerHandler({
type: 'mousedown',
target: container[0]
Expand All @@ -420,11 +420,11 @@ describe('$mdDialog', function() {
runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(0);
}));

it('should not remove `_md-dialog-container` after mousedown outside mouseup inside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
it('should not remove `md-dialog-container` after mousedown outside mouseup inside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -443,7 +443,7 @@ describe('$mdDialog', function() {
);
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
var content = angular.element(parent[0].querySelector('md-dialog-content'));
container.triggerHandler({
type: 'mousedown',
Expand All @@ -457,11 +457,11 @@ describe('$mdDialog', function() {
runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(1);
}));

it('should not remove `_md-dialog-container` after mousedown inside mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
it('should not remove `md-dialog-container` after mousedown inside mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -480,7 +480,7 @@ describe('$mdDialog', function() {
);
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
var content = angular.element(parent[0].querySelector('md-dialog-content'));
content.triggerHandler({
type: 'mousedown',
Expand All @@ -494,11 +494,11 @@ describe('$mdDialog', function() {
runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(1);
}));

it('should remove `_md-dialog-container` after ESCAPE key', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
it('should remove `md-dialog-container` after ESCAPE key', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');
var response;
Expand Down Expand Up @@ -528,7 +528,7 @@ describe('$mdDialog', function() {
runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(0);
expect(response).toBe(undefined);
}));
Expand Down Expand Up @@ -563,7 +563,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
runAnimation();

var mdContainer = angular.element(parent[0].querySelector('._md-dialog-container'));
var mdContainer = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = mdContainer.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
Expand Down Expand Up @@ -629,7 +629,7 @@ describe('$mdDialog', function() {
});
runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = container.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var inputElement = mdContent.find('input');
Expand Down Expand Up @@ -665,7 +665,7 @@ describe('$mdDialog', function() {

function onShowing(scope, element, options) {
showing = true;
container = angular.element(parent[0].querySelector('._md-dialog-container'));
container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(0);
}

Expand All @@ -690,7 +690,7 @@ describe('$mdDialog', function() {

runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(1);
expect(ready).toBe(true);
}));
Expand All @@ -713,7 +713,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
expect(closing).toBe(false);

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
runAnimation();

parent.triggerHandler({
Expand Down Expand Up @@ -744,7 +744,7 @@ describe('$mdDialog', function() {
runAnimation();

var owner = angular.element(body[0].querySelector('#owner'));
var container = angular.element(body[0].querySelector('._md-dialog-container'));
var container = angular.element(body[0].querySelector('.md-dialog-container'));

expect(container[0].parentNode === owner[0]).toBe(true);
nodes.remove();
Expand Down Expand Up @@ -806,7 +806,7 @@ describe('$mdDialog', function() {
}));
});

it('should append dialog within a _md-dialog-container', inject(function($mdDialog, $rootScope) {
it('should append dialog within a md-dialog-container', inject(function($mdDialog, $rootScope) {

var template = '<md-dialog>Hello</md-dialog>';
var parent = angular.element('<div>');
Expand All @@ -818,7 +818,7 @@ describe('$mdDialog', function() {

$rootScope.$apply();

var container = parent[0].querySelectorAll('._md-dialog-container');
var container = parent[0].querySelectorAll('.md-dialog-container');
expect(container.length).toBe(1);
}));

Expand All @@ -831,7 +831,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
runAnimation();

expect(parent.find('md-dialog').length).toBe(1);
Expand All @@ -855,7 +855,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
runAnimation();
expect(parent.find('md-dialog').length).toBe(1);

Expand All @@ -875,7 +875,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
runAnimation();
expect(parent.find('md-dialog').length).toBe(1);

Expand Down Expand Up @@ -905,7 +905,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
expect(parent.find('md-dialog').length).toBe(1);

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));

container.triggerHandler({
type: 'click',
Expand Down Expand Up @@ -995,7 +995,7 @@ describe('$mdDialog', function() {
$rootScope.$apply();
runAnimation();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
runAnimation();

expect($document.activeElement).toBe(undefined);
Expand All @@ -1020,7 +1020,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var dialog = parent.find('md-dialog');

$$rAF.flush();
Expand Down Expand Up @@ -1066,7 +1066,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var dialog = parent.find('md-dialog');

triggerTransitionEnd(dialog, false);
Expand Down Expand Up @@ -1109,7 +1109,7 @@ describe('$mdDialog', function() {
});
$rootScope.$apply();

var container = angular.element(parent[0].querySelector('._md-dialog-container'));
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
var dialog = parent.find('md-dialog');

verifyTransformCss(dialog, $mdConstant.CSS.TRANSFORM,
Expand Down Expand Up @@ -1428,7 +1428,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
$mdDialog.show(dialog);
$rootScope.$digest();

var mdContainer = angular.element(parent[0].querySelector('._md-dialog-container'));
var mdContainer = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = mdContainer.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
Expand All @@ -1455,7 +1455,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
$mdDialog.show(dialog);
$rootScope.$digest();

var mdContainer = angular.element(parent[0].querySelector('._md-dialog-container'));
var mdContainer = angular.element(parent[0].querySelector('.md-dialog-container'));
var mdDialog = mdContainer.find('md-dialog');
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
Expand Down