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

- 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

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

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;
-}

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;

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;
-}

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;

core/src/components/segment/test/bug/index.html

@@ -1,16 +0,0 @@
-<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-<script src="../../../../../dist/ionic.js"></script>
-
-<ion-segment>
-  <ion-segment-button value="all" checked>
-    <ion-label>
-      All
-    </ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="favorites">
-    <ion-label>
-      Favorites
-    </ion-label>
-  </ion-segment-button>
-</ion-segment>

core/src/components/select/readme.md

@@ -366,14 +366,12 @@ Type: `Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverE
 
 ## CSS Custom Properties
 
-| Name                  | Description                          |
+| Name               | Description                  |
-| --------------------- | ------------------------------------ |
+| ------------------ | ---------------------------- |
-| `--icon-color`        | Color of the select icon             |
+| `--padding-bottom` | Bottom padding of the select |
-| `--padding-bottom`    | Bottom padding of the select         |
+| `--padding-end`    | End padding of the select    |
-| `--padding-end`       | End padding of the select            |
+| `--padding-start`  | Start padding of the select  |
-| `--padding-start`     | Start padding of the select          |
+| `--padding-top`    | Top padding of the select    |
-| `--padding-top`       | Top padding of the select            |
-| `--placeholder-color` | Color of the select placeholder text |
 
 
 ----------------------------------------------

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 {

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 {

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;
 }

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>

core/src/components/select/test/standalone/index.html

@@ -73,9 +73,7 @@
 
   <style>
     .custom {
-      --color: crimson;
+      color: crimson;
-      --icon-color: pink;
-      --placeholder-color: teal;
     }
   </style>
 </body>

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;
+}

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,
+  slot-start: 2,
-  buttons-secondary: 3,
+  slot-secondary: 3,
   content: 4,
-  buttons-primary: 5,
+  slot-primary: 5,
-  buttons-end: 6,
+  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
 // --------------------------------------------------

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;
+}

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,
+  slot-secondary: 4,
-  buttons-primary: 5,
+  slot-primary: 5,
-  buttons-end: 6,
+  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;
 

core/src/components/toolbar/toolbar.scss

@@ -104,4 +104,4 @@
 
 :host(.toolbar-segment) {
   --min-height: auto;
-}
+}

core/src/themes/test/css-variables/css/oceanic.css

@@ -10,6 +10,7 @@
 **/
 
 :root {
+  /* Ionic Colors */
   --ion-color-primary: #549ee7;
   --ion-color-primary-contrast: #fff;
   --ion-color-primary-contrast-rgb: 255,255,255;
@@ -73,58 +74,13 @@
   --ion-color-dark-shade: #070b0d;
   --ion-color-dark-tint: #343d46;
 
+  /* Component Colors */
   --ion-backdrop-color: #1b2b34;
   --ion-overlay-background-color: #142129;
 
-  --ion-background-color: #1b2b34;
-  --ion-background-color-rgb: 27,43,52;
-  --ion-background-color-step-50: #26363e;
-  --ion-background-color-step-100: #324048;
-  --ion-background-color-step-150: #3d4b52;
-  --ion-background-color-step-200: #49555d;
-  --ion-background-color-step-250: #546067;
-  --ion-background-color-step-300: #5f6b71;
-  --ion-background-color-step-350: #6b757b;
-  --ion-background-color-step-400: #768085;
-  --ion-background-color-step-450: #828a8f;
-  --ion-background-color-step-500: #8d959a;
-  --ion-background-color-step-550: #98a0a4;
-  --ion-background-color-step-600: #a4aaae;
-  --ion-background-color-step-650: #afb5b8;
-  --ion-background-color-step-700: #bbbfc2;
-  --ion-background-color-step-750: #c6cacc;
-  --ion-background-color-step-800: #d1d5d6;
-  --ion-background-color-step-850: #dddfe1;
-  --ion-background-color-step-900: #e8eaeb;
-  --ion-background-color-step-950: #f4f4f5;
-  --ion-background-color-step-1000: #fff;
-
   --ion-border-color: #1b2b34;
   --ion-box-shadow-color: #000;
 
-  --ion-text-color: #fff;
-  --ion-text-color-rgb: 255,255,255;
-  --ion-text-color-step-50: #f4f4f5;
-  --ion-text-color-step-100: #e8eaeb;
-  --ion-text-color-step-150: #dddfe1;
-  --ion-text-color-step-200: #d1d5d6;
-  --ion-text-color-step-250: #c6cacc;
-  --ion-text-color-step-300: #bbbfc2;
-  --ion-text-color-step-350: #afb5b8;
-  --ion-text-color-step-400: #a4aaae;
-  --ion-text-color-step-450: #98a0a4;
-  --ion-text-color-step-500: #8d959a;
-  --ion-text-color-step-550: #828a8f;
-  --ion-text-color-step-600: #768085;
-  --ion-text-color-step-650: #6b757b;
-  --ion-text-color-step-700: #5f6b71;
-  --ion-text-color-step-750: #546067;
-  --ion-text-color-step-800: #49555d;
-  --ion-text-color-step-850: #3d4b52;
-  --ion-text-color-step-900: #324048;
-  --ion-text-color-step-950: #26363e;
-  --ion-text-color-step-1000: #1b2b34;
-
   --ion-tab-bar-background: #343d46;
   --ion-tab-bar-background-focused: #293039;
   --ion-tab-bar-color: #a7adba;
@@ -136,4 +92,32 @@
 
   --ion-item-background: #343d46;
   --ion-item-background-activated: #232b34;
+
+  /* Background, Text, Step Colors */
+  --ion-background-color: #1b2b34;
+  --ion-background-color-rgb: 27,43,52;
+
+  --ion-text-color: #fff;
+  --ion-text-color-rgb: 255,255,255;
+
+  --ion-color-step-50: #26363e;
+  --ion-color-step-100: #324048;
+  --ion-color-step-150: #3d4b52;
+  --ion-color-step-200: #49555d;
+  --ion-color-step-250: #546067;
+  --ion-color-step-300: #5f6b71;
+  --ion-color-step-350: #6b757b;
+  --ion-color-step-400: #768085;
+  --ion-color-step-450: #828a8f;
+  --ion-color-step-500: #8d959a;
+  --ion-color-step-550: #98a0a4;
+  --ion-color-step-600: #a4aaae;
+  --ion-color-step-650: #afb5b8;
+  --ion-color-step-700: #bbbfc2;
+  --ion-color-step-750: #c6cacc;
+  --ion-color-step-800: #d1d5d6;
+  --ion-color-step-850: #dddfe1;
+  --ion-color-step-900: #e8eaeb;
+  --ion-color-step-950: #f4f4f5;
+  --ion-color-step-1000: #fff;
 }

core/src/themes/test/css-variables/index.html

@@ -23,13 +23,15 @@
 
     .right-container {
       display: flex;
-      position: absolute;
-      top: 0;
-      right: 16px;
       height: 100%;
       align-items: center;
     }
 
+    .right-container ion-select {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
     ion-fab-button {
       display: inline-block;
     }
@@ -68,7 +70,7 @@
           <ion-toolbar color="primary">
             <ion-title>Lists</ion-title>
 
-            <div class="right-container">
+            <div slot="end" class="right-container">
               <ion-label>Select a Theme:</ion-label>
               <ion-select interface="popover" class="theme-picker">
                 <ion-select-option value="default" selected>Default</ion-select-option>
@@ -129,13 +131,34 @@
 
             <section>
               <ion-list>
-                <ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
+                <ion-item>
-                <ion-item><ion-label>Super Metroid</ion-label></ion-item>
+                  <ion-label>Pokémon Yellow</ion-label>
-                <ion-item><ion-label>Mega Man X</ion-label></ion-item>
+                  <ion-note slot="end">Note</ion-note>
-                <ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
+                </ion-item>
-                <ion-item><ion-label>Pac-Man</ion-label></ion-item>
+                <ion-item>
-                <ion-item><ion-label>Super Mario World</ion-label></ion-item>
+                  <ion-label>Super Metroid</ion-label>
-                <ion-item><ion-label>Street Fighter II</ion-label></ion-item>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
+                <ion-item>
+                  <ion-label>Mega Man X</ion-label>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
+                <ion-item>
+                  <ion-label>The Legend of Zelda</ion-label>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
+                <ion-item>
+                  <ion-label>Pac-Man</ion-label>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
+                <ion-item>
+                  <ion-label>Super Mario World</ion-label>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
+                <ion-item>
+                  <ion-label>Street Fighter II</ion-label>
+                  <ion-note slot="end">Note</ion-note>
+                </ion-item>
                 <ion-item-divider>Sliding Items</ion-item-divider>
                 <ion-item-sliding>
                   <ion-item><ion-label>Half Life</ion-label></ion-item>
@@ -299,7 +322,7 @@
         <ion-header>
           <ion-toolbar>
             <ion-title>Colors</ion-title>
-            <div class="right-container">
+            <div slot="end" class="right-container">
               <ion-label>Select a Theme:</ion-label>
               <ion-select interface="popover" class="theme-picker">
                 <ion-select-option value="default" selected>Default</ion-select-option>
@@ -655,7 +678,7 @@
         <ion-header>
           <ion-toolbar>
             <ion-title>Other</ion-title>
-            <div class="right-container">
+            <div slot="end" class="right-container">
               <ion-label>Select a Theme:</ion-label>
               <ion-select interface="popover" class="theme-picker">
                 <ion-select-option value="default" selected>Default</ion-select-option>