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

fix(label): keep color when focused on a floating or stacked label #18576

Merged
merged 9 commits into from
Oct 7, 2020
Merged

fix(label): keep color when focused on a floating or stacked label #18576

merged 9 commits into from
Oct 7, 2020

Conversation

topalavlad
Copy link
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

When a stacked label with color attribute set is focused, it switches color to primary (only on MD)

Issue Number: #18531

What is the new behavior?

A stacked label with color attribute set will keep its color when focused

Does this introduce a breaking change?

  • Yes
  • No

@ionitron-bot ionitron-bot bot added the package: core @ionic/core package label Jun 19, 2019
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR! Unfortunately this will remove the default behavior of changing the label to primary on focus. The fix for this is likely updating the following to check for :not(.ion-color) on the label:

:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
  color: $label-md-text-color-focused;
}

:host-context(.item-has-focus).label-stacked,
:host-context(.item-has-focus).label-floating {
  color: $label-md-text-color-focused;
}

@topalavlad
Copy link
Contributor Author

I have updated the code but don't you think this request might have unexpected effects for people who were counting on primary color always being used for focused items?

@brandyscarney
Copy link
Member

@topalavlad No this looks good! I think this is the correct CSS for the label, and expected behavior. The only issue seems to be that the highlight color for the bottom of the item is still using primary. I'm thinking we need to pass the label color up somehow.

@brandyscarney brandyscarney dismissed their stale review September 10, 2020 17:14

I made updates to this branch

@brandyscarney brandyscarney changed the title bug(label): keep color when focused fix(label): keep color when focused on a floating label Oct 6, 2020
@brandyscarney brandyscarney changed the title fix(label): keep color when focused on a floating label fix(label): keep color when focused on a floating or stacked label Oct 6, 2020
@brandyscarney brandyscarney merged commit 992580a into ionic-team:master Oct 7, 2020
@brandyscarney
Copy link
Member

brandyscarney commented Oct 7, 2020

Thanks so much for this PR! 😊 Sorry it took so long to get in.

TakumaKira pushed a commit to TakumaKira/ionic-framework that referenced this pull request Nov 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants