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

feat(switch): :checked pseudo and color fixes #9790

Merged
merged 5 commits into from Feb 21, 2022

Conversation

rigor789
Copy link
Member

@rigor789 rigor789 commented Feb 20, 2022

PR Checklist

What is the current behavior?

Switches cannot be styled using the :checked pseudo selector.
Switch color behavior differs between iOS and Android.
Android Switch colors are muted and not same as set.

Screenshot 2022-02-20 at 6 11 13 PM

What is the new behavior?

Switches can now be styled with the :checked selector.
Switches now have the same behavior across iOS and Android.
Switch colors are exactly as set (no color filters etc applied).

Screenshot 2022-02-20 at 6 09 16 PM

.switch-demo-page Switch.custom-switch {
    color: #ddd;
    background-color: #65adf1;
}

.switch-demo-page Switch.custom-switch:checked {
    color: #111;
    background-color: #65adf1;
}

.switch-demo-page Switch.custom-switch:disabled {
    color: #777;
    background-color: #ddd;
}

.switch-demo-page Switch.custom-switch:disabled:checked {
    color: #ddd;
    background-color: #777;
}

BREAKING CHANGES:

Switch color now affects both unchecked and checked states on iOS
Switch backgroundColor now affects both checked and unchecked states on iOS
Switch colors are now exactly as specified without any color filtering on Android (no more muted colors)

Migration: update color, backgroundColor and offBackgroundColor values (inline or in css) to the desired colors.

@cla-bot cla-bot bot added the cla: yes label Feb 20, 2022
@farfromrefug
Copy link
Collaborator

@farfromrefug farfromrefug commented Feb 20, 2022

@rigor789 couldnt we make that "global" by doing it in the propery class and looking at the property name. it would work automatically for.all components. and we could do that for more pseudo states

@rigor789
Copy link
Member Author

@rigor789 rigor789 commented Feb 20, 2022

@farfromrefug not sure about the bloat it would add to the Property class.

I would keep it out of the scope of this PR and discuss in a separate scope.

@rigor789
Copy link
Member Author

@rigor789 rigor789 commented Feb 20, 2022

Testing on ios 12.4 - seems like changing the colors between states causes wonky animations and looks awful. I'll most likely add a check and fallback to old behavior on older ios versions...

@rigor789
Copy link
Member Author

@rigor789 rigor789 commented Feb 21, 2022

Made the changes conditional so they are applied on ios 13+ since ios <13 causes glitchy animation when switching colors between states.

Screenshot 2022-02-21 at 12 13 38 PM

@NathanWalker NathanWalker merged commit dc3fcba into release/8.2.0 Feb 21, 2022
2 of 3 checks passed
@NathanWalker NathanWalker deleted the feat/switch-checked-pseudo branch Feb 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants