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.

Sign up for GitHub

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

Jump to bottom

Inconsistent text color in multiline ion-item (ionic 2) #9081

Closed
raae opened this issue Nov 8, 2016 · 4 comments
Closed

Inconsistent text color in multiline ion-item (ionic 2) #9081

raae opened this issue Nov 8, 2016 · 4 comments
Assignees
@brandyscarney
Milestone
2.0.0-rc.3

Comments

@raae
Copy link

raae commented Nov 8, 2016 •
edited
Loading

Short description of the problem:

Paragraphs in multiline ion-items do not have the same text color as single line ion-items.

cutepuppypics_-_ionic_app

What behavior are you expecting?

I would like paragraphs in two line ion-items to have the same color as single line ion-items.

Steps to reproduce:

  1. Create two ion-item with color="primary"
  2. Make the first one single line
  3. Make the second one multiline
    <ion-list padding-top padding-bottom">
      <button color="primary" ion-item no-lines detail-none>
        <ion-icon item-left name="snow" ></ion-icon>
        Line 1
      </button>
      <button color="primary" ion-item no-lines detail-none>
        <ion-icon item-left name="rainy" ></ion-icon>
        <h2>Header</h2>
        <p>Line 1</p>
        <p>Line 2</p>
      </button>
    </ion-list>

The paragraph color gets explicitly set in these scss files:

Which Ionic Version? 2.x
@raae raae changed the title Inconsistent text color in multiline ion-item Inconsistent text color in multiline ion-item (ionic 2) Nov 9, 2016
@brandyscarney
Copy link
Member

Thanks for the issue! This is somewhat related to #8330. Currently you should be able to add a color and make it whatever color you'd like, but it doesn't work. Ideally I think we shouldn't be overriding colors of nested HTML elements, which would solve both issues, but it's up for discussion. :)

@brandyscarney brandyscarney self-assigned this Nov 10, 2016
@brandyscarney brandyscarney added this to the 2.0.0-rc.3 milestone Nov 10, 2016
brandyscarney added a commit that referenced this issue Nov 10, 2016
@brandyscarney
refactor(item): remove paragraph styles, update activated colors
e350a78 
- Adds test for item colors
- Removes the color from native paragraph elements allowing colors to
be passed

Closes #9081
@brandyscarney brandyscarney mentioned this issue Nov 10, 2016
Merged
@brandyscarney
Copy link
Member

Submitted a PR to fix this: #9118

When it's merged I'll create a nightly release for you to try out and update the issue here. Thanks!

adamdbradley pushed a commit that referenced this issue Nov 11, 2016
@brandyscarney @adamdbradley
fix(colors): override element styling and tweak colors for card and item
ee3decc 
* refactor(card): add color/mode classes to header, title, content

- Remove native HTML element styling inside of cards (headings,
paragraph)
- Move the default color for the HTML elements to the content
- Generate colors for the card itself, the header, the content, and the
title using the color input
- Add e2e test for card colors

References #8330

* refactor(item): remove paragraph styles, update activated colors

- Adds test for item colors
- Removes the color from native paragraph elements allowing colors to
be passed

Closes #9081

* refactor(item): bring back paragraph color and override in the item loop

* refactor(card): add back heading and paragraph colors and override in color loop
@brandyscarney
Copy link
Member

This should be fixed now, I released a nightly version of the framework ionic-angular@2.0.0-rc.2-201611110146. Could you try it out and let me know if you find any issues?

npm install --save ionic-angular@nightly

Thanks!

@raae
Copy link
Author

raae commented Nov 23, 2016

I did not have time to test this, but the fix looks right when looking at the code. I will be needing this soon in my project and will test is then. Thanks for looking into it 👍

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 9, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@brandyscarney brandyscarney

Labels
None yet
Projects
None yet
Milestone
2.0.0-rc.3
Development

No branches or pull requests
2 participants
@raae @brandyscarney