Uh oh!
There was an error while loading. Please reload this page.
chore(): add updated snapshots - #27561
Merged
Merged
Conversation
|
brandyscarneyforce-pushed
the
FW-1808-wrap-update-screenshots
branch
from
June 14, 2023 21:29
e766af3 to
753c24cCompare2 tasks
brandyscarneyforce-pushed
the
FW-1808-wrap-update-screenshots
branch
from
June 15, 2023 19:47
753c24c to
162ff26Comparebrandyscarneyforce-pushed
the
FW-1808-wrap-update-screenshots
branch
from
June 20, 2023 21:13
258f256 to
b8320d8Comparebrandyscarney
marked this pull request as ready for review
June 20, 2023 21:42
brandyscarney
requested review from
averyrousseau and liamdebeasi
and removed request for
a teamJune 20, 2023 21:42
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
liamdebeasiforce-pushed
the
FW-1808-wrap-update-screenshots
branch
from
June 27, 2023 21:13
3369c22 to
486584eCompareliamdebeasiforce-pushed
the
FW-1808-wrap-update-screenshots
branch
2 times, most recently
from
June 27, 2023 22:42
fd6b913 to
8a19d41Compareliamdebeasiforce-pushed
the
FW-1808-wrap-update-screenshots
branch
from
June 27, 2023 23:00
2938516 to
7dae23aCompareliamdebeasi
approved these changes
Jul 6, 2023
averyrousseau
approved these changes
Jul 7, 2023
brandyscarney added a commit
that referenced
this pull request
Jul 7, 2023
) Issue number: N/A - this does not completely resolve an issue but it enables users to opt-in to having text wrap in a button by setting a minimum height --------- ## What is the current behavior? The current behavior when text is really long in a button is: - Default buttons expand in width until part of the text (and button) is off the screen and not in the visible viewport - Block and full buttons horizontally align the text in the center and overflow it on both sides (but the overflow is not visible so the text is cut off at the beginning and end) ## What is the new behavior? Allow the button height to increase when text wraps and add some padding so that buttons with wrapped text still look nice. This does **NOT** wrap the text in a button by default. That will be done in FW-4599. - Removed `text-overflow: ellipsis` since this does not have any effect - Changes `height` setting to `min-height` on all button types (small, large, default) and buttons inside of an item, toolbar or list header - Increases `padding-top` and `padding-bottom` on the buttons so that overflowing buttons have padding around them - Changes `.button-native` display property from `block` to `flex` in order for anchor tags (`<ion-button href="#">` to align their text vertically - Sets `flex-shrink: 0` on slotted `start`/`end` elements to prevent icons (and other elements) from shrinking to make room for the text - Adds e2e test for button wrapping including the different types of buttons that were changed by this PR - Adds `ion-text-wrap` to the `ion-button` elements used in this test to verify the height / padding changes are working as desired (to be removed with FW-4599) - Screenshot diffs are in the following PR: #27561 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information This does **NOT** wrap the text in a button by default. It only enables buttons to look nicer and auto adjust their height/padding when the text is wrapping. After internal discussion we decided that automatically making the text wrap inside of a button may have undesired effects on existing apps. For example, if someone has a button inside of a list header with a long label, the button will now wrap if it has a space or dash in the text content. Developers should set `ion-text-wrap` on the `ion-button` to opt-in to text wrapping in a button, and this will become the default as part of FW-4599 (the next major release). --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
This PR contains the screenshots for #27547
See this comment thread here for why there are so many diffs with this change.