fix(toolbar): style all slotted content in order not only buttons (#1…

…6617) - style all slotted content to order properly in a toolbar, not only buttons - removes duplicated sass variables - use current color in select so icon will inherit toolbar color BREAKING CHANGES - Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
ionic-team · Dec 7, 2018 · 86fc9a5 · 86fc9a5
1 parent 0c61e79
commit 86fc9a5
Show file tree

Hide file tree

Showing 19 changed files with 151 additions and 226 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -950,12 +950,10 @@ ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectInputChangeEvent,true
 ion-select,event,ionFocus,void,true
-ion-select,css-prop,--icon-color
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
-ion-select,css-prop,--placeholder-color
 
 ion-skeleton-text
 ion-skeleton-text,prop,width,string,'100%',false

diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
@@ -94,25 +94,3 @@
 //   }
 // }
 
-// iOS Toolbar Button Placement
-// --------------------------------------------------
-
-:host([slot="start"]) {
-  order: map-get($toolbar-order-ios, buttons-start);
-}
-
-:host([slot="secondary"]) {
-  order: map-get($toolbar-order-ios, buttons-secondary);
-}
-
-:host([slot="primary"]) {
-  order: map-get($toolbar-order-ios, buttons-primary);
-
-  text-align: end;
-}
-
-:host([slot="end"]) {
-  order: map-get($toolbar-order-ios, buttons-end);
-
-  text-align: end;
-}
diff --git a/core/src/components/buttons/buttons.ios.vars.scss b/core/src/components/buttons/buttons.ios.vars.scss
@@ -1,40 +1,5 @@
 @import "../../themes/ionic.globals.ios";
+@import "../toolbar/toolbar.ios.vars";
 
-// iOS Toolbar
+// iOS Buttons
 // --------------------------------------------------
-
-/// @prop - Order of the toolbar elements
-$toolbar-order-ios: (
-  back-button: 0,
-  menu-toggle-start: 1,
-  buttons-start: 2,
-  buttons-secondary: 3,
-  content: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
-  menu-toggle-end: 7,
-);
-
-/// @prop - Font size of the toolbar button
-$toolbar-ios-button-font-size:                      17px !default;
-
-/// @prop - Text color of the toolbar button
-$toolbar-ios-button-color:                          ion-color(primary, base) !default;
-
-/// @prop - Background color of the toolbar button
-$toolbar-ios-button-background-color:               $toolbar-ios-background !default;
-
-/// @prop - Background color of the toolbar button when activated
-$toolbar-ios-button-background-color-activated:     $toolbar-ios-color-activated !default;
-
-/// @prop - Border radius of the toolbar button
-$toolbar-ios-button-border-radius:                  4px !default;
-
-/// @prop - Font weight of the strong toolbar button
-$toolbar-ios-button-strong-font-weight:             600 !default;
-
-/// @prop - Fill color of the toolbar button icon
-$toolbar-ios-button-icon-fill-color:                currentColor !default;
-
-/// @prop - Filter of the translucent toolbar
-$toolbar-ios-translucent-filter:                    saturate(180%) blur(20px) !default;
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
@@ -87,27 +87,3 @@
 
   font-size: 1.8em;
 }
-
-
-// Material Design Toolbar Button Placement
-// --------------------------------------------------
-
-:host([slot="start"]) {
-  order: map-get($toolbar-order-md, buttons-start);
-}
-
-:host([slot="secondary"]) {
-  order: map-get($toolbar-order-md, buttons-secondary);
-}
-
-:host([slot="primary"]) {
-  order: map-get($toolbar-order-md, buttons-primary);
-
-  text-align: end;
-}
-
-:host([slot="end"]) {
-  order: map-get($toolbar-order-md, buttons-end);
-
-  text-align: end;
-}
diff --git a/core/src/components/buttons/buttons.md.vars.scss b/core/src/components/buttons/buttons.md.vars.scss
@@ -1,37 +1,5 @@
 @import "../../themes/ionic.globals.md";
+@import "../toolbar/toolbar.md.vars";
 
-// Material Design Toolbar
+// Material Design Buttons
 // --------------------------------------------------
-
-/// @prop - Order of the toolbar elements
-$toolbar-order-md: (
-  back-button: 0,
-  menu-toggle-start: 1,
-  buttons-start: 2,
-  content: 3,
-  buttons-secondary: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
-  menu-toggle-end: 7,
-);
-
-/// @prop - Font size of the toolbar button
-$toolbar-md-button-font-size:                     14px !default;
-
-/// @prop - Text color of the toolbar button
-$toolbar-md-button-color:                         $toolbar-md-color !default;
-
-/// @prop - Background color of the toolbar button
-$toolbar-md-button-background-color:              $toolbar-md-background !default;
-
-/// @prop - Background color of the toolbar button when activated
-$toolbar-md-button-background-color-activated:    $toolbar-md-color-activated !default;
-
-/// @prop - Border radius of the toolbar button
-$toolbar-md-button-border-radius:                 2px !default;
-
-/// @prop - Fill color of the toolbar button icon
-$toolbar-md-button-icon-fill-color:               currentColor !default;
-
-/// @prop - Font weight of the strong toolbar button
-$toolbar-md-button-strong-font-weight:            bold !default;
diff --git a/core/src/components/segment/test/bug/index.html b/core/src/components/segment/test/bug/index.html
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
@@ -366,14 +366,12 @@ Type: `Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverE
 
 ## CSS Custom Properties
 
-| Name                  | Description                          |
-| --------------------- | ------------------------------------ |
-| `--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 |
+| Name               | Description                  |
+| ------------------ | ---------------------------- |
+| `--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    |
 
 
 ----------------------------------------------

diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
@@ -5,12 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --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};
 }
 
 .select-icon {

diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
@@ -5,12 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --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};
 }
 
 .select-icon {

diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
@@ -5,14 +5,11 @@
 
 :host {
   /**
-   * @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;
@@ -40,7 +37,9 @@
 }
 
 .select-placeholder {
-  color: var(--placeholder-color);
+  color: currentColor;
+
+  opacity: .33;
 }
 
 button {
@@ -78,6 +77,9 @@ button {
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 
-  color: var(--icon-color);
+  color: currentColor;
+
+  opacity: .33;
+
   pointer-events: none;
 }
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
@@ -57,7 +57,7 @@
       <ion-list>
         <ion-list-header>Select - Custom Interface Options</ion-list-header>
 
-        <ion-item color="dark">
+        <ion-item color="danger">
           <ion-label>Alert</ion-label>
           <ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
             <ion-select-option value="bacon" selected>Bacon</ion-select-option>
@@ -83,7 +83,7 @@
           </ion-select>
         </ion-item>
 
-        <ion-item color="dark">
+        <ion-item color="primary">
           <ion-label>Action Sheet</ion-label>
           <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
             <ion-select-option value="red">Red</ion-select-option>

diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html
@@ -73,9 +73,7 @@
 
   <style>
     .custom {
-      --color: crimson;
-      --icon-color: pink;
-      --placeholder-color: teal;
+      color: crimson;
     }
   </style>
 </body>

diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
@@ -24,3 +24,26 @@
 
   min-width: 0;
 }
+
+// iOS Toolbar Slot Placement
+// --------------------------------------------------
+
+::slotted([slot="start"]) {
+  order: map-get($toolbar-order-ios, slot-start);
+}
+
+::slotted([slot="secondary"]) {
+  order: map-get($toolbar-order-ios, slot-secondary);
+}
+
+::slotted([slot="primary"]) {
+  order: map-get($toolbar-order-ios, slot-primary);
+
+  text-align: end;
+}
+
+::slotted([slot="end"]) {
+  order: map-get($toolbar-order-ios, slot-end);
+
+  text-align: end;
+}
diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -7,11 +7,11 @@
 $toolbar-order-ios: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-start: 2,
-  buttons-secondary: 3,
+  slot-start: 2,
+  slot-secondary: 3,
   content: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
+  slot-primary: 5,
+  slot-end: 6,
   menu-toggle-end: 7,
 );
 
@@ -27,12 +27,18 @@ $toolbar-ios-button-background-color:               $toolbar-ios-background !def
 /// @prop - Background color of the toolbar button when activated
 $toolbar-ios-button-background-color-activated:     $toolbar-ios-color-activated !default;
 
+/// @prop - Border radius of the toolbar button
+$toolbar-ios-button-border-radius:                  4px !default;
+
 /// @prop - Font weight of the strong toolbar button
 $toolbar-ios-button-strong-font-weight:             600 !default;
 
 /// @prop - Fill color of the toolbar button icon
 $toolbar-ios-button-icon-fill-color:                currentColor !default;
 
+/// @prop - Filter of the translucent toolbar
+$toolbar-ios-translucent-filter:                    saturate(180%) blur(20px) !default;
+
 
 // iOS Title
 // --------------------------------------------------

diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
@@ -35,4 +35,27 @@
   --padding-bottom: 0;
   --padding-start: 0;
   --padding-end: 0;
-}
+}
+
+// Material Design Toolbar Slot Placement
+// --------------------------------------------------
+
+::slotted([slot="start"]) {
+  order: map-get($toolbar-order-md, slot-start);
+}
+
+::slotted([slot="secondary"]) {
+  order: map-get($toolbar-order-md, slot-secondary);
+}
+
+::slotted([slot="primary"]) {
+  order: map-get($toolbar-order-md, slot-primary);
+
+  text-align: end;
+}
+
+::slotted([slot="end"]) {
+  order: map-get($toolbar-order-md, slot-end);
+
+  text-align: end;
+}
diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss
@@ -7,11 +7,11 @@
 $toolbar-order-md: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-start: 2,
+  slot-start: 2,
   content: 3,
-  buttons-secondary: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
+  slot-secondary: 4,
+  slot-primary: 5,
+  slot-end: 6,
   menu-toggle-end: 7,
 );
 
@@ -27,6 +27,9 @@ $toolbar-md-button-background-color:              $toolbar-md-background !defaul
 /// @prop - Background color of the toolbar button when activated
 $toolbar-md-button-background-color-activated:    $toolbar-md-color-activated !default;
 
+/// @prop - Border radius of the toolbar button
+$toolbar-md-button-border-radius:                 2px !default;
+
 /// @prop - Fill color of the toolbar button icon
 $toolbar-md-button-icon-fill-color:               currentColor !default;