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

[suniltc-ibm]

Closes #21066

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

Changelog

Changed

• Fixed icon alignment by adding styles

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	ba9b5f0
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/693281fc34eefc0008d078b4
😎 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	ba9b5f0
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/693281fcf19aff000817c753
😎 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!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ba9b5f0
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/693281fcd830950008e78df7
😎 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 92.60%. Comparing base (3d7b9d1) to head (88ae6a0).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #21077   +/-   ##
=======================================
  Coverage   92.60%   92.60%           
=======================================
  Files         515      515           
  Lines       38225    38225           
  Branches     5807     5807           
=======================================
  Hits        35397    35397           
  Misses       2679     2679           
  Partials      149      149           

Flag	Coverage Δ
main-packages	85.61% <ø> (ø)
web-components	96.87% <ø> (ø)

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.