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

[core] fix: improve contrast for disabled inputs in iOS #5641

Merged
merged 4 commits into from
Oct 5, 2022

Conversation

mduczek
Copy link
Contributor

@mduczek mduczek commented Oct 4, 2022

Checklist

No additional documentation/tests necessary

Changes proposed in this pull request:

Fix or iOS specific styling, based on:
https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
and:
https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices

Reviewers should focus on:

Screenshot

Before

Screenshot 2022-10-04 at 12 06 38

Screenshot 2022-10-04 at 12 05 21

After

Screenshot 2022-10-04 at 12 07 42

Screenshot 2022-10-04 at 12 02 13

@mduczek mduczek requested a review from adidahiya October 4, 2022 11:05
@blueprint-bot
Copy link

ios fix

Previews: documentation | landing | table | demo

@adidahiya
Copy link
Contributor

regular text inputs look fine but the text in TagInput tags is now unreadable in iOS:

Before After
image image

Copy link
Contributor

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

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

👎 for TagInput regression described in my comment above

@@ -142,6 +142,11 @@ $control-group-stack: (
cursor: not-allowed;
resize: none;

@supports (-webkit-touch-callout: none) {
Copy link
Contributor

Choose a reason for hiding this comment

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

please add a code comment explaining that this is for iOS support

@adidahiya adidahiya changed the title iOS: Input disabled state contrast fix [core] fix: improve contrast for disabled inputs in iOS Oct 4, 2022
@blueprint-bot
Copy link

more targeted fix

Previews: documentation | landing | table | demo

@mduczek
Copy link
Contributor Author

mduczek commented Oct 4, 2022

Thanks for finding the issue with TagInput!

Given iOS renders only disabled <input/> in non-standard way, I changed the selector to only target <input />:

Screenshot 2022-10-04 at 22 40 03

while testing I also noticed we should have an override for dark-mode, so added it as well :)

Screenshot 2022-10-04 at 23 01 32

@blueprint-bot
Copy link

fix for dark mode

Previews: documentation | landing | table | demo

@mduczek mduczek requested a review from adidahiya October 4, 2022 21:10
Copy link
Contributor

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

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

lgtm, thanks @mduczek 👍🏽

@adidahiya adidahiya merged commit 66df5d6 into develop Oct 5, 2022
@adidahiya adidahiya deleted the md/ios-disabled-state-contrast-fix branch October 5, 2022 03:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants