fix(DatePicker): fixed disabled state for DatePicker by suniltc-ibm · Pull Request #21848 · carbon-design-system/carbon

suniltc-ibm · 2026-03-17T10:38:47Z

DatePicker: disabled state ignored when readOnly is also true

Changelog

Changed

Added CSS for Disabled state to take precedence over readonly
Updated disabled props
Covered test cases
Updated all the components to take disabled over readonly state

Testing / Reviewing

Navigate to Date Picker
Click on Default story
Set Disabled control to true
Set Read Only to true
Disabled overwrites Read Only

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-17T10:43:25Z

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

Name	Link
🔨 Latest commit	`39b6a31`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a6aea6e77ab6b0008408d71
😎 Deploy Preview	https://deploy-preview-21848--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-03-17T10:43:40Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`39b6a31`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6a6aea6e02c95f0008fae6bc
😎 Deploy Preview	https://deploy-preview-21848--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

codecov · 2026-03-17T10:45:43Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.26%. Comparing base (0a75905) to head (39b6a31).

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21848      +/-   ##
==========================================
+ Coverage   89.62%   90.26%   +0.64%     
==========================================
  Files         582      265     -317     
  Lines       53317    40045   -13272     
  Branches     7312     2210    -5102     
==========================================
- Hits        47784    36148   -11636     
+ Misses       5396     3879    -1517     
+ Partials      137       18     -119

Flag	Coverage Δ
main-packages	`?`
web-components	`90.26% <100.00%> (+<0.01%)`	⬆️

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

☔ View full report in Codecov by Harness.
📢 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.

adamalston

Could you add testing?

suniltc-ibm · 2026-03-25T14:21:01Z

@adamalston Updated code and covered test. Please check.

adamalston · 2026-03-25T17:42:43Z

  const prefix = usePrefix();
  const normalizedProps: NormalizedInputProps = {
-    disabled: !readOnly && disabled,
+    disabled: disabled,


The useNormalizedInputProps hook is used in 11 components. Should this change in precedence be limited to DatePickerInput, or should it also be applied to other consumers of this hook, with corresponding updates to their styles and tests? With the current code, it appears that the TextInput, Select, Dropdown, and the TimePicker input will all render in a read-only state when both props are set to true.

It's applied to all the components. It fixes the same issue in other components as well.

@adamalston Can you please review it again

Sure. In the future, re-requesting a review is the most effective way to ensure a pull request appears in my queue.

Test coverage for this change was added only for DatePicker. Could you also add coverage for the other affected components?

heloiselui · 2026-05-06T14:02:30Z

Hi @suniltc-ibm , thanks for contributing! Could you also add coverage for the other affected components? There are also some merge conflicts that need to be resolved.

Co-authored-by: Adam Alston <aalston9@gmail.com>

netlify · 2026-05-11T05:39:16Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`39b6a31`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a6aea6e7c9a040008a78c9a
😎 Deploy Preview	https://deploy-preview-21848--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

tay1orjones

LGTM once checks pass

tay1orjones · 2026-07-24T19:19:01Z

+    expect(select.hasAttribute('disabled')).to.be.true;
+    expect(select.hasAttribute('readonly')).to.be.false;
+    expect(select.disabled).to.be.true;
+    expect(select.readOnly).to.be.false;


With tests failing, I think this should assert aria-readonly instead?

netlify · 2026-07-25T07:05:54Z

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

Name	Link
🔨 Latest commit	`39b6a31`
🔍 Latest deploy log	https://app.netlify.com/projects/v3-carbon-web-components/deploys/6a6aea6e02c95f0008fae6c2
😎 Deploy Preview	https://deploy-preview-21848--v3-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

netlify · 2026-07-25T07:05:57Z

✅ Deploy Preview for v2-carbon-react ready!

Name	Link
🔨 Latest commit	`39b6a31`
🔍 Latest deploy log	https://app.netlify.com/projects/v2-carbon-react/deploys/6a6aea6e23ebad0008c4b51c
😎 Deploy Preview	https://deploy-preview-21848--v2-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

adamalston · 2026-07-28T23:44:44Z

    const labelClasses = classNames(`${prefix}--label`, {
      [`${prefix}--visually-hidden`]: hideLabel,
      [`${prefix}--label--disabled`]: normalizedProps.disabled,
+      [`${prefix}--label--readonly`]: readOnly,


${prefix}--label--readonly is still applied when disabled is also true, so the label keeps the read-only styling even though the input now treats disabled as higher precedence. Is that correct?

@adamalston Thanks for pointing this out. I didn't notice any issue with it earlier, so I had skipped it. I've now updated the code to include the !disabled guard.

adamalston · 2026-07-28T23:46:27Z

    const labelClasses = classNames(`${prefix}--label`, {
      [`${prefix}--visually-hidden`]: hideLabel,
      [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--label--readonly`]: readOnly,


${prefix}--label--readonly is still applied when disabled and readOnly are both true, which leaves the label in the old mixed state after the input behavior changed. Is that correct?

adamalston · 2026-07-28T23:47:37Z

  const labelClasses = cx(`${prefix}--label`, {
    [`${prefix}--visually-hidden`]: hideLabel,
    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--readonly`]: readOnly,


Same as earlier.

adamalston · 2026-07-28T23:48:11Z

  const className = cx({
    [`${prefix}--label`]: true,
    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--readonly`]: readOnly,


Same as earlier.

adamalston · 2026-07-28T23:48:35Z

    );
    const titleClasses = cx(`${prefix}--label`, {
      [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--label--readonly`]: readOnly,


Same as earlier.

suniltc-ibm requested a review from a team as a code owner March 17, 2026 10:38

suniltc-ibm requested review from emyarod and sangeethababu9223 March 17, 2026 10:38

suniltc-ibm deployed to @carbon/react storybook preview March 17, 2026 10:50 — with GitHub Actions View deployment

suniltc-ibm deployed to @carbon/react storybook preview March 19, 2026 20:50 — with GitHub Actions View deployment

adamalston reviewed Mar 20, 2026

View reviewed changes

Comment thread packages/react/src/components/DatePickerInput/DatePickerInput.tsx Outdated

Comment thread packages/styles/scss/components/date-picker/_date-picker.scss Outdated

suniltc-ibm deployed to @carbon/react storybook preview March 23, 2026 13:26 — with GitHub Actions View deployment

suniltc-ibm deployed to @carbon/react storybook preview March 25, 2026 14:33 — with GitHub Actions View deployment

adamalston reviewed Mar 25, 2026

View reviewed changes

suniltc-ibm deployed to @carbon/react storybook preview March 26, 2026 13:19 — with GitHub Actions View deployment

suniltc-ibm deployed to @carbon/react storybook preview April 2, 2026 10:53 — with GitHub Actions View deployment

suniltc-ibm deployed to @carbon/react storybook preview April 7, 2026 07:51 — with GitHub Actions View deployment

suniltc-ibm deployed to @carbon/react storybook preview April 14, 2026 10:47 — with GitHub Actions View deployment

sangeethababu9223 added the status: merge conflict 🚫 label May 5, 2026

suniltc-ibm and others added 5 commits May 11, 2026 10:45

fix(DatePicker): fixed disabled state for DatePicker

3f24258

fix(DatePicker): using isReadOnly variable

b0365d0

fix(DatePicker): added test case

996b0f0

Update packages/react/src/components/DatePicker/DatePicker-test.js

eee513c

Co-authored-by: Adam Alston <aalston9@gmail.com>

fix(Datepicker): fixed conflicts

ecc786a

suniltc-ibm force-pushed the fix/datepicker-read-only branch from 03ab0dc to ecc786a Compare May 11, 2026 05:35

suniltc-ibm deployed to @carbon/react storybook preview May 11, 2026 05:48 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

7a3d2f4

heloiselui deployed to @carbon/react storybook preview May 11, 2026 08:51 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

5ad5dc4

suniltc-ibm requested a review from adamalston June 2, 2026 10:20

suniltc-ibm deployed to @carbon/react storybook preview June 2, 2026 10:33 — with GitHub Actions View deployment

tay1orjones requested review from tay1orjones and removed request for emyarod June 15, 2026 16:57

adamalston reviewed Jun 20, 2026

View reviewed changes

Comment thread packages/react/src/components/DatePickerInput/DatePickerInput.tsx Outdated

Comment thread packages/react/src/components/DatePicker/DatePicker-test.js Outdated

Comment thread packages/react/src/components/NumberInput/NumberInput.tsx

Merge branch 'carbon-design-system:main' into fix/datepicker-read-only

4d56d03

suniltc-ibm deployed to @carbon/react storybook preview June 29, 2026 05:18 — with GitHub Actions View deployment

fix(DatePicker): addressed review comments

a377c84

suniltc-ibm deployed to @carbon/react storybook preview June 29, 2026 07:24 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

ec697f2

suniltc-ibm deployed to @carbon/react storybook preview July 9, 2026 15:50 — with GitHub Actions View deployment

tay1orjones approved these changes Jul 24, 2026

View reviewed changes

Merge branch 'carbon-design-system:main' into fix/datepicker-read-only

4f872f2

suniltc-ibm deployed to @carbon/react storybook preview July 25, 2026 07:19 — with GitHub Actions View deployment

fix(DatePicker): fixed failing test

3f54880

suniltc-ibm deployed to @carbon/react storybook preview July 25, 2026 08:02 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

603f1a2

suniltc-ibm deployed to @carbon/react storybook preview July 26, 2026 07:02 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

a984e21

suniltc-ibm deployed to @carbon/react storybook preview July 27, 2026 05:25 — with GitHub Actions View deployment

Merge branch 'main' into fix/datepicker-read-only

60e38fc

suniltc-ibm deployed to @carbon/react storybook preview July 27, 2026 12:36 — with GitHub Actions View deployment

suniltc-ibm requested a review from adamalston July 27, 2026 12:59

adamalston reviewed Jul 28, 2026

View reviewed changes

fix(DatePicker): updated label with disabled check

00ed83b

suniltc-ibm requested a review from adamalston July 30, 2026 06:08

Merge branch 'main' into fix/datepicker-read-only

39b6a31

suniltc-ibm deployed to @carbon/react storybook preview July 30, 2026 06:23 — with GitHub Actions View deployment

Uh oh!

Conversation

suniltc-ibm commented Mar 17, 2026 • edited 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 17, 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!

netlify Bot commented Mar 17, 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!

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

Uh oh!

Codecov Report

Uh oh!

adamalston left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

suniltc-ibm commented Mar 25, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

heloiselui commented May 6, 2026

Uh oh!

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

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tay1orjones left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

✅ Deploy Preview for v2-carbon-react ready!

Uh oh!

adamalston Jul 28, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

suniltc-ibm commented Mar 17, 2026 •

edited

Loading

netlify Bot commented Mar 17, 2026 •

edited

Loading

netlify Bot commented Mar 17, 2026 •

edited

Loading

codecov Bot commented Mar 17, 2026 •

edited

Loading

netlify Bot commented May 11, 2026 •

edited

Loading

netlify Bot commented Jul 25, 2026 •

edited

Loading

netlify Bot commented Jul 25, 2026 •

edited

Loading

adamalston Jul 28, 2026 •

edited

Loading