Ionic-framework: [Ionic 4 beta11] No .ios and .md classes on element depending on the platform

Created on 25 Sep 2018 · 9Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/giacomocerquone/Library/Android/sdk)
   NodeJS            : v10.3.0 (/Users/giacomocerquone/.nvm/versions/node/v10.3.0/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Describe the Bug
.ios and .md classes are not added to the html structure and I can't style stuff based on the platform

Steps to Reproduce
Steps to reproduce the behavior:

Initialize an ionic 4 project
start with ionic serve or
2b. start with ionic serve -l

Related Code

.ios ion-button {
  color: #0ec254 !important;
}

<ion-content padding>
  <ion-button>My Button</ion-button>
</ion-content>

Expected Behavior
That I could, in fact, style with the selector illustrated above.

triage

Source

giacomocerquone

Most helpful comment

@giacomocerquone If you wanted to keep the default for encapsulation (ViewEncapsulation.Emulated), you could write the following in the page's scss:

home.page.scss

.md :host ion-button {
  --background: green;
}

The :host is what is important there.

I do agree that we could improve the documentation here. I'm just not sure where it would go since it is mostly Angular specific. Maybe we could have a theming section per framework? 🤔

brandyscarney on 25 Sep 2018

❤2

All 9 comments

I can't reproduce, the .ios and .md are being properly added to <html>, can you provide more details?

manucorporat on 25 Sep 2018

@manucorporat hi, thanks for the fast reply.
You're right it is added, I got confused.
I couldn't style a button like I showed in my snippet because I was adding the style inside the component's scss.
From the docs it looked like the .ios and .md classes are added also on the single elements. Maybe I can improve them!
Anyway there is a way to do this without touching the global.scss?

giacomocerquone on 25 Sep 2018

As long as you have the encapsulation of the component set to ViewEncapsulation.None, the styles should work fine in the pages scss file. For example:

home.page.ts

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  encapsulation: ViewEncapsulation.None
})
export class HomePage {

}

home.page.scss

.md ion-button {
  --background: green;
}

See my comment here for more information on ViewEncapsulation: https://github.com/ionic-team/ionic/issues/14530#issuecomment-423591338

brandyscarney on 25 Sep 2018

If you're interested in improving the theming documentation, all of the relevant content files can be found here: https://github.com/ionic-team/ionic-docs/tree/master/src/content/theming

The platform styles contains the info on changing the styles per mode.

All of those can also be viewed here: https://beta.ionicframework.com/docs/theming/basics

I'm going to close this since the original issue is resolved, but please feel free to open a new issue on our documentation repo if you have ways to improve. Thanks!

brandyscarney on 25 Sep 2018

Thanks so much for the ultra fast support, never had such a polite experience on an issue that wasn't properly a bug.
I will surely improve the docs about this, but would be good to have both the benefits of the two worlds.

I mean having the encapsulation active and style based on the platform since you already use per-component classes like button-ios etc.

giacomocerquone on 25 Sep 2018

👍1

@giacomocerquone If you wanted to keep the default for encapsulation (ViewEncapsulation.Emulated), you could write the following in the page's scss:

home.page.scss

.md :host ion-button {
  --background: green;
}

The :host is what is important there.

I do agree that we could improve the documentation here. I'm just not sure where it would go since it is mostly Angular specific. Maybe we could have a theming section per framework? 🤔

brandyscarney on 25 Sep 2018

❤2

For some reason I thought we removed the mode-specific component classes, but you are correct you could also write this:

:host .button-md {
  --background: green;
}

brandyscarney on 25 Sep 2018

👍1

nono @brandyscarney with .button-md or .button-ios I can style them directly with

.button-md {
  whatever: 'lol';
}

I do agree that we could improve the documentation here. I'm just not sure where it would go since it is mostly Angular specific. Maybe we could have a theming section per framework

Yeah, I believe this will become a problem that you'll need to tackle sooner or later consindering the extraction of angular from the core in favour of web components.
Anyway I don't know, probably it's just me, I've not used angular for a while (since v4) and maybe this kind of doc shouldn't be in the ionic docs

giacomocerquone on 25 Sep 2018

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.