1918216 - Update Dropdown custom component to match M3 design

Status: NEW

(Firefox for Android :: Design System and Theming, task)

Description

[Nicholas Poon (redirect NI to [e-mail]) [:Nick]]

There were ideas mentioned in the comments in this patch of things that can be improved and what to look out for to ensure we don't introduce a regression. Also, consider making our Dropdown component more similar to the Material API so that we can easily swap it in in the future.

The current composable also requires parameters such as whether the device is in landscape orientation to help use the correct padding. It would be ideal if we didn't need this parameter as it makes the component less generic and more specific to the Translations use case.

We should also investigate whether the TextMeasurer is necessary to get the correct DropdownMenu width. Compose should be able to make the menu the correct size depending on the item inside.

Comment 1

[Nicholas Poon (redirect NI to [e-mail]) [:Nick]]

We now have a new design for the Dropdown to match M3 so we should now update the Dropdown from M2 to M3 in this ticket.

The new M3 dropdown uses the design of an outlined text field and a menu to make up the dropdown.

We need to keep in mind all of the different quirks of the current dropdown when updating it. There were a lot of things that were intentionally done (including for a11y) when the translations project was in progress

WebCompat Reporter dropdown
Menu
Text Field