feat(action-sheet): support dynamic type - #27747
Merged
Merged
Conversation
|
|
liamdebeasi
changed the title
liamdebeasi
commented
Jul 5, 2023
|
|
||
| /// @prop - Padding of the action sheet button | ||
| $action-sheet-ios-button-padding: 18px !default; | ||
| $action-sheet-ios-button-padding: 14px !default; |
Contributor
Author
There was a problem hiding this comment.
Now that we are using min-height instead of height, the default height was being set to 64px due to this padding. Our old height: 56px masked the problem. You can see it in the following screenshot where the icon extends beyond the boundary of the button height (excluding the padding)
liamdebeasi
commented
Jul 5, 2023
|
|
||
| /// @prop - Padding top of the action sheet button | ||
| $action-sheet-md-button-padding-top: 0 !default; | ||
| $action-sheet-md-button-padding-top: 12px !default; |
Contributor
Author
There was a problem hiding this comment.
I added padding here because the buttons looked too cramped when the text scales up. This should have no impact on buttons at the default text scale
| without padding | with padding |
|---|---|
 |
 |
liamdebeasi
changed the title
liamdebeasi
marked this pull request as ready for review
July 5, 2023 18:47
liamdebeasi
requested review from
a team,
brandyscarney and
mapsandapps
and removed request for
a team
July 5, 2023 18:47
averyrousseau
approved these changes
Jul 10, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: N/A
What is the current behavior?
Action Sheet does not support Dynamic Type on iOS
What is the new behavior?
maxfunction to ensure that text does not go smaller than the set valuesmin-heightinstead ofheight. I also needed to changecontainfromstricttocontentbecausestrictcaused the button to ignore children when setting the dimensions.max-height: 10dvhso the container does not get clipped by the URL toolbar in Safari. This has technically always been an issue, but it is more easily visible now that the container can grow in size. 100vh is calculated assuming the iOS toolbar is collapsed, which is not always correct. dvh (The "d" stands for "Dynamic") changes based on if the toolbar is collapsed or not.Does this introduce a breaking change?
Other information
The min font size for iOS was not in the original design doc as I missed this initially. I updated the design doc to account for this: https://github.com/ionic-team/ionic-framework-design-documents/pull/114
Demo Video: https://github.com/ionic-team/ionic-framework/assets/2721089/d08c8a81-c11f-4a1d-8635-09f7f91a849a