fix(select): add and document custom properties

references #14850
ionic-team · Aug 21, 2018 · 88613ff · 88613ff
1 parent 9104850
commit 88613ff
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
@@ -73,6 +73,19 @@ Since select uses the alert, action sheet and popover interfaces, options can be
 | `open` |             |
 
 
+## CSS Custom Properties
+
+| Name                  | Description                          |
+| --------------------- | ------------------------------------ |
+| `--color`             | Color of the select text             |
+| `--icon-color`        | Color of the select icon             |
+| `--padding-bottom`    | Bottom padding of the select         |
+| `--padding-end`       | End padding of the select            |
+| `--padding-start`     | Start padding of the select          |
+| `--padding-top`       | Top padding of the select            |
+| `--placeholder-color` | Color of the select placeholder text |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
@@ -5,18 +5,21 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$select-ios-text-color};
+  --icon-color: #{$select-ios-icon-color};
   --padding-top: #{$select-ios-padding-top};
   --padding-end: #{$select-ios-padding-end};
   --padding-bottom: #{$select-ios-padding-bottom};
   --padding-start: #{$select-ios-padding-start};
+  --placeholder-color: #{$select-ios-placeholder-color};
 
-  color: $select-ios-text-color;
+  color: var(--color);
 
   font-family: $select-ios-font-family;
 }
 
 .select-placeholder {
-  color: $select-ios-placeholder-color;
+  color: var(--placeholder-color);
 }
 
 .select-icon {
@@ -39,7 +42,7 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 
-  color: $select-ios-icon-color;
+  color: var(--icon-color);
   pointer-events: none;
 }
 

diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
@@ -5,18 +5,21 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$select-md-text-color};
+  --icon-color: #{$select-md-icon-color};
   --padding-top: #{$select-md-padding-top};
   --padding-end: #{$select-md-padding-end};
   --padding-bottom: #{$select-md-padding-bottom};
   --padding-start: #{$select-md-padding-start};
+  --placeholder-color: #{$select-md-placeholder-color};
 
-  color: $select-md-text-color;
+  color: var(--color);
 
   font-family: $select-md-font-family;
 }
 
 .select-placeholder {
-  color: $select-md-placeholder-color;
+  color: var(--placeholder-color);
 }
 
 .select-md .item-select ion-label {
@@ -43,7 +46,7 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 
-  color: $select-md-icon-color;
+  color: var(--icon-color);
   pointer-events: none;
 }
 

diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
@@ -4,6 +4,16 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the select text
+   * @prop --icon-color: Color of the select icon
+   * @prop --padding-top: Top padding of the select
+   * @prop --padding-end: End padding of the select
+   * @prop --padding-bottom: Bottom padding of the select
+   * @prop --padding-start: Start padding of the select
+   * @prop --placeholder-color: Color of the select placeholder text
+   */
+
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: flex;

diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html
@@ -59,5 +59,23 @@
     <ion-select-option>1998</ion-select-option>
     <ion-select-option>1999</ion-select-option>
   </ion-select>
+
+  <ion-select class="custom" placeholder="Day">
+    <ion-select-option>Sunday</ion-select-option>
+    <ion-select-option>Monday</ion-select-option>
+    <ion-select-option>Tuesday</ion-select-option>
+    <ion-select-option>Wednesday</ion-select-option>
+    <ion-select-option>Thursday</ion-select-option>
+    <ion-select-option>Friday</ion-select-option>
+    <ion-select-option>Saturday</ion-select-option>
+  </ion-select>
+
+  <style>
+    .custom {
+      --color: crimson;
+      --icon-color: pink;
+      --placeholder-color: teal;
+    }
+  </style>
 </body>
 </html>