DS-1933: Removes margins from form web components

[MeaghanCarrieres]

• Removes margins from "ontario-input", "ontario-checkboxes", "ontario-button" and "ontario-textarea" web components
• Removes margins from ontario-input class in text-input component styles in global styles package to target "ontario-date-input" margins

[matt-stjean]

@MeaghanCarrieres Does anything need to be done for ontario-dropdown-list and ontario-radio-buttons? I see them in the ticket but not the changes.

[MeaghanCarrieres]

@MeaghanCarrieres Does anything need to be done for ontario-dropdown-list and ontario-radio-buttons? I see them in the ticket but not the changes.

Hey @matt-stjean! The ontario-dropdown-list component makes use of the ontario-input class, so when the margins were removed from that, it fixed it.

As for the radio buttons, they don't seem to have any margins on their group, and only on individual radio button items themselves. The margin that is causing the space at the bottom of their grouping is from the ontario-form-group class, which I believe will be removed/refactored in another ticket in this epic.

[matt-stjean]

Thanks for the reply @MeaghanCarrieres, it looks good to me.

[smorrisods]

Looks like this is what is adding the extra spacing. I think this rule will not be needed with the overall changes to how we handle form spacing as the vertical spacing. I think we should clean this up in this PR as it is relevant to the thematic changes being made.

From: packages/ontario-design-system-global-styles/src/styles/scss/6-components/_text-inputs.component.scss

.ontario-form-group:last-of-type {
	margin-bottom: 2.5rem;
}

It seems to also show up in packages/ontario-design-system-global-styles/src/styles/scss/6-components/_form.component.scss:

.ontario-form-group:last-of-type {
	margin-bottom: 2.5rem;
}

.ontario-form-group:last-of-type {
	margin-bottom: spacing.$spacing-8;
}

We should figure out what to do with the ontario-form-group class, as it impacts the distribution package. Any thoughts?

[MeaghanCarrieres]

Looks like this is what is adding the extra spacing. I think this rule will not be needed with the overall changes to how we handle form spacing as the vertical spacing. I think we should clean this up in this PR as it is relevant to the thematic changes being made.

From: packages/ontario-design-system-global-styles/src/styles/scss/6-components/_text-inputs.component.scss

.ontario-form-group:last-of-type {
	margin-bottom: 2.5rem;
}

It seems to also show up in packages/ontario-design-system-global-styles/src/styles/scss/6-components/_form.component.scss:

.ontario-form-group:last-of-type {
	margin-bottom: 2.5rem;
}

.ontario-form-group:last-of-type {
	margin-bottom: spacing.$spacing-8;
}

We should figure out what to do with the ontario-form-group class, as it impacts the distribution package. Any thoughts?

Hey Scott,
I removed the styles for now, but now that I'm investigating its use, I'm not sure if we need it at all. I originally thought it was used just to contain the labels and inputs, but it seems like those containers are already there for other classes (such as ones to indicate errors or hint expanders, etc.). So, it seems like we can just get rid of it alltogether?

[smorrisods]

So, it seems like we can just get rid of it alltogether?

This was the sense I got too a while back, but it needs more detailed exploration to make sure we're not causing carnage by removing it. 🐱

[smorrisods]

I wonder how this ontario-form-group SASS translates into the dist package 🤔