feat(input): `LabelPosition.left` capabilities for all inputs. Support for `labelWidth` prop.

[chris-cedrone-cengage]

Issue: # 910

What I did

Implemented inline left label position for Input.

Screenshots (if appropriate):

Checklist

• [x] changeset has been added
• [x] I have made corresponding changes to the documentation
• [x] New and existing unit tests pass locally with my changes
• [x] I have added tests that prove my fix is effective or that my feature works

How to test

Verify if working in following components:

• Text input
• Text area
• Date
• Time
• Combobox
• Native select
• Password

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 6d4b70d3c38c1af7d1f8ce40a2228d3e86ab42e1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[codecov-commenter]

Codecov Report

Base: 86.29% // Head: 86.37% // Increases project coverage by +0.07% :tada:

Coverage data is based on head (6d4b70d) compared to base (85853ea). Patch coverage: 97.43% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev     #942      +/-   ##
==========================================
+ Coverage   86.29%   86.37%   +0.07%     
==========================================
  Files         176      176              
  Lines        4728     4747      +19     
  Branches     1629     1642      +13     
==========================================
+ Hits         4080     4100      +20     
  Misses        329      329              
+ Partials      319      318       -1     

Impacted Files	Coverage Δ
...act-magma-dom/src/components/Combobox/Combobox.tsx	93.33% <ø> (ø)
...agma-dom/src/components/Combobox/MultiCombobox.tsx	91.46% <ø> (ø)
.../react-magma-dom/src/components/Combobox/index.tsx	100.00% <ø> (ø)
...a-dom/src/components/NativeSelect/NativeSelect.tsx	100.00% <ø> (ø)
...t-magma-dom/src/components/PasswordInput/index.tsx	100.00% <ø> (ø)
...ct-magma-dom/src/components/Select/MultiSelect.tsx	97.50% <ø> (ø)
...es/react-magma-dom/src/components/Select/index.tsx	100.00% <ø> (ø)
...mponents/FormFieldContainer/FormFieldContainer.tsx	95.65% <92.30%> (+1.90%)	:arrow_up:
...c/components/CharacterCounter/CharacterCounter.tsx	93.75% <100.00%> (+1.44%)	:arrow_up:
...agma-dom/src/components/Combobox/ComboboxInput.tsx	72.50% <100.00%> (ø)
... and 8 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[silvalaura]

4. Left label isn't working on Combox - Multi: https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app/?path=/story/combobox--multi&args=labelPosition:left

I can speak to 4. That fix was merged recently, so Chris you just need to pull dev onto your branch and this will be fixed.

[chris-cedrone-cengage]

1. The label needs to align better with the text inside the input. The top margin of the label should be 12px (spacing04). done

2. This has also revealed a small styling bug on Text Area. The top/bottom padding within the text area itself is only 4px, and it should be 8px like the other inputs. done

3. For some reason, the label alignment on Combobox/Select/Native Select is displaying a little differently. If we change the top margin of the label to 12px, then it will display too low. So we either need to figure out why it is displaying differently or make the top margin on these components 10px instead. done

4. Left label isn't working on Combox - Multi merged dev, fixed

5. Why is there a "labelWidth" prop on Input, but not on any of the other components? should be on all applicable components now

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app

[greenervigil]

Looks like the larger inputs alignment is off:

[orion-cengage]

Great catch @greenervigil. @ccedrone Please checkout the large inputs.

[github-actions[bot]]

🚀 Deployed on https://docs-preview-942--upbeat-sinoussi-f675aa.netlify.app

[github-actions[bot]]

🚀 Deployed on https://storybook-preview-942--upbeat-sinoussi-f675aa.netlify.app