Material-components-web: RFC: Drawers to open with slide gesture

[prateekbh]

Feature Requests

Not sure if this is already in discussion but temporary-drawer has implementation to close it with a swipe gesture, however it cannot be opened with the same.
I tried searching the spec for anything related to gestures with drawers but couldn't find it here
https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-content

All the native material apps appears to have this functionality(say GMail for example), also boilerplate app from polymer-cli has the capability to open the temporary-drawer using a swipe from the left corner. And the same is implemented at multiple PWAs check https://flipkart.com, https://wego.com on your phone to experience the same.

Implementing the same in mdc-web will improve the UX for a ton of sites that use mdc-web.

[amsheehan]

I hear what you’re saying, but we have chosen not to implement this feature and most other horizontal swiping features (scrollable tabs for instance).

This is because swiping from the edge in mobile safari triggers back navigation, and MDC Web is aiming to stay out of the way of browser features like that.

If you would like to extend the capabilities of the drawer on an implementation level, you are more than welcome to do so, but we will not be adding this behavior to MDC Web.

[prateekbh]

Sure I definitely understand the concern here, but can we not make this more like an opt-in?
May be surround this with better messaging or not do it on safari at all(i know UA parsing sucks, but may be something else)?
We're wide eyed leaving a gap open for what can be a delightful user experience and is a very base expectation from mobile application UX.

[piotr-cz]

This an is how I implemented such feature in reactjs.
Doesn't look as good as closing the drawer when it's position mimics touch position

  constructor() {
    this.touchStartLeftSide = false
  }

  componentDidMount() {
    window.document.addEventListener('touchstart', this.handleTouchStart, false)
    window.document.addEventListener('touchend', this.handleTouchEnd, false)
    window.document.addEventListener('touchmove', this.handleTouchMove, false)
  }

  handleTouchStart(event) {
    this.touchStartLeftSide = (event.changedTouches[0].screenX === 0)
  }

  handleTouchEnd(event) {
    this.touchStartLeftSide = false
  }

  handleTouchMove(event) {
    // Trigger drawer open when swiping over 25% it's min-width
    if (this.touchStartLeftSide && event.changedTouches[0].screenX > 280 * 0.25) {
      this.props.onDrawerOpen()
    }
  }

[touficbatache]

@amsheehan I think this is a pretty good feature https://twitter.com/materialdesign/status/884828964023263232... It's user-friendly apparently 😃😉 Just disable that on Safari!

[prateekbh]

Yeah, we can give really great UX for the browsers that support this. Open to discussion to figure out a better approach though. And super happy to start a PR if you allow me to do that

[touficbatache]

The problem is that some browsers have "swipe from left" do something _natively_ and MDC Drawer would break that. Safari does that apparently so it could be disabled there. I'll leave that to @amsheehan to decide if he want to re-open this issue and discuss about it...

[prateekbh]

I agree, hence I said we can discuss some approach to fix this may be...

[amsheehan]

@prateekbh making it hard to say no with the gifs 😅

I'll bring it up with the team. I'm still leaning toward not implementing something like this, but maybe having a demo of the functionality for people who wish to do so on their own.

[prateekbh]

😆 😆 😆 😆

Just trying my best to get more awesomeness in. I am all in for a cleaner approach that shouldn't break anyone, but I am also advocating that this is a huge UX gain.

Also, just a thought from the top of my head, can we implement this as a modifier with clear bold callout that this wont work on ios?

[Garbee]

IMO a swipe gesture that is implemented for all browsers save one creates an inconsistency with the offering. That's certainly not something we'd want. Further other browsers in the future may include gestures as well, so then do we disable as that happens or let things conflict?

It's best that if developers want this, they implement on their own within their apps. That way they are taking the responsibility of making sure it is known where it is usable and where it isn't. Also, the library then isn't left maintaining that when it may not get used by many developers.

Simply because something can be done doesn't mean it should be done. There are a lot of little bits that can be done but they aren't feasible long-term to include and maintain internally.

Notice how on the tweet it said on Android as in Android apps. Not anything built to work on Android including web apps or desktop apps. It's a hard thing to balance providing native-like experiences from the web. While it is important, some things no matter how you tell people will cause confusion and resentment. It's best that be avoided and put the onus on developers building their apps to create explicitly inconsistent experiences. At least then they understand why instead of saying it is a problem with the library.

[prateekbh]

Further other browsers in the future may include gestures as well, so then do we disable as that happens or let things conflict?

Mostly thats the reason I suggested it as an _opt-in_ with the help of modifiers. Not sure, but since there is no spec around it, I don't see this(swipe to go back) becoming a widely used pattern.

It's best that if developers want this, they implement on their own within their apps. That way they are taking the responsibility of making sure it is known where it is usable and where it isn't.

Makes sense, but much like everything in the repo I am guessing the aim of the repo is to make dev's lives easier and provide standard ways of doing things.

Simply because something can be done doesn't mean it should be done. There are a lot of little bits that can be done but they aren't feasible long-term to include and maintain internally.

+1

Notice how on the tweet it said on Android as in Android apps.

As of today implementing this on android browsers will also be a huge gain, not just the native apps.

P.S. Sorry if I sound pushy, just putting my thoughts here and trying to see if we can make this better somehow

[piotr-cz]

Important question to ask is whether such implementation:

a) would break native browser behavior
b) browser would not fire touch move events and just use native behavior
c) browser would trigger it's native behavior and touch move events at the same time

I can't check on Safari, somebody would have to try with code from my previous comment.

If a) or c) is true, this feature should probably not be implemented because AFAIK there is no way to prevent breaking UX

if b) is true, then IMO we should look at this feature from the point of progressive enhancement (this is a web package after all)

I'm using this package in progressive web app so maybe another option is to allow swipe-left event listeners only in standalone mode as logic says that most browser UI is disabled on PWAs (same for WebView)

[prateekbh]

c) is true, similar functionality already exist on https://webpack.js.org

[piotr-cz]

I don't think there is a way to check if browser triggers native behavior for swipe-left gesture.
We could blacklist Safari, but as @Garbee said other browsers or browser extensions may implement same gestures

Last left option is to sniff for standalone or WebView mode

[Garbee]

I am guessing the aim of the repo is to make dev's lives easier and provide standard ways of doing things.

The goal of the project is to provide Material Design components with reference implementations for the web. It won't cover every pattern or use case defined. It is a very targeted goal to help ease developers needs. Developers shouldn't be absolved of doing work because they use the library.

[lynnmercier]

The problem is that some browsers have "swipe from left" do something natively and MDC Drawer would break that

This is why we will not bake "swipe from left" logic into the MDC Drawer component.

The goal of the project is to provide Material Design components with reference implementations for the web

@prateekbh you're more than welcome to submit a PR that creates a reference implementation of "swipe from left" in our demo code, but please do not implement this within MDC Drawer.