feat(dialog): custom class option #4718 #4012 #4722

jbojcic1 · 2017-05-22T18:50:53Z

Extend dialog config options to allow custom dialog class. Custom class enables media queries.

Extend dialog config options to allow custom dialog class. Custom class enables media queries. angular#4718 angular#4012

jbojcic1 · 2017-05-22T18:54:00Z

I tried to run unit tests but I am getting chrome disconnected error message so it seems something is wrong with karma config. I've tried to increase timeouts but it didn't help. Also e2e test were failing even before my changes so couldn't test that either.

willshowell · 2017-05-22T21:22:46Z

Would it be possible to support the same syntax as ngClass?

e.g. #4629

jbojcic1 · 2017-05-23T10:43:14Z

@willshowell that would be great though situation here is more complex as pane element is created dynamically so I'd need to handle all different types of class object to add classes with classList.add. I'll try

willshowell · 2017-05-23T14:03:37Z

Ah yes I see.

I'm curious why you chose to add the class to the cdk-overlay-pane. Since the overlay pane has so few styles, it would seem that attaching the custom class to mat-dialog-container would be more useful (though happy to be shown otherwise).

If you instead chose to attach to mat-dialog-container, then you could do the following. It wouldn't give you ngClass compatibility (though @jelbourn has an open issue angular/angular#7289 for that), but would remove your need to manually set/remove classes from the overlay pane.

// dialog-container.ts

@Component({
  // ...
  host: {
+   '[class]': 'dialogConfig?.dialogClass',
    '[class.mat-dialog-container]': 'true',
    '[attr.role]': 'dialogConfig?.role',
    '[@slideDialog]': '_state',
    '(@slideDialog.done)': '_onAnimationDone($event)',
  },
})
export class MdDialogContainer extends BasePortalHost {

jelbourn · 2017-05-23T15:18:00Z

src/lib/core/overlay/overlay-state.ts

@@ -15,6 +15,9 @@ export class OverlayState {
  /** Strategy to be used when handling scroll events while the overlay is open. */
  scrollStrategy: ScrollStrategy = new NoopScrollStrategy();

+  /** Custom class to add to the dialog */
+  dialogClass: string = '';


Overlay is the basis for multiple components, not just dialog. I would call this panelClass.

jelbourn · 2017-05-23T15:22:05Z

src/lib/dialog/dialog-config.ts

@@ -27,6 +27,9 @@ export class MdDialogConfig {
  /** The ARIA role of the dialog element. */
  role?: DialogRole = 'dialog';

+  /** Custom class for the dialog, */
+  dialogClass?: string = '';


Probably call this panelClass as well (this is already DialogConfig, so using the word dialog again on a property is redundant)

jelbourn · 2017-05-23T15:23:33Z

src/lib/core/overlay/overlay-ref.ts

@@ -53,6 +53,10 @@ export class OverlayRef implements PortalHost {
      this._attachBackdrop();
    }

+    if (this._state.dialogClass) {


There needs to be a unit test for this behavior in the overlay tests

jelbourn · 2017-05-23T15:23:50Z

src/lib/core/overlay/overlay-ref.ts

@@ -69,6 +73,9 @@ export class OverlayRef implements PortalHost {
    this._togglePointerEvents(false);
    this._state.scrollStrategy.disable();
    this._detachments.next();
+    if (this._state.dialogClass) {


I don't think removing the class is necessary

jbojcic1 · 2017-05-23T15:37:44Z

@willshowell I chose cdk-overlay-pane because when you use width dialog option it's set to that element so I guess that's the right one.

willshowell · 2017-05-23T15:50:04Z

@jbojcic1 understood, and I agree that it keeps it consistent. My personal use cases were for removing the dialog padding and overriding the dialog's max-width (see #4653). But after playing with it some, I see that you get better position control by having the selector on the cdk-overlay-pane 👍

Thanks for putting this PR together and once it's merged, I'll just use .custom-overlay .mat-dialog-container to accomplish those overrides.

Changed custom class config option name. Remove unnecessary class removal on detach. angular#4718 angular#4012

Added missing unit test to check if overlay pane has custom panel class. angular#4718 angular#4012

jbojcic1 · 2017-05-24T08:10:44Z

@jelbourn pls check now

jelbourn

Just a couple last comments

jelbourn · 2017-05-24T16:11:59Z

src/lib/core/overlay/overlay-state.ts

@@ -15,6 +15,9 @@ export class OverlayState {
  /** Strategy to be used when handling scroll events while the overlay is open. */
  scrollStrategy: ScrollStrategy = new NoopScrollStrategy();

+  /** Custom class to add to the dialog */


Comment still says "dialog", should say "overlay pane"

Forgot that one :)

jelbourn · 2017-05-24T16:12:43Z

src/lib/core/overlay/overlay.spec.ts

+    beforeEach(() => {
+      config = new OverlayState();
+      config.panelClass = 'custom-panel-class';
+    });


You don't really need the beforeEach here; you can create the stats and set the class in the test itself because it's only being used once

Change wrong comment. Remove unnecessary beforeEach from test. angular#4718 angular#4012

jbojcic1 · 2017-05-24T16:21:45Z

@jelbourn done

jelbourn

LGTM

fobaz · 2017-05-25T16:28:10Z

FYI, somebody is very much waiting for this merge.

jonsamwell · 2017-05-30T06:39:53Z

Any update when this will make it into a release?

jbojcic1 · 2017-05-30T08:03:17Z

@jonsamwell not sure. Maybe @jelbourn will know?

morkro · 2017-05-30T14:16:16Z

Very much looking forward to this 😬

angular-automatic-lock-bot · 2019-09-06T13:02:12Z

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.}

feat(dialog): custom class option

5eec0ff

Extend dialog config options to allow custom dialog class. Custom class enables media queries. angular#4718 angular#4012

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 22, 2017

jelbourn reviewed May 23, 2017

View reviewed changes

jelbourn added the pr: needs review label May 23, 2017

jbojcic1 added 2 commits May 24, 2017 10:06

refactor(dialog): custom class option.

9832cad

Changed custom class config option name. Remove unnecessary class removal on detach. angular#4718 angular#4012

test(dialog): custom class option.

5944616

Added missing unit test to check if overlay pane has custom panel class. angular#4718 angular#4012

jelbourn reviewed May 24, 2017

View reviewed changes

refactor(dialog): custom class option.

f456794

Change wrong comment. Remove unnecessary beforeEach from test. angular#4718 angular#4012

jelbourn approved these changes May 24, 2017

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels May 24, 2017

willshowell mentioned this pull request May 26, 2017

feat: properly align lists within dialogs #4825

Closed

mmalerba merged commit 28c936f into angular:master May 30, 2017

This was referenced May 31, 2017

Md-dialog config backdropClass has either a bug or awkward functionality which removes .cdk-overlay-dark-backdrop class and access is only on sibling div #4594

Closed

Proposal: Ability to add extra class(es) to dialog container #4653

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dialog): custom class option #4718 #4012 #4722

feat(dialog): custom class option #4718 #4012 #4722

jbojcic1 commented May 22, 2017

jbojcic1 commented May 22, 2017 •

edited

willshowell commented May 22, 2017

jbojcic1 commented May 23, 2017 •

edited

willshowell commented May 23, 2017

jelbourn May 23, 2017

jelbourn May 23, 2017

jelbourn May 23, 2017

jelbourn May 23, 2017

jbojcic1 commented May 23, 2017

willshowell commented May 23, 2017

jbojcic1 commented May 24, 2017

jelbourn left a comment

jelbourn May 24, 2017

jbojcic1 May 24, 2017

jelbourn May 24, 2017

jbojcic1 commented May 24, 2017

jelbourn left a comment

fobaz commented May 25, 2017

jonsamwell commented May 30, 2017

jbojcic1 commented May 30, 2017

morkro commented May 30, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

feat(dialog): custom class option #4718 #4012 #4722

feat(dialog): custom class option #4718 #4012 #4722

Conversation

jbojcic1 commented May 22, 2017

jbojcic1 commented May 22, 2017 • edited

willshowell commented May 22, 2017

jbojcic1 commented May 23, 2017 • edited

willshowell commented May 23, 2017

jelbourn May 23, 2017

Choose a reason for hiding this comment

jelbourn May 23, 2017

Choose a reason for hiding this comment

jelbourn May 23, 2017

Choose a reason for hiding this comment

jelbourn May 23, 2017

Choose a reason for hiding this comment

jbojcic1 commented May 23, 2017

willshowell commented May 23, 2017

jbojcic1 commented May 24, 2017

jelbourn left a comment

Choose a reason for hiding this comment

jelbourn May 24, 2017

Choose a reason for hiding this comment

jbojcic1 May 24, 2017

Choose a reason for hiding this comment

jelbourn May 24, 2017

Choose a reason for hiding this comment

jbojcic1 commented May 24, 2017

jelbourn left a comment

Choose a reason for hiding this comment

fobaz commented May 25, 2017

jonsamwell commented May 30, 2017

jbojcic1 commented May 30, 2017

morkro commented May 30, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

jbojcic1 commented May 22, 2017 •

edited

jbojcic1 commented May 23, 2017 •

edited