fix(21066): visual bug on FluidDropdown when invalid prop is true

[suniltc-ibm]

Closes #21066
Closes #21186

When invalid prop is sent on FluidDropdown - error icons are not aligned correctly

Changelog

Changed

• Fixed icon alignment by adding styles
• Passing props to show invalidText and warnText

Testing / Reviewing

Error icon should show within the input box

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	b8b2a17
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69451962c1a9c10008546d10
😎 Deploy Preview	https://deploy-preview-21077--v11-carbon-web-components.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 project configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	b8b2a17
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/69451962419c5d0008255734
😎 Deploy Preview	https://deploy-preview-21077--carbon-elements.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 project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	b8b2a17
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69451962204b87000812046f
😎 Deploy Preview	https://deploy-preview-21077--v11-carbon-react.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 project configuration.

[suniltc-ibm]

I have read the DCO document and I hereby sign the DCO.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.15%. Comparing base (259602d) to head (b8b2a17).

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21077      +/-   ##
==========================================
+ Coverage   85.11%   85.15%   +0.04%     
==========================================
  Files         532      532              
  Lines       40989    40991       +2     
  Branches     6296     6354      +58     
==========================================
+ Hits        34886    34907      +21     
+ Misses       5943     5923      -20     
- Partials      160      161       +1     

Flag	Coverage Δ
main-packages	85.73% <100.00%> (+<0.01%)	⬆️
web-components	84.83% <ø> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[heloiselui]

@suniltc-ibm thank you very much for your contribution. We had a discussion earlier about this issue happening in Fluid and requested a design spec for the invalid/warning state. We now have an open issue for this #21114

In any case, looking at what we have available in Figma and comparing it with your contribution, I noticed that the icon positioning is not totally correct.

React Deploy Preview:

Figma:

I compared it with the Fluid ComboBox, for example, and noticed that when we remove the invalidText, the positioning issue mentioned occurs:

Without invalidText prop:

With invalidText prop looks great:

Before we continue here, I’d like to check with our design team.

@alina-jacob / @laurenmrice do you think we could keep it as it is in Figma for now and just add "Error message goes here" as the default for invalidText? If needed, we can open another issue once the design spec is available and address it on the dev side. Or, we can wait for your feedback and I can help @suniltc-ibm with the implementation.

[laurenmrice]

@heloiselui I have an open issue here for this that will be worked on this sprint. We are going to detail out the design specs for fluid inputs in these cases.

[heloiselui]

Hi @suniltc-ibm, now that we have the design spec, we can move forward with the updates. Let me know if you have any questions or need any help.

#21114

[suniltc-ibm]

Showing invalidText and warnText and fixed error and warn icon position.

[heloiselui]

Looks pretty good to me, thanks @suniltc-ibm! 🚀

[alina-jacob]

LGTM, thanks for contributing! @suniltc-ibm 🚀

Just editing the description to inform that your PR closes this issue as well. Its the same logic, just for warning prop / state. #21186

[emyarod]

looks good to me!