Skip to content

fix(button): wrap text by default#28682

Merged
mapsandapps merged 6 commits intofeature-8.0from
FW-4599
Dec 12, 2023
Merged

fix(button): wrap text by default#28682
mapsandapps merged 6 commits intofeature-8.0from
FW-4599

Conversation

@mapsandapps
Copy link
Contributor

@mapsandapps mapsandapps commented Dec 11, 2023

Issue number: resolves #8700


What is the current behavior?

Button text is truncated by default.

What is the new behavior?

  • Button text wraps by default.

Does this introduce a breaking change?

  • Yes
  • No

Starting in Ionic Framework 7.2, we encouraged developers to opt-in to text wrapping in buttons by setting ion-text-wrap.

This PR is targeting Ionic Framework v8, where text wrapping of buttons will be the default behavior.

This may cause visual changes across apps using Ionic Framework. Buttons with long text may now be taller than before, leading to layout shifts.

If developers wish to prevent text wrapping, they may use the .ion-text-nowrap class.

@github-actions github-actions bot added the package: core @ionic/core package label Dec 11, 2023
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could add the nowrap class to these buttons so they don't wrap, if that's preferred over updating the snapshots.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am okay with keeping this. I think we should avoid custom css where possible.

@mapsandapps mapsandapps changed the title fix( button): wrap text by default fix(button): wrap text by default Dec 11, 2023
@mapsandapps mapsandapps marked this pull request as ready for review December 11, 2023 22:13
@mapsandapps mapsandapps requested a review from a team as a code owner December 11, 2023 22:13
@mapsandapps mapsandapps requested review from averyjohnston and removed request for a team December 11, 2023 22:13
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am okay with keeping this. I think we should avoid custom css where possible.

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants