1904094 - Match experimental select styling with other form components

Status: RESOLVED FIXED

(Firefox :: Settings UI, enhancement, P2)

Description

[Mark Striemer [:mstriemer]]

The select styling in the experiments section should match our common form components layout and spacing. See recent moz-checkbox description for spacing tokens

The layout should be as follows:

Label
Description
Select

@jules our API docs list that we should use --space-xxsmall for the --input-space-block token, but it also lists using 4px. The --space-xsmall token is actually our 4px token. Which one should we use?

Comment 1

[Tim Giles [:tgiles]]

Attachment: Bug 1904094 - Match select element styling in experimental section with other components. r=#recomp-reviewers,#settings-reviewers

Went with adding margin-block-end to achieve the ~4px spacing between
label and select, and between select and description.

Comment 2

[Jules Simplicio [:jules]]

Sorry for the delay on this ni? I have been out on PTO and sick :-(

I had been working with Tim on this this week and wanted to comment here to confirm we should use --space-xsmall (~4px) and ignore the API doc. I just tweaked the doc too.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/59644f1ab054
Match select element styling in experimental section with other components. r=reusable-components-reviewers,settings-reviewers,desktop-theme-reviewers,dao,hjones,mstriemer

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/59644f1ab054