feat: iOS search bar in header styling support

[eric-horodyski]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

While working with a member of the community, we discovered that there is a design oddity when placing an ion-searchbar inside an ion-toolbar inside an ion-header.

ion-searchbar will be given a padding-bottom: 15px; value when the ion-toolbar .sc-ion-searchbar-ios-h CSS selector is applied.

When given padding-bottom: 15px, the ion-searchbar does not vertically align correctly with other elements placed within the ion-toolbar.

Describe Preferred Solution

It might be beneficial to add styling that reduces the padding-bottom value of an ion-searchbar component when it's placed inside an ion-toolbar inside of an ion-header, something to the effect of:

ion-header ion-toolbar .sc-ion-searchbar-ios-h {
  padding-bottom: // some better value
}

Describe Alternatives

It's always possible to introduce a custom CSS class at the project level that overrides the padding-bottom value set by the framework. However, this design paradigm appears to be popular in the mobile world and might be worth supporting within the Ionic Framework.

Related Code

A repro has been built that showcases the issue. It can be found here: https://github.com/ehorodyski-ionic/ng-searchbar-in-header

The relevant portion of code to reproduce this issue is:

<ion-header [translucent]="false">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-searchbar></ion-searchbar>
    <ion-buttons slot="end">
      <ion-icon slot="icon-only" name="add-sharp"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Additional Context

The screenshot below highlights the UX when running on an iOS simulator. Ideally, the ion-searchbar would be better vertically aligned with the other elements contained within the ion-toolbar.