Salt Heading components should set margin to 0

[ZarkoPernar]

Package name(s)

Core (@salt-ds/core)

Package version(s)

1.8.1

Description

Heading elements (h1,h2,h3) have margins by default in most browsers. This makes them hard to compose with something like our layout components. It is pretty much guarateed our users will have to reset the css anyways if we recommend them to use them with layout components.

Steps to reproduce

<StackLayout gap={1}>
  <H1>Heading 1</H1>
  <Text>Lorem ipsum...</Text>
</StackLayout>

Expected behavior

The example above should have the text and heading only have the gap spacing in between.

Operating system

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Browser

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[lukeac123]

@ZarkoPernar I'm not sure i fully understand the issue. Does this not solve the problem ? <StackLayout align'start'>

[mark-tate]

reset the margins in global styles

[joshwooding]

Removed priority and moved back to triage. We need to figure out if this is a bug or an enhancement.

I don't know if we should globally reset headers. There are some components which would need it, e.g. Accordion. But a global reset could affect elements we don't intend to. There's a question about whether we should make removing the margin on our Salt Text component easier, but that would require design input @jpmorganchase/salt-design.

Personally, I think putting a header and text in a flex container is probably not what most developers would do and instead would expect their to be margin on the headers like there is natively.

[origami-z]

We should consider spacing guide (Figma) coming out from DP content work being the "design input', having browser default will not work well. We need to pick a technical implementation recommendation and go with it.