fix(form): ai label revert error warning divider styles

[alisonjoseph]

Closes #18116

Fix styling bugs present in number input, fluid number input, text area and fluid select when error/warning states are combined with the AiLabel and AiLabel revert.

Changelog

• fix alignment of divider in NumberInput
• remove extra divider FluidNumberInput
• remove extra divider in FluidSelect
• fix overlapping error icon and revert button on TextArea

Testing / Reviewing

Check number input, fluid number input, text area and fluid select components:

Go to the Form > With AI Label story
Check invalid state
Check warning state
Check revertActive
Check revertActive with invalid
Check revertActive with warning

[netlify]

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

Name	Link
🔨 Latest commit	a78ce42
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/679141cb654a5b00084ae598
😎 Deploy Preview	https://deploy-preview-18405--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 site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	a78ce42
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/679141cb905995000888123e
😎 Deploy Preview	https://deploy-preview-18405--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 site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	a78ce42
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/679141cb6af9070008e5aafd
😎 Deploy Preview	https://deploy-preview-18405--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 site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.17%. Comparing base (f53c551) to head (a78ce42).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18405   +/-   ##
=======================================
  Coverage   84.17%   84.17%           
=======================================
  Files         408      408           
  Lines       14435    14435           
  Branches     4640     4690   +50     
=======================================
  Hits        12150    12150           
  Misses       2121     2121           
  Partials      164      164           

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

[emyarod]

looks good to me!

[laurenmrice]

Let me know if any of this should be put in a separate issue. I already am making a separate issue for other things in general, but can add some of these as well if its not related.

---

Default style

Invalid and Warning: The following components need to have a divider between the invalid and AI label icons. The select component is currently doing it right:

• Dropdown
• Multiselect
• Filterable multiselect
• Combobox

---

Fluid style

Invalid: When there is an invalid state present, the stacking of these inputs should not create a double border (2px stroke) between the inputs and it should still be 1px. This is appearing with the stacking of date picker, number input, text input, and text area.

Invalid: I also see that the invalid border is not flush or straight on the left and right sides for all of the components that are stacking, and it’s creating jagged edges. I am thinking there might be a shift happening once the invalid prop is set to true.

Invalid and Warning: The AI gradient on these inputs in the invalid and warning state is supposed to come from the bottom of the container where the error/warning message is, like this image below. Even though this is related to the invalid and warning states, I would assume this change would actually need to be made in the individual experimental components first and not in form?

Invalid and Warning: There are some padding problems with either the invalid/warning icons or maybe it’s actually the chevron icon in the following components. There should be 16px to the right of the invalid/warning/chevron icons to create better vertical alignment:

• Text area
• Dropdown
• Multiselect
• Combobox
• Select

Invalid and Warning: For Combobox, if you choose an option from the menu, the top field has some bugs with the close icon and a divider overlapping with the AI label.