Ionic-framework: 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: https://github.com/ionic-team/ionic/pull/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 🙂

[peterpeterparker]

Cool, thx!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.