1908535 - Remove the "--input-space-block" token

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task, P3)

Description

[Tim Giles [:tgiles]]

In Bug 1904094, we introduced the --input-space-block token to standardize the spacing between input elements. We should refactor the form components' CSS to use this new token instead of directly using --space-xsmall token.

Comment 1

[Mark Striemer [:mstriemer]]

This should probably be renamed to something like --input-gap-block to make it clear that it's the total space between elements. It should apply to the space between the label and description, and if the input element is in inputlayout=block mode then it should also apply to the input element

Comment 2

[Hanna Jones [:hjones]]

Just a note that the existing usage of this token got changed in the work for bug 1933524, so there's an exception in browser_parsable_css now that we'll need to remove as part of this work.

Comment 3

[Stuart Colville [:muffinresearch]]

NI'ing to clarify the details here.

Comment 4

[Hanna Jones [:hjones]]

After looking at this again I think the design/implementation has evolved and we now only have a single place where this token would be useful. We could change this to be:

--input-margin-block-adjust: var(--input-space-block) 0;

I think when this bug was filed we were assumed would be used here too, but we actually use --space-xxsmall between the label and description to account for line height/space.

I'm not sure this token is really needed anymore - my recommendation would be to change this bug to remove the token and the exception in the browser_parsable_css test

Comment 5

[Tim Giles [:tgiles]]

To help Mozilla out with this bug, here's the steps:

1. Comment here on the bug that you want to volunteer to help.

   • This will tell others that you're working on the next steps.

2. Download and build the Firefox source code

   • Here is a more detailed tutorial for getting set up to work on Firefox
   • If you have any problems, please ask on Element/Matrix in the #introduction channel. They're there to help you get started.

3. Start working on this bug. You'll need to remove the --input-space-block token from our design-tokens.json file. Afterwards, you'll need to run ./mach buildtokens for the relevant files to be updated from this change. Finally, you'll need to remove the exception for this token in browser_parsable_css.js

   • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me by using the "Request information from" checkbox and setting the dropdown select to "mentor". Also, you can find me and my teammates on the #reusable-components channel on Element/Matrix most hours of most days.

4. Build your change with mach build and test your change by running mach package followed by mach test browser/base/content/test/static/browser_parsable_css.js --appname=dist. Also check your changes for adherence to our style guidelines by using mach lint.

5. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.

   • How to Submit a Patch
   • This is when the bug will be assigned to you.

6. After a series of reviews and changes to your patch, I'll push it to autoland.

   • If there are changes requested, please read the "To update a submitted patch" section to ensure you don't accidentally create a duplicate revision!
   • Your code will soon be shipping to Firefox users worldwide!

7. ...now you get to think about what kind of bug you'd like to work on next.
   Let me know what you're interested in and I can help you find your next contribution.

Comment 6

[oarnesto]

Attachment: Bug 1908535 - Remove `--input-space-block` token r=#reusable-components-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3a6fa2a47270
https://hg.mozilla.org/integration/autoland/rev/ca9563a4d744
Remove `--input-space-block` token r=reusable-components-reviewers,desktop-theme-reviewers,tgiles

Comment 8

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/ca9563a4d744