Field components have inconsistent spacing between label and field component

[AmandaFurukawa]

Detailed description

In the figma library - carbon V11

There is inconsistent spacing set between the label and field components (dropdown, input, number input, text area input). It looks like some of the labels have extra padding set which is causing the spacing to be more than it should be.

What version of the Carbon Design System Kit are you using? V11

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name. default - dropdown, text input, area input, number input

What did you expect to happen? What happened instead? What would you like to see changed? They should all have the same spacing between the label and the field component

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. pull all 4 components in figma from v11 library and place them all beside each other to see inconsistent spacing

Additional information

the label margin of number input, dropdown have below padding set to 4 (text input is set to no extra padding)

text area has 8 spacing for the label/text area (which i guess is overriding the text area overall 4px spacing)

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

[AmandaFurukawa]

I see that 8px is the proper spacing between the label and field so text input is the one that is incorrect (its 4) - but also the way the spacing is set up for all components are not consistent (FYI)

[aagonzales]

Here's how the spacing should work in Figma, the 4px problem was coming from the helper text spec. I also see the spacing set-up inconsistency that she mentioned.

[aagonzales]

Ok I have updated the text input labels to have the total 8px bottom padding and the fix will be available in the next library publish.

However, concerning the other problem with inconsistent spacing here is what I found out. There are two ways of doing label spacing

1. 4px vertical spacing + 4px padding bottom Dropdowns, Number input, Select, Password input

2. 8px padding-bottom on the label Text input, text area, date picker

This one matches the spec better and how it is done in code.

[aagonzales]

White theme

• [x] Number input
• [x] Select
• [x] Password input
• [x] Dropdown

Only making updates in the white theme due to future theme consolidation work.