Combobox responsiveness and mobile advice #2822
-
|
Hi. The growth team is working on a redesign of the sign-up page in order to migrate this page to Paste and move towards a future visual alignment with the login page. As part of this larger effort, the localization team is also looking to introduce a language selector on the sign-up, with more languages to be added next year. I wanted to ask the for any recommendations or guidelines for using the combobox on the new sign-up screen, and how this combobox component would behave on a mobile screen? Any key considerations to keep in mind and if this is the best approach for a language selector on the sign-up? Thank you A couple of relevant Figma frames can be found here: |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 5 replies
-
|
For this use casee the component I'm actually going to suggest you use in the Select. This is for a couple of reasons:
For those two reasons, this would seem like the most suitable Component to use. If the number of languages starts to grow, say larger than 20, then maybe we can discuss how you would use combobox, but for now I think Select is what you're after. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @SiTaggart Thank you for your suggestion on this. I will go ahead to use the select for the sign-up language selector that will be upcoming as we introduce languages in the platform. Please see here for reference to see if it is alright: |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that looks perfect! |
Beta Was this translation helpful? Give feedback.
-
|
Back again with another combobox -> select question! |
Beta Was this translation helpful? Give feedback.
-
|
Hi Select does offer groupings https://paste.twilio.design/components/select/#select-with-option-groups so you're covered. 👍🏼 |
Beta Was this translation helpful? Give feedback.
-
|
@SiTaggart lifesaving. Don't know how I missed that in my readthrough. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much. We have another follow-up question. @SiTaggart We are also looking to introduce a language selector inside the Console, which will eventually and ideally sit inside the user settings page. However, the user settings page is currently not yet been pastified, so we have a temporary interim modal solution until this selector can be migrated into the new future user settings page. For a first version, we will only have two languages. However, we are looking to introduce a badge at some point in the future, to indicate a new or beta language. I am working with Giammarco from the Localization team on this. We are having an issue where the combobox selector does not overflow from the modal. If you click into the language preferences within modal at the bottom here, hopefully you can understand the issue https://b5phd4.csb.app/ We want to ask for your advice and guidance on this? If we were to introduce a badge next to the language in the future as localization scales and more languages are to be added. |
Beta Was this translation helpful? Give feedback.
-
|
That's a known issue and is in our backlog to address. In the meantime, as you only have a small modal and a couple of options, a really quick and safe option would be to just add a min-height to the modal body via a It's a workaround until we get to the Combobox options work. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
Hi @amrita-sakhrani
For this use casee the component I'm actually going to suggest you use in the Select.
This is for a couple of reasons:
For those two reasons, this would seem like the most suitable Component to use. If the number of languages starts to grow, say larger than 20, then maybe we can discuss how you would use combobox, but for now I think Select is what you're after.
Thanks!