SelectableList: Mobile - Truncate label to 2 lines
Closed this issue · 7 comments
Type: minor
Describe the bug
To Reproduce
Steps to reproduce the behavior:
- https://deploy-preview-210--stoic-hodgkin-c0179e.netlify.com/#!/SelectableList
- Open on phone or mobile mode
Expected behavior
Truncate to 2 lines
@cassytaylor @machikoyasuda
Are we sure we want to truncate to two lines? Which two lines would we keep? Seems like that may cause uncertainty for a user with several addresses.
@spencern, it would preserve the entire address except for the remainder that doesn't fit on 2 lines of text within the container - so the user would still see the name, street address, apartment number, etc. with the information likely to be cut off being the state/region, postal code, and country.
The customer would have enough to go on with the name and street address (ie, home address, PO box, etc.) that they would be able to select the correct address – and the address would be shown in full on the other steps throughout checkout.
Seems like we could save some additional space by reducing the size of the edit button, or going to an icon.
Also, since this is in the docs, the list is being compressed further by being in the example container.
A few more complications @cassytaylor
Right now discussing truncating the label to 2 lines because of a specific implementation of the SelectableList in the address book. This decision will have impact on all selectable lists that we create throughout the application. Some lists may require that all information is displayed for each item.
How should this work with increased or decreased text sizes? Screen readers?
I would vote for default behavior to expand the height and keep the top line of text aligned with the radio/checkbox. Then there can be a shouldTruncateText prop where you can opt in to a no-wrap behavior.