Fix invalid and warn states across compnents by riddhybansal · Pull Request #21857 · carbon-design-system/carbon

riddhybansal · 2026-03-18T11:46:30Z

Closes #19983

Fixed invalid and warn states for inline dropdown and multiselect for both react and webcomponents.
Fix some incosistency of error and warn text for some components.

Changelog

Changed

Fixed invalid and warn states for inline dropdown and multiselect for both react and webcomponents.
Fix some incosistency of error and warn text for some components.

Testing / Reviewing

Go through the below components and test invalid states, it should look like design spec for both default and inline states in both web-components and react.

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

netlify · 2026-03-18T11:51:05Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`562bbab`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69ba909a3bff3b00073874c4
😎 Deploy Preview	https://deploy-preview-21857--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.

netlify · 2026-03-18T11:51:10Z

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

Name	Link
🔨 Latest commit	`562bbab`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69ba909aaff94d00072e911a
😎 Deploy Preview	https://deploy-preview-21857--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.

codecov · 2026-03-18T11:53:07Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.90%. Comparing base (54509f5) to head (0469d1c).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21857      +/-   ##
==========================================
- Coverage   94.93%   94.90%   -0.03%     
==========================================
  Files         541      541              
  Lines       45256    45256              
  Branches     6393     6336      -57     
==========================================
- Hits        42963    42952      -11     
- Misses       2161     2172      +11     
  Partials      132      132

Flag	Coverage Δ
main-packages	`89.16% <100.00%> (ø)`
web-components	`97.70% <ø> (ø)`

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.

netlify · 2026-03-18T11:54:08Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`0469d1c`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69de827e70f9900008c4f0ea
😎 Deploy Preview	https://deploy-preview-21857--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.

netlify · 2026-03-18T11:54:16Z

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

Name	Link
🔨 Latest commit	`0469d1c`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69de827eaca8f70008a6c96b
😎 Deploy Preview	https://deploy-preview-21857--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.

devadula-nandan

can you fix the pr title to address invalid and warn states which appears to be the scope of this pr
below components are missing invalid and warn states

dropdown
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-dropdown--with-toggletip-label
the controls aren't available for this story yet to test it. which will be covered in #20909

combobox
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--controlled&args=invalid:!false;warn:!false
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--experimental-auto-align&args=invalid:!false;warn:!false
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--with-ai-label&args=invalid:!false;warn:!false
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--with-layer&args=invalid:!false;warn:!false

timepicker
the warning prop is present instead of warn. should we look into this later for consistency?
controls not enabled, maybe not this scope
https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-timepicker--with-layer

riddhybansal · 2026-03-30T06:25:10Z

can you fix the pr title to address invalid and warn states which appears to be the scope of this pr below components are missing invalid and warn states

dropdown https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-dropdown--with-toggletip-label the controls aren't available for this story yet to test it. which will be covered in #20909

combobox https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--controlled&args=invalid:!false;warn:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--experimental-auto-align&args=invalid:!false;warn:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--with-ai-label&args=invalid:!false;warn:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-combobox--with-layer&args=invalid:!false;warn:!false

multi select https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--filterable&args=invalid:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--filterable-with-ai-label&args=invalid:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--filterable-with-ai-label&args=invalid:!false;warn:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--filterable-with-layer&args=invalid:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--filterable-with-select-all&args=invalid:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--select-all-with-dynamic-items&args=hideLabel:!false;invalid:!false https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect--with-toggletip-label&args=invalid:!false;warn:!false in below both says whoopsie! https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-multiselect-feature-flag--floating-styles&args=hideLabel:!true https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable&args=invalid:!true https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-select-all&args=invalid:!true;warn:!true https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-ai-label&args=warn:!true https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-layer

timepicker the warning prop is present instead of warn. should we look into this later for consistency? controls not enabled, maybe not this scope https://deploy-preview-21857--v11-carbon-react.netlify.app/?path=/story/components-timepicker--with-layer

Hi there changes has been addressed , changing prop name is out of scope of this pr as it would be a breaking change, and we do have another issue for adding controls to dropdown.

devadula-nandan

below stories still show whoopsie!
https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable&args=invalid:!true;warn:!true
https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-select-all&args=invalid:!true;warn:!true
https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-ai-label&args=invalid:!true;warn:!true
https://deploy-preview-21857--v11-carbon-web-components.netlify.app/?path=/story/components-multi-select--filterable-with-layer&args=invalid:!true;warn:!true

another issue i noticed particularly in all multi-select web component stories
when both states are enabled. the invalid state must take precedence over warn state.
it does for text, but not the color which looks inconsistent. this may come under the scope of this pr.

Screen.Recording.2026-03-30.at.12.48.07.PM.mov

devadula-nandan

one last issue. there seems to be some regression with spacing in ai-label story with warn state. not sure if it was a side effect of these changes.

Screen.Recording.2026-04-08.at.4.05.43.PM.mov

rest looks good to me. after fixing the regression.

riddhybansal · 2026-04-08T14:00:25Z

one last issue. there seems to be some regression with spacing in ai-label story with warn state. not sure if it was a side effect of these changes.

Screen.Recording.2026-04-08.at.4.05.43.PM.mov
rest looks good to me. after fixing the regression.

Addressed

) * fix: invalid states for default and inline states * fix: invalid states across webcomponents * fix: stories * fix: styles * fix: regressions --------- Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

riddhybansal added 2 commits March 18, 2026 16:30

fix: invalid states for default and inline states

efbf48f

fix: invalid states across webcomponents

562bbab

riddhybansal requested a review from a team as a code owner March 18, 2026 11:46

riddhybansal requested review from devadula-nandan and heloiselui March 18, 2026 11:46

Merge branch 'main' into invalid_states_across_compnents

915cc22

riddhybansal deployed to @carbon/react storybook preview March 18, 2026 11:57 — with GitHub Actions View deployment

Merge branch 'main' into invalid_states_across_compnents

1b98757

heloiselui deployed to @carbon/react storybook preview March 23, 2026 10:47 — with GitHub Actions View deployment

devadula-nandan requested changes Mar 25, 2026

View reviewed changes

fix: stories

dde6c8a

riddhybansal requested a review from devadula-nandan March 30, 2026 06:25

Merge branch 'main' into invalid_states_across_compnents

705eb40

devadula-nandan changed the title ~~Fix invalid states across compnents~~ Fix invalid and warn states across compnents Mar 30, 2026

riddhybansal deployed to @carbon/react storybook preview March 30, 2026 06:39 — with GitHub Actions View deployment

devadula-nandan requested changes Mar 30, 2026

View reviewed changes

fix: styles

c9468ca

riddhybansal requested a review from devadula-nandan April 7, 2026 13:13

riddhybansal deployed to @carbon/react storybook preview April 7, 2026 13:23 — with GitHub Actions View deployment

riddhybansal deployed to @carbon/react storybook preview April 7, 2026 13:57 — with GitHub Actions View deployment

devadula-nandan approved these changes Apr 8, 2026

View reviewed changes

fix: regressions

f368837

riddhybansal force-pushed the invalid_states_across_compnents branch from 19100c7 to f368837 Compare April 8, 2026 13:59

riddhybansal deployed to @carbon/react storybook preview April 8, 2026 14:11 — with GitHub Actions View deployment

sangeethababu9223 approved these changes Apr 8, 2026

View reviewed changes

sangeethababu9223 added the status: ready to merge 🎉 label Apr 8, 2026

sangeethababu9223 enabled auto-merge April 8, 2026 14:21

sangeethababu9223 added this pull request to the merge queue Apr 8, 2026

github-merge-queue Bot removed this pull request from the merge queue due to no response for status checks Apr 8, 2026

Merge branch 'main' into invalid_states_across_compnents

496b46d

riddhybansal deployed to @carbon/react storybook preview April 9, 2026 11:27 — with GitHub Actions View deployment

Merge branch 'main' into invalid_states_across_compnents

9d81ef2

heloiselui deployed to @carbon/react storybook preview April 14, 2026 09:33 — with GitHub Actions View deployment

Merge branch 'main' into invalid_states_across_compnents

0469d1c

heloiselui enabled auto-merge April 14, 2026 18:08

heloiselui deployed to @carbon/react storybook preview April 14, 2026 18:20 — with GitHub Actions View deployment

heloiselui added this pull request to the merge queue Apr 14, 2026

Merged via the queue into carbon-design-system:main with commit f140293 Apr 14, 2026
39 checks passed

This was referenced Apr 22, 2026

feat(text-input): new xs size #22038

Merged

feat: xs select component #22036

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix invalid and warn states across compnents#21857

Fix invalid and warn states across compnents#21857
heloiselui merged 11 commits into
carbon-design-system:mainfrom
riddhybansal:invalid_states_across_compnents

riddhybansal commented Mar 18, 2026 •

edited by devadula-nandan

Loading

Uh oh!

netlify Bot commented Mar 18, 2026

Uh oh!

netlify Bot commented Mar 18, 2026

Uh oh!

codecov Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

devadula-nandan left a comment

Uh oh!

riddhybansal commented Mar 30, 2026

Uh oh!

devadula-nandan left a comment •

edited

Loading

Uh oh!

devadula-nandan left a comment

Uh oh!

riddhybansal commented Apr 8, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

riddhybansal commented Mar 18, 2026 • edited by devadula-nandan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Mar 18, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Mar 18, 2026

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

Uh oh!

codecov Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

netlify Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

devadula-nandan left a comment

Choose a reason for hiding this comment

Uh oh!

riddhybansal commented Mar 30, 2026

Uh oh!

devadula-nandan left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devadula-nandan left a comment

Choose a reason for hiding this comment

Uh oh!

riddhybansal commented Apr 8, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

riddhybansal commented Mar 18, 2026 •

edited by devadula-nandan

Loading

codecov Bot commented Mar 18, 2026 •

edited

Loading

netlify Bot commented Mar 18, 2026 •

edited

Loading

netlify Bot commented Mar 18, 2026 •

edited

Loading

devadula-nandan left a comment •

edited

Loading