Remove all (most) margins from components

[jas7457]

Intro

Polaris provides a great set of lego blocks to build out apps in Shopify admin. These lego blocks, mainly, fit nicely together and provide a cohesive component library and allow for fitting these pieces together to form a larger vision of design, features, and products. Margins, all too often, can turn this lego build into a jenga tower.

I think Theo does a good job explaining why margin might be harmful, and part of it comes from a blog post from Max Stoiber called "Margin considered harmful". In essence: "Padding is taking distance from someone, margin is pushing someone. Pushing someone is bad"

Issues

Negative margins on buttons and icons cause unwanted scrollbars (both vertically and horizontally) on mobile

Negative margins cause vertical misalignment of buttons in IndexTable rows

Automatic margins on banners causes misalignment, even inside of BlockStack
https://github.com/Shopify/discovery-app/pull/4455#issuecomment-1969447293

Although the admin doesn't officially support RTL languages, using things like margin-left and margin-right are not compatible with RTL. Gap or logical properties are an easy solution to have it be bidirectional support.

Proposal

This would be considered a breaking change, as it will shift elements around and get rid of margins elements used to have. Ideally, I would like to see 0 margins used in the codebase. Anything that was previously using margin inside of a component for space should use BlockStack/InlineStack gap instead of margin. While that's highly unlikely, I think at the very least, two things need to happen:

1. All negative margins are removed. They can cause scrollbars, move things out of their normal space, and I'm not sure I can think of a single use case where they should be used.
2. All margins at the component boundary layer are removed, meaning any margin that can affect other components are removed. Ideally, all margins would be gone and replaced by gap, but at the very least, all margins that can shift other elements are gone.

There are some cases where components render margin if there is more than one rendered after each other. For example, Banners do this. I'd be open for discussion, but I think we should either:
a. Let the user render their own BlockStack if they have multiple
b. Provide a BannerStack component if we think it's important that the spacing is the same for all occurrences of this.

[sam-b-rose]

Certainly agree that there are many cases where margin (particularly negative margin) is causing friction. I think this is worth exploring. I could see it removing the need for a lot of hacky overrides for component compositions.

There are several areas where we use it internally within components (ex: DatePicker) that might be exceptions. However, all components where children render within the component (ex: IndexTable) or has margin on the outside of the component (ex: Button, Icon) seem like valid candidates for removing margin.