docs(drawer): Add additional documentation for disableClose by g1shin · Pull Request #6750 · angular/components

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-drawerdisableClose(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

+### 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

 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

+
+### 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

+### 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

+`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

 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

 `<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

+
+### 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

+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 5a0b1f0Compare August 31, 2017 00:39

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

revert changes and update doc instead
6024bb6

g1shin force-pushed the sidenav branch from 794ef01 to 6024bb6Compare 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 93fa639Compare 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 disableCloseSep 8, 2017

willshowell reviewed Sep 8, 2017
View reviewed changes

remove mention of drawer
cebbe41

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

tinayuangao merged commit 4f4c48c into angular:masterSep 8, 2017

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

Uh oh!

Conversation

g1shin commented Aug 31, 2017

Uh oh!

mmalerba commented Sep 6, 2017

Uh oh!

willshowell commented Sep 6, 2017

Uh oh!

g1shin commented Sep 6, 2017

Uh oh!

mmalerba commented Sep 6, 2017

Uh oh!

g1shin commented Sep 6, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Sep 7, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Sep 8, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Sep 8, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants