fix(item-divider): add and document custom properties

references #14850 references #14808
ionic-team · Sep 24, 2018 · 06cb138 · 06cb138
1 parent 7bd33a7
commit 06cb138
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-ios-divider-background};
-  --ion-color-contrast: #{$item-ios-divider-color};
+  --background: #{$item-ios-divider-background};
+  --color: #{$item-ios-divider-color};
   --padding-start: #{$item-ios-divider-padding-start};
 
   @include border-radius(0);

diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-md-divider-background};
-  --ion-color-contrast: #{$item-md-divider-color};
+  --background: #{$item-md-divider-background};
+  --color: #{$item-md-divider-color};
   --padding-start: #{$item-md-divider-padding-start};
 
   border-bottom: $item-md-divider-border-bottom;

diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
@@ -5,6 +5,14 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the item divider
+   * @prop --color: Color of the item divider
+   * @prop --padding-start: Start padding of the item divider
+   * @prop --padding-end: End padding of the item divider
+   * @prop --padding-top: Top padding of the item divider
+   * @prop --padding-bottom: Bottom padding of the item divider
+   */
   --padding-start: 0px;
   --padding-end: 0px;
   --padding-top: 0px;
@@ -27,8 +35,8 @@
   width: 100%;
   min-height: $item-divider-min-height;
 
-  background-color: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   font-family: $font-family-base;
 
@@ -37,6 +45,11 @@
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 :host([sticky]) {
   position: sticky;
   top: 0;

diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
@@ -13,6 +13,18 @@ Item Dividers are block elements that can be used to separate items in a list. T
 | `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |
 
 
+## CSS Custom Properties
+
+| Name               | Description                        |
+| ------------------ | ---------------------------------- |
+| `--background`     | Background of the item divider     |
+| `--color`          | Color of the item divider          |
+| `--padding-bottom` | Bottom padding of the item divider |
+| `--padding-end`    | End padding of the item divider    |
+| `--padding-start`  | Start padding of the item divider  |
+| `--padding-top`    | Top padding of the item divider    |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*