fix: associate labels with autosuggest input

[brian-smith-tcril]

Description

Fixes #2436

Merge Checklist

• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a1f5abb
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/65775f539560920008eec6f4
😎 Deploy Preview	https://deploy-preview-2755--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (64611f7) 92.82% compared to head (a1f5abb) 92.84%.
Report is 68 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2755      +/-   ##
==========================================
+ Coverage   92.82%   92.84%   +0.01%     
==========================================
  Files         235      235              
  Lines        4237     4247      +10     
  Branches     1029     1032       +3     
==========================================
+ Hits         3933     3943      +10     
  Misses        300      300              
  Partials        4        4              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cintnguyen]

Tested locally, the icon button (dropdown arrow) is behaving as expected. As well as having the label associated with the input box correctly. LGTM!

[httpsmenahassan]

Apologies for missing this earlier! +1 to everything Cindy said -- I saw the same things when testing locally so this LGTM.

Out of curiosity, would we want to get rid of mentions/uses of floatingLabel within the Form.Autosuggest component at this point since labels are now associated with the input in another way?

[brian-smith-tcril]

Out of curiosity, would we want to get rid of mentions/uses of floatingLabel within the Form.Autosuggest component at this point since labels are now associated with the input in another way?

Good call! I don't think removing the floatingLabel functionality from the component makes sense at this point, but removing it from the examples on the docsite as not to encourage floatingLabel use seems like a good plan. I'll update the docsite page in this PR.

[httpsmenahassan]

Sounds good -- thanks, Brian!

[PKulkoRaccoonGang]

It seems to me that this mdx file should have 2 indent spaces (currently 4). This can be seen by looking at other mdx files of the Form component.

[brian-smith-tcril]

Thanks! I updated all the jsx in from-autosuggest.mdx https://github.com/openedx/paragon/compare/ea7a1a6fde65eac7566541d5d8be3a5b7af526dd..a1f5abbcae9703bdb7bd1e80f5f093a84d7aa36b

[openedx-semantic-release-bot]

🎉 This PR is included in version 21.11.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.0.0-alpha.24 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀