fix(item-divider): use prop for sticky (#16691)

ionic-team · Dec 11, 2018 · a6a1723 · a6a1723
1 parent e08b739
commit a6a1723
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 3 deletions.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -374,13 +374,13 @@ export class IonItem {
 }
 
 export declare interface IonItemDivider extends StencilComponents<'IonItemDivider'> {}
-@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
+@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
 export class IonItemDivider {
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
-    proxyInputs(this, el, ['color', 'mode']);
+    proxyInputs(this, el, ['color', 'mode', 'sticky']);
   }
 }
 

diff --git a/core/api.txt b/core/api.txt
@@ -447,6 +447,7 @@ ion-input,css-prop,--placeholder-opacity
 ion-item-divider
 ion-item-divider,prop,color,string | undefined,undefined,false
 ion-item-divider,prop,mode,"ios" | "md",undefined,false
+ion-item-divider,prop,sticky,boolean,false,false
 ion-item-divider,css-prop,--background
 ion-item-divider,css-prop,--color
 ion-item-divider,css-prop,--padding-bottom

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -1876,6 +1876,10 @@ export namespace Components {
     * The mode determines which platform styles to use.
     */
     'mode': Mode;
+    /**
+    * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
+    */
+    'sticky': boolean;
   }
   interface IonItemDividerAttributes extends StencilHTMLAttributes {
     /**
@@ -1886,6 +1890,10 @@ export namespace Components {
     * The mode determines which platform styles to use.
     */
     'mode'?: Mode;
+    /**
+    * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
+    */
+    'sticky'?: boolean;
   }
 
   interface IonItemGroup {}

diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
@@ -50,7 +50,7 @@
   color: current-color(contrast);
 }
 
-:host([sticky]) {
+:host(.item-divider-sticky) {
   position: sticky;
   top: 0;
 }

diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
@@ -27,6 +27,15 @@ export class ItemDivider implements ComponentInterface {
    */
   @Prop() mode!: Mode;
 
+  /**
+   * When it's set to `true`, the item-divider will stay visible when it reaches the top
+   * of the viewport until the next `ion-item-divider` replaces it.
+   *
+   * This feature relies in `position:sticky`:
+   * https://caniuse.com/#feat=css-sticky
+   */
+  @Prop() sticky = false;
+
   componentDidLoad() {
     // Change the button size to small for each ion-button in the item
     // unless the size is explicitly set
@@ -41,6 +50,7 @@ export class ItemDivider implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
+        'item-divider-sticky': this.sticky,
         'item': true,
       }
     };

diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
@@ -58,6 +58,7 @@ Item Dividers are block elements that can be used to separate items in a list. T
 | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
 | `color`  | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
 | `mode`   | `mode`    | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
+| `sticky` | `sticky`  | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky                                     | `boolean`             | `false`     |
 
 
 ## CSS Custom Properties