fix(button): use clamp for font sizes on circle shape #29200
Conversation
sean-perkins
requested review from
liamdebeasi
and removed request for
brandyscarney
...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.
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.
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.
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.
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.
Why is the default size 16 when it says 20 in the comments?
There was a problem hiding this comment.
This is due to ion-button, the parent, having a different font size than the typical 16px.
liamdebeasi
changed the title
|
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-sizeto the component is a large value.What is the new behavior?
iosandmd.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