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
bug: Disabled modern form controls do not have consistent label color on iOS #27184
Closed
3 tasks done
Labels
Comments
sean-perkins
added
package: core
@ionic/core package
type: bug
a confirmed bug report
labels
Apr 12, 2023
2 tasks
brandyscarney
added a commit
that referenced
this issue
May 22, 2023
…ct) to have consistent disabled opacity (#27396) Issue number: resolves #27184 --------- The modern form controls do not use the same opacity for their labels when disabled, resulting in inconsistent UI when using two different types in the same view (select vs checkbox, for example). The checkbox, input, radio, range, select, textarea and toggle labels have been updated on both modes to use the same opacity as each other when disabled. The checkbox and radio icons have been updated to use a different opacity than the label for `md` mode. - Updates `ios` mode so all form controls use the same opacity of `0.3` - I could not find any guidelines by Apple for what color these should be, so I decided to just make them the same as what is most commonly used & match item - Updates `md` mode so all form control labels use the same opacity of `0.38` - I used the [Material Design 3 documentation](https://m2.material.io/components) to get this number as well as the opacity of the disabled selection controls in the [Material Design 2 figma design kit](https://www.figma.com/community/file/778763161265841481). The Material Design 2 documentation does not mention the opacity, but this is also the number used by Material Design 1 so it's safe to assume it is what the disabled form labels should also use for Material Design 2. - Updates the `md` range so the slotted elements are also included when setting the opacity on the label - Updates the range, radio & checkbox tests to make sure there are screenshots in the different disabled states - Updates the item/disabled test to include radio & textarea so you can see all form controls side by side - [ ] Yes - [x] No I downloaded screenshots of the item disabled tests and put them side by side for `main` and this branch in order to see the differences in the labels. The grey boxes to the left of each item are just a bigger version of the label color for that item, so it's easier to see when they aren't the same. ![iOS before and after](https://github.com/ionic-team/ionic-framework/assets/6577830/2ce53625-e4e3-4565-a741-a47e27cf0275) ![MD before and after](https://github.com/ionic-team/ionic-framework/assets/6577830/9cd83cdc-ab45-49bf-a0dc-1d78ba7f43be) --------- Co-authored-by: ionitron <hi@ionicframework.com>
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
Different Ionic form controls have different label colors when disabled. This looks strange when the controls are stacked together in a list.
Expected Behavior
iOS labels should have a consistent appearance when disabled, regardless of the form control. In this case, the color/opacity should be consistent across all controls (unless the Human Interface Guidelines specify otherwise).
Steps to Reproduce
Code Reproduction URL
https://stackblitz.com/edit/gplvwq?file=index.html
Ionic Info
N/A
Additional Information
ion-range
has two layers of opacity causing a bigger variance. The host has0.5
opacity when disabled, but the.label-text-wrapper
additionally has another0.3
opacity applied for the modern form syntax.The text was updated successfully, but these errors were encountered: