feat(refresher): iOS native refresher

[liamdebeasi]

Dev build: 5.0.0-dev.201912061730.b8359e0

needs review: the contentId prop. This was added so we can translate the content to not bounce back over the refresher without interfering with the user's styling (if we translated the inner scroll, users would see a white space where the content once was).

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #18664

What is the new behavior?

• Added native iOS PTR behavior

Does this introduce a breaking change?

• Yes
• No

Other information

[brandyscarney]

Note: discuss the API surrounding the contentId

[brandyscarney]

A few notes on using this:

1. The iOS refresher doesn't work on desktop, should fallback to the non-native refresher
2. These should be the defaults for ios: pulling-icon="lines" refreshing-spinner="lines"
3. Look into alternatives to wrapping the content with a div containing contentId

[liamdebeasi]

Ok iOS refresher now falls back to the non-native refresher on desktop. I tried playing with the native refresher on desktop Safari, but the experience just didn't really feel too great. Even the "native" refresher in News on macOS doesn't really feel smooth.

pulling-icon and refreshing-spinner both default to lines for iOS. However, when using Desktop Safari (and thus falling back to the non-native refresher) the non-native refresher looks odd as a result (it will show a paused spinner, that rotates 180 degrees so it's a little awkward). Any thoughts on this?

Still not sure about how we can get around adding the content-id prop without breaking theming for users.

[brandyscarney]

@liamdebeasi Maybe we just document that Safari / browsers on desktop running iOS mode won't use the native refresher & therefore will look "off". If they want it to look nice on both they need to do platform detection to change the value?

[liamdebeasi]

Yeah a bunch of usage examples would probably be good here for that. I think running in iOS mode on desktop is a valid use case, so it would be ideal if it looked correct out of the box. Maybe we can have the refresher icon default to the old icon only on desktop iOS mode? Not sure if that makes things easier or more confusing to work with.