feat: cascade ion-segment mode to ion-segment-button children

[peterpeterparker]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
I think it would be cool to cascade the mode attribute from an ion-segment to its ion-segment-button children

Right now, if I want to use only the md style, on iOS I have to explicitly specify the mode not only on the parent segment but also on all children

For example:

<ion-segment [(ngModel)]="category" mode="md"> <!-- Render style class MD on iOS -->
  <ion-segment-button value="segment_1" checked> <!-- Render style class  iOS on iOS -->
     Segment 1
   </ion-segment-button>
   <ion-segment-button value="segment_2"> <!-- Render style class iOS on iOS -->
     Segment 2
   </ion-segment-button>
</ion-segment>

To apply md everywhere I have currently to do the following:

<ion-segment [(ngModel)]="category" mode="md"> <!-- Render style class MD on iOS -->
  <ion-segment-button ... mode="md"> <!-- Render style class  md on iOS -->
     Segment 1
   </ion-segment-button>
   <ion-segment-button ...  mode="md"> <!-- Render style class md on iOS -->
     Segment 2
   </ion-segment-button>
</ion-segment>

[brandyscarney]

Thanks for the issue! At the moment we cannot fix this in a simple way. We tried doing this once before and ran into several issues which is why they were split to begin with. You can take a look at how toolbar title is implemented to use the toolbar mode to see what I mean:

• https://github.com/ionic-team/ionic/blob/master/core/src/components/title/title.tsx#L24-L35
• https://github.com/ionic-team/ionic/blob/master/core/src/components/title/title.scss#L22-L48

Segment is way more complicated than this though so there were a ton of issues with passing the styles around.

However, with Stencil 1 (which was just released into beta) we may be able to accomplish this. I'll leave this open to investigate after we update to it!

[peterpeterparker]

Thx for the feedback @brandyscarney, sure no worries, it's a nice to have

[brandyscarney]

This will be fixed by the following PR: #19369

It will also work for other components such as ion-toolbar passing down to title, buttons, segment, etc.

[peterpeterparker]

@brandyscarney sweet, thx for having a look at this 👍

[brandyscarney]

I'm going to close this since the PR has been merged, we'll have an RC out with this in it soon 🙂