ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

fix(item): only default slot content wraps

Open liamdebeasi opened this issue 1 year ago • 0 comments

Issue number: resolves #28769


What is the current behavior?

As part of https://github.com/ionic-team/ionic-framework/pull/28146, we allowed text wrapping inside of ion-item for accessibility purposes. One of the behaviors we added was to allow start, default, and end slotted containers to wrap to the next line to align with the iOS spec. However, this decision was based on an incorrect assumption.

The following screenshot shows the Settings app on iOS:

default scale 310% scale
Frame 4 Frame 5

At the default scale, the blue icon is in the iOS equivalent of the "start" slot, "Bluetooth" is in the default slot, and "On" is in the "end" slot. We incorrectly assumed the same markup was true when scaling the text up. However, at 310% scale the icon, "Bluetooth" text, and "On" text all become part of the default slot. You can tell because the bottom border runs underneath the blue icon at 310% whereas it does not at the default scale. This allows the text to wrap underneath the blue icon. When we originally implemented #28146 we thought that this meant the start, default, and end slot containers should wrap to the next line.

What is the new behavior?

  • This PR removes the ability for the start, default, and end slot containers to wrap to the next line. This behavior aligns with pre-v7.6.0 behaviors. The content inside of the default slot will continue to wrap within its own behavior which aligns with the behavior added in v7.6.0.

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

Other information

Dev build: 7.6.5-dev.11704916749.1e64a3a7

liamdebeasi avatar Jan 02 '24 22:01 liamdebeasi