feat(refresher): add MD native refresher (#20096)

resolves #17316

core/src/components/refresher-content/refresher-content.tsx

@@ -51,27 +51,36 @@ export class RefresherContent implements ComponentInterface {
       const mode = getIonMode(this);
       this.pullingIcon = config.get(
         'refreshingIcon',
-        mode === 'ios' && isPlatform('mobile') ? config.get('spinner', 'lines') : 'arrow-down'
+        mode === 'ios' && isPlatform('mobile') ? config.get('spinner', 'lines') : 'circular'
       );
     }
     if (this.refreshingSpinner === undefined) {
       const mode = getIonMode(this);
       this.refreshingSpinner = config.get(
         'refreshingSpinner',
-        config.get('spinner', mode === 'ios' ? 'lines' : 'crescent')
+        config.get('spinner', mode === 'ios' ? 'lines' : 'circular')
       );
     }
   }
 
   render() {
     const pullingIcon = this.pullingIcon;
     const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] as any !== undefined;
+    const mode = getIonMode(this);
+
     return (
-      <Host class={getIonMode(this)}>
+      <Host class={mode}>
         <div class="refresher-pulling">
           {this.pullingIcon && hasSpinner &&
             <div class="refresher-pulling-icon">
-              <ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
+              <div class="spinner-arrow-container">
+                <ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
+                {mode === 'md' && this.pullingIcon === 'circular' &&
+                  <div class="arrow-container">
+                    <ion-icon name="caret-back-sharp"></ion-icon>
+                  </div>
+                }
+              </div>
             </div>
           }
           {this.pullingIcon && !hasSpinner &&

core/src/components/refresher/readme.md

@@ -10,14 +10,19 @@ refresher.
 
 ### Native Refreshers
 
-Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel. One of the limitations of this is that the refreshers only work on their respective platform devices. For example, the iOS native `ion-refresher` works on an iPhone in iOS mode, but does not work on an Android device in iOS mode. In order for the refresher to work on an unsupported device, we provide a fallback refresher. This can also be set manually by overriding the `pullingIcon` property.
+Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.
 
-Because much of the native refreshers are based on scrolling, certain properties such as `pullMin` and `snapbackDuration` are not compatible. See [ion-refresher Properties](#properties) for more information.
+Certain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.
 
 #### iOS Usage
 
-Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. The  `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page. In order for the refresher to work on a device that isn't an iOS mobile device, the `pullingIcon` should be set to an icon.
+Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](../spinner#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
 
+The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.
+
+#### Android Usage
+
+Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
 
 
 <!-- Auto Generated Below -->
@@ -154,7 +159,6 @@ export const RefresherExample: React.FC = () => (
     </IonContent>
   </IonContent>
 );
-
 ```
 
 

core/src/components/refresher/refresher.md.scss

@@ -25,3 +25,74 @@
 .refresher-md .refresher-refreshing .spinner-dots circle {
   fill: $refresher-md-icon-color;
 }
+
+ion-refresher.refresher-native {
+  display: block;
+
+  z-index: 1;
+
+  ion-spinner {
+    @include margin(0, auto, 0, auto);
+
+    width: 24px;
+    height: 24px;
+
+    color: $refresher-md-native-spinner-color;
+  }
+
+  .spinner-arrow-container {
+    display: inherit;
+  }
+
+  .arrow-container {
+    display: block;
+    position: absolute;
+
+    width: 24px;
+    height: 24px;
+    ion-icon {
+      @include margin(0, auto, 0, auto);
+      @include position(null, 0, -4px, 0);
+
+      position: absolute;
+
+      color: $refresher-md-native-spinner-color;
+
+      font-size: 12px;
+    }
+  }
+
+  &.refresher-pulling ion-refresher-content,
+  &.refresher-ready ion-refresher-content {
+    .refresher-pulling {
+      display: flex;
+    }
+  }
+
+  &.refresher-refreshing ion-refresher-content,
+  &.refresher-completing ion-refresher-content,
+  &.refresher-cancelling ion-refresher-content {
+    .refresher-refreshing {
+      display: flex;
+    }
+  }
+
+  .refresher-pulling-icon {
+    transform: translateY(calc(-100% - 10px));
+  }
+
+  .refresher-pulling-icon,
+  .refresher-refreshing-icon {
+    @include margin(0, auto, 0, auto);
+    @include border-radius(100%);
+    @include padding(8px, 8px, 8px, 8px);
+
+    display: flex;
+
+    border: $refresher-md-native-spinner-border;
+
+    background: $refresher-md-native-spinner-background;
+
+    box-shadow: $refresher-md-native-spinner-box-shadow;
+  }
+}

core/src/components/refresher/refresher.md.vars.scss

@@ -1,7 +1,19 @@
 @import "../../themes/ionic.globals.md";
 
 /// @prop - Color of the refresher icon
-$refresher-md-icon-color:         $text-color !default;
+$refresher-md-icon-color:                     $text-color !default;
 
 /// @prop - Text color of the refresher content
-$refresher-md-text-color:         $text-color !default;
+$refresher-md-text-color:                     $text-color !default;
+
+/// @prop - Color of the native refresher spinner
+$refresher-md-native-spinner-color:           #{ion-color(primary, base)} !default;
+
+/// @prop - Border of the native refresher spinner
+$refresher-md-native-spinner-border:          1px solid #ececec !default;
+
+/// @prop - Background of the native refresher spinner
+$refresher-md-native-spinner-background:      white !default;
+
+/// @prop - Box shadow of the native refresher spinner
+$refresher-md-native-spinner-box-shadow:      0px 1px 6px rgba(0, 0, 0, 0.1) !default;

core/src/components/refresher/refresher.scss

@@ -56,6 +56,10 @@ ion-refresher-content {
   text-align: center;
 }
 
+ion-refresher-content .arrow-container {
+  display: none;
+}
+
 // Refresher Content States
 // --------------------------------------------------
 
@@ -100,3 +104,12 @@ ion-refresher-content {
     transform: scale(0);
   }
 }
+
+// Refresher Native
+// --------------------------------------------------
+
+.refresher-native {
+  .refresher-pulling-text, .refresher-refreshing-text {
+    display: none;
+  }
+}