Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dialog): add hasBackdrop and backdropClass options to dialog config #2822

Merged
merged 2 commits into from
Apr 25, 2017

Conversation

YeomansIII
Copy link
Contributor

Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default cdk-overlay-dark-backdrop class, allowing custom styling to be applied.

Closes #2806
Somewhat related #1584

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 26, 2017
YeomansIII added a commit to YeomansIII/material2 that referenced this pull request Jan 26, 2017
@YeomansIII
Copy link
Contributor Author

It looks like saucelabs timed out in the last build, not sure if someone here has the ability to redo the build.

@crisbeto
Copy link
Member

crisbeto commented Jan 26, 2017

Reset the tests for you.

@YeomansIII
Copy link
Contributor Author

Are there any other steps I should take for this pull request? Or is the only thing left to do wait for someone from the material2 team to take a look?

@crisbeto
Copy link
Member

It still needs to be reviewed. Also I can see how the hasBackdrop may be useful, but I'm not quite sure about backdropClass. What do you think @jelbourn?

@YeomansIII
Copy link
Contributor Author

YeomansIII commented Jan 28, 2017

I was actually thinking hasBackdrop is probably less useful. When hasBackdrop is false you also lose the ability to close when clicking away, which undermines disableClose. However, with backdropClass you can make the backdrop transparent and then control whether you want the ability to close or not with disableClose.

backdropClass only replaces the default cdk-overlay-dark-backdrop class which simply applies an rgba background.

The library is already offering the ability to set the position of a dialog, allowing people to use it for more than just a simple standard dialog, so I think allowing custom styling of the backdrop is definitely useful.

@YeomansIII
Copy link
Contributor Author

YeomansIII commented Apr 18, 2017

@crisbeto Is it possible to get this reviewed or at least discussed?

Beta.3 breaks the hack I was using to have some dialogs with transparent backgrounds and it looks like at least one other person that found this is also interested (looking at the reaction to my last comment). From what I have researched the Material Guidelines don't specify/require a specific background overlay color. The API already gives the ability to customize position, width, height, so obviously it's intended to be used in many ways. The Overlay API already supports the ability to apply custom classes or just use the existing transparent class. Why should we be forced to use the translucent black overlay?

This is an incredibly easy change and I can fix this PR to get it up to date with the latest master, but it would be appreciated if I could get some input from the maintainers, even if it's just a "Yes" or "No."

@YeomansIII
Copy link
Contributor Author

YeomansIII commented Apr 18, 2017

Here is an example of my use case.

The dialog below is our "Share" dialog. It opens at the position of the share icon when you click, using the Material API's ability to set the position of the dialog. Since this dialog acts similar to a menu, we want a transparent overlay backdrop. Currently this is not possible with the Material2 API.
Dialog with transparent overlay backdrop

The following dialog is our Login Dialog. This is more like a traditional modal/dialog and should have a black translucent overlay backdrop. This is currently the only backdrop allowed using the Material2 API.
Dialog with black translucent overlay backdrop

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly looks good, just one comment and also needs rebase

@@ -161,7 +161,10 @@ export class MdDialog {
let strategy = this._overlay.position().global();
let position = dialogConfig.position;

state.hasBackdrop = true;
state.hasBackdrop = dialogConfig.hasBackdrop;
if (dialogConfig.backdropClass && dialogConfig.backdropClass !== '') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The extra !== '' shouldn't be necessary

Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes angular#2806
@YeomansIII YeomansIII force-pushed the dialog-backdrop-config-feature branch from 5038744 to e6a9323 Compare April 19, 2017 01:29
@YeomansIII
Copy link
Contributor Author

@jelbourn Resolved conflicts with master and made changes based on your suggestion.

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Apr 25, 2017
@mmalerba mmalerba merged commit 7428c49 into angular:master Apr 25, 2017
@YeomansIII YeomansIII deleted the dialog-backdrop-config-feature branch April 27, 2017 19:49
@jjun3188
Copy link

jjun3188 commented May 3, 2017

@YeomansIII Thank you for your great job. Do we know briefly when this will be released?

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Style overlay backdrop for specific dialogs
6 participants