chore: add a new eslint rule prevent using margin #17024
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
add a new eslint rule prevent using margin
The new rules will show warnings when you use
margin
s (inline & css-in-js).why do we need this?
when we work on responsiveness, margins make things difficult.
https://mxstbr.com/thoughts/margin
https://www.joshwcomeau.com/css/rules-of-margin-collapse/
In addition, generally the design team doesn't use margins since they use Figma's Auto layout that uses
padding
andgap
to create a layout.bad cases
VSCode
https://opentrons.slack.com/archives/CSCLVUW3C/p1733182307004269
close AUTH-
Test Plan and Hands on Testing
Changelog
Review requests
Risk assessment
low