-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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(button): use clamp for font sizes on circle shape #29200
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know we discussed this internally today, but I'm adding my comments here so we can keep track of changes.
...omponents/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
Outdated
Show resolved
Hide resolved
...utton/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The small icon did not have the correct size. The screenshot change is due to updating the value to be correct.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The small icon did not have the correct size. The screenshot change is due to updating the value to be correct.
* The values were provided through a native iOS app. | ||
* min font size: 13px, default font size: 17px, max font size: 38px | ||
*/ | ||
font-size: dynamic-font-clamp(0.63, 20.93px, 1.84, 1em); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is the default font size 20.93 when it says the default font size is 17 in the comments?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is due to ion-button
, the parent, having a different font size than the typical 16px.
* The values were provided through a native iOS app. | ||
* min font size: 13.5px, default font size: 20px, max font size: 40.5px | ||
*/ | ||
font-size: dynamic-font-clamp(0.85, 16px, 2.53, 1em); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is the default size 16 when it says 20 in the comments?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is due to ion-button
, the parent, having a different font size than the typical 16px.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
Also, this is |
Issue number: internal
What is the current behavior?
The font sizes for the icons are not clamping. This can lead to the icons getting too big if the
font-size
to the component is a large value.What is the new behavior?
ios
andmd
.Does this introduce a breaking change?
Other information
Here are some comparisons between native and the implementation. The red icon is the implementation and the white icon is the native app:
Default:
https://github.com/ionic-team/ionic-framework/assets/13530427/b4aaedea-40ec-4378-ae26-8d7962b7ff6f
Max font size:
https://github.com/ionic-team/ionic-framework/assets/13530427/286f76f3-fd31-44b7-bba1-38eba9a6aeb3
Min font sizes:
https://github.com/ionic-team/ionic-framework/assets/13530427/8dc4b4bd-035d-44b7-863e-ba7b7947bde1