ionic-framework
ionic-framework copied to clipboard
fix(item): only default slot content wraps
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 |
|---|---|
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