Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot override mode styles on many components #17608

Closed
dwieeb opened this issue Feb 25, 2019 · 3 comments

Comments

2 participants
@dwieeb
Copy link
Contributor

commented Feb 25, 2019

The docs for overriding mode styles aren't accurate for several components, e.g.

.ios ion-item {
  ...
}

@ionitron-bot ionitron-bot bot added the triage label Feb 25, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Feb 25, 2019

I believe certain components need be updated to include the following:

...createThemedClasses(this.mode, 'item'),

I'm not sure why this was removed as it looks intentional, but will look into this.

@ionitron-bot ionitron-bot bot removed the triage label Feb 25, 2019

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Feb 25, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Mar 7, 2019

@brandyscarney brandyscarney moved this from On deck ⚾️ to In progress 🤺 in Ionic Core Mar 18, 2019

@brandyscarney brandyscarney moved this from In progress 🤺 to Needs review 🤔 in Ionic Core Mar 22, 2019

brandyscarney added a commit to ionic-team/ionicons that referenced this issue Apr 10, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Apr 16, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

This has been added for the 4.3.0 release. The full list of components that have the mode class now can be seen in the table at the bottom of this PR: #17838

It can be used like the following:

ion-item.md {
  // MD styles
}

ion-item.ios {
  // iOS styles
}

Note that this is only a problem for components that are being used inside of a shadow element. If using light DOM you can still use the documented way to style by mode.

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

fix(components): include mode classes on components for use in shadow (
…ionic-team#17838)

- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes ionic-team#17608
@ionitron-bot

This comment has been minimized.

Copy link

commented May 16, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.