chore(): add updated snapshots #27561
Merged
Conversation
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
|
|
brandyscarney
force-pushed
the
FW-1808-wrap-update-screenshots
branch
from
e766af3 to
753c24c
Compare
2 tasks
brandyscarney
force-pushed
the
FW-1808-wrap-update-screenshots
branch
from
753c24c to
162ff26
Compare
brandyscarney
force-pushed
the
FW-1808-wrap-update-screenshots
branch
from
258f256 to
b8320d8
Compare
brandyscarney
requested review from
averyjohnston and
liamdebeasi
and removed request for
a team
...t/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-ios-ltr-Mobile-Chrome-linux.png
Show resolved
Hide resolved
...tem/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png
Show resolved
Hide resolved
github-actions
bot
added
package: core
liamdebeasi
force-pushed
the
FW-1808-wrap
branch
from
31a31c1 to
c8b5bca
Compare
liamdebeasi
force-pushed
the
FW-1808-wrap-update-screenshots
branch
from
3369c22 to
486584e
Compare
liamdebeasi
force-pushed
the
FW-1808-wrap
branch
from
c8b5bca to
8548112
Compare
…update-screenshots
liamdebeasi
force-pushed
the
FW-1808-wrap
branch
from
8548112 to
31a31c1
Compare
…update-screenshots
liamdebeasi
force-pushed
the
FW-1808-wrap-update-screenshots
branch
2 times, most recently
from
fd6b913 to
8a19d41
Compare
liamdebeasi
force-pushed
the
FW-1808-wrap
branch
from
1e13de1 to
7d30a65
Compare
liamdebeasi
force-pushed
the
FW-1808-wrap-update-screenshots
branch
from
2938516 to
7dae23a
Compare
liamdebeasi
approved these changes
Jul 6, 2023
averyjohnston
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 <[email protected]> Co-authored-by: Liam DeBeasi <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.