docs(drawer): Add additional documentation for disableClose #6750

g1shin · 2017-08-31T00:13:58Z

ESCAPE keydown is exposed as an event to support various cases.

mmalerba · 2017-09-06T17:32:04Z

@willshowell you mentioned in #6427 that dialog already does something like this? Do you know what the Observable is called? I'd like to keep it consistent across components

willshowell · 2017-09-06T18:12:23Z

@mmalerba it hasn't yet been merged but it will be a generic keydownEvents(). See #6682 and specifically dialog-ref.ts.

It was @jelbourn's opinion (#3460 (comment)) that the consumer can filter for desired keys, but that may have only been because overlay is very generic.

g1shin · 2017-09-06T18:20:58Z

@mmalerba Would you recommend changing escapeKeydown to keydownEvents then?

mmalerba · 2017-09-06T18:29:26Z

I actually wonder if we even need it for sidenav, it seems like its just a proxy for (keydown) on md-drawer, not something that needs its own @Output(). Instead maybe just update the documentation to show how it can be done:

<md-drawer-container (backdropClick)="customBackdropClickHandler()">
  <md-drawer disableClose (keydown)="customKeydownHandler($event)"></md-drawer>
</md-drawer-container>

g1shin · 2017-09-06T21:52:36Z

Reverted changes made to escapeKeydown and updated the doc instead.

mmalerba · 2017-09-07T15:18:27Z

src/lib/sidenav/sidenav.md

+### Sidenav vs. Drawer
+The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element
+that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer`
+has to be placed inside `md-drawer-container`. More functionalities will be added to sidenav in the future.


For the last sentence how about:

Currently `md-drawer` and `md-sidenav`support all the same features. However in the future we expect to add different features specific to the different use cases.

mmalerba · 2017-09-07T15:20:08Z

src/lib/sidenav/sidenav.md

@@ -70,3 +70,19 @@ html, body, material-app, md-sidenav-container, .my-content {
 ### FABs inside sidenav
 For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB
 outside of the scrollable region and absolutely position it.
+
+### Sidenav vs. Drawer


I would put this at the top since its important context that users need to understand the rest of the docs (that all the stuff we're saying about sidenavs also applies to drawer

mmalerba · 2017-09-07T15:22:00Z

src/lib/sidenav/sidenav.md

+
+### Disabling closing of sidenav and drawer
+By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing <kbd>ESCAPE</kbd>.
+`disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable closing by two methods. To enable one


The disableClose attribute

"closing by two methods" --> "automatic closing when the backdrop is clicked or the escape key is pressed"

mmalerba · 2017-09-07T15:28:05Z

src/lib/sidenav/sidenav.md

+### Disabling closing of sidenav and drawer
+By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing <kbd>ESCAPE</kbd>.
+`disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable closing by two methods. To enable one
+of the two methods to allow closing with `disableClose` attribute set, then custom event handlers can be used as below:


To add custom logic on backdrop click, add a (backdropClick) listener to the md-sidenav-container. For custom escape key logic, a standard (keydown) listener will suffice.

mmalerba · 2017-09-07T15:28:53Z

src/lib/sidenav/sidenav.md

+`disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable closing by two methods. To enable one
+of the two methods to allow closing with `disableClose` attribute set, then custom event handlers can be used as below:
+```html
+<md-drawer-container (backdropClick)="customBackdropClickHandler()">


Since every other example in this doc uses sidenav, lets use sidenav. The new explainer about sidenav vs drawer will let people know they can use either

g1shin · 2017-09-07T16:49:09Z

Comments have been addressed 👍 Ready for review

mmalerba · 2017-09-07T21:38:31Z

src/lib/sidenav/sidenav.md

@@ -18,6 +18,14 @@ A sidenav container may contain one or two `<md-sidenav>` elements. When there a
 `<md-sidenav>` elements, each must be placed on a different side of the container.
 See the section on positioning below.

+
+### Sidenav vs. Drawer


I wouldn't make this a separate section, just part of the section above. It also needs to be worded to introduce the drawer, otherwise us: "The difference between sidenav and drawer..." user: "wait, what's drawer?"

g1shin · 2017-09-08T00:40:15Z

Changes have been made 😃

mmalerba · 2017-09-08T16:00:14Z

src/lib/sidenav/sidenav.md

@@ -18,6 +18,13 @@ A sidenav container may contain one or two `<md-sidenav>` elements. When there a
 `<md-sidenav>` elements, each must be placed on a different side of the container.
 See the section on positioning below.

+`<md-drawer>` is a component that is similar to `<md-sidenav>`. 


On second thought I'll just add some documentation on md-drawer later, for now lets not mention it since its the exact same thing as md-sidenav

mmalerba · 2017-09-08T16:00:26Z

src/lib/sidenav/sidenav.md

+
+### Disabling closing of sidenav and drawer
+By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing <kbd>ESCAPE</kbd>.
+The `disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable automatic closing when the backdrop


remove mention of md-drawer

g1shin · 2017-09-08T17:02:09Z

Removed everything related to md-drawer 👍

willshowell · 2017-09-08T17:39:14Z

src/lib/sidenav/sidenav.md

+By default, sidenav can be closed either by clicking on the backdrop or by pressing <kbd>ESCAPE</kbd>.
+The `disableClose` attribute can be set on `md-sidenav` to disable automatic closing when the backdrop
+is clicked or <kbd>ESCAPE</kbd> is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to
+`md-sidenav-container`. For custom <kdb>ESCAPE</kbd> logic, a standard `(keydown)` listener will suffice.


Typo <kdb> -> <kbd>

angular-automatic-lock-bot · 2019-09-07T01:02:17Z

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

g1shin assigned g1shin and mmalerba Aug 31, 2017

g1shin requested review from jelbourn, kara and mmalerba August 31, 2017 00:13

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

create event for ESCAPE keydown

5a0b1f0

g1shin force-pushed the sidenav branch from 4dede8a to 5a0b1f0 Compare August 31, 2017 00:39

g1shin force-pushed the sidenav branch from 2194c53 to 794ef01 Compare September 6, 2017 21:50

revert changes and update doc instead

6024bb6

g1shin force-pushed the sidenav branch from 794ef01 to 6024bb6 Compare September 6, 2017 21:51

mmalerba reviewed Sep 7, 2017

View reviewed changes

address comments

837b7a2

mmalerba reviewed Sep 7, 2017

View reviewed changes

minor modification

7086a98

mmalerba reviewed Sep 8, 2017

View reviewed changes

g1shin force-pushed the sidenav branch from a11116e to 93fa639 Compare September 8, 2017 17:00

mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Sep 8, 2017

mmalerba approved these changes Sep 8, 2017

View reviewed changes

mmalerba changed the title ~~fix(drawer): Add additional support for disableClose~~ docs(drawer): Add additional documentation for disableClose Sep 8, 2017

willshowell reviewed Sep 8, 2017

View reviewed changes

remove mention of drawer

cebbe41

g1shin force-pushed the sidenav branch from 93fa639 to cebbe41 Compare September 8, 2017 17:40

tinayuangao merged commit 4f4c48c into angular:master Sep 8, 2017

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(drawer): Add additional documentation for disableClose #6750

docs(drawer): Add additional documentation for disableClose #6750

g1shin commented Aug 31, 2017

mmalerba commented Sep 6, 2017

willshowell commented Sep 6, 2017

g1shin commented Sep 6, 2017

mmalerba commented Sep 6, 2017

g1shin commented Sep 6, 2017

mmalerba Sep 7, 2017

mmalerba Sep 7, 2017

mmalerba Sep 7, 2017

mmalerba Sep 7, 2017

mmalerba Sep 7, 2017

g1shin commented Sep 7, 2017

mmalerba Sep 7, 2017

g1shin commented Sep 8, 2017

mmalerba Sep 8, 2017

mmalerba Sep 8, 2017

g1shin commented Sep 8, 2017

willshowell Sep 8, 2017

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

docs(drawer): Add additional documentation for disableClose #6750

docs(drawer): Add additional documentation for disableClose #6750

Conversation

g1shin commented Aug 31, 2017

mmalerba commented Sep 6, 2017

willshowell commented Sep 6, 2017

g1shin commented Sep 6, 2017

mmalerba commented Sep 6, 2017

g1shin commented Sep 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Sep 7, 2017

Choose a reason for hiding this comment

g1shin commented Sep 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Sep 8, 2017

Choose a reason for hiding this comment

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