[Read-only Inputs]: Epic

[sstrubberg]

User story

As an IBM Maker:

I need to: build forms that allow Read-only component content to be parsed

so that: my users can more semantically and accessibly mark-up their forms.

Additional information

• Read only form controls #2177
• Read-only textinput has the work done. Use it as a reference. Make sure the visuals line up.

Acceptance Criteria

Update website docs

Beta Give feedback

1. docs: read-only states pattern carbon-website#3248
   role: design ✏️ type: docs 📖 type: enhancement 💡 +3
   
2. [Read-only inputs]: Checkbox website docs carbon-website#3263
   adopter: DSAG adopter: PAL component: checkbox proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
3. [Read-only inputs]: Datepicker website docs carbon-website#3264
   adopter: DSAG adopter: PAL component: date-picker proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
4. [Read-only inputs]: Timepicker website docs carbon-website#3265
   adopter: DSAG adopter: PAL component: time-picker proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
5. [Read-only inputs]: Dropdown website docs carbon-website#3266
   adopter: DSAG adopter: PAL component: dropdown proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
6. [Read-only inputs]: NumberInput website docs carbon-website#3267
   adopter: DSAG adopter: PAL component: number-input proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
7. [Read-only inputs]: RadioButton website docs carbon-website#3268
   adopter: DSAG adopter: PAL component: radio-button proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
8. [Read-only inputs]: Slider website docs carbon-website#3269
   adopter: DSAG adopter: PAL component: slider proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
   
9. [Read-only inputs]: TextArea website docs carbon-website#3262
   adopter: DSAG adopter: PAL component: text-area proposal: accepted role: design ✏️ type: enhancement 💡 version: 11 +7
   
10. [Read-only inputs]: TextInput website docs carbon-website#3270
    adopter: DSAG adopter: PAL component: text-area proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
    
11. [Read only inputs]: Toggle website docs carbon-website#3271
    adopter: DSAG adopter: PAL component: toggle proposal: accepted role: design ✏️ status: needs triage 🕵️‍♀️ type: docs 📖 version: 11 +8
    
12. [Read-only inputs]: Select website docs carbon-website#3272
    adopter: DSAG adopter: PAL component: select proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
    
13. [Read-only inputs]: Combobox website docs carbon-website#3273
    adopter: DSAG adopter: PAL component: combobox proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
    
14. [Read-only inputs]: Multi-select website docs carbon-website#3274
    adopter: DSAG adopter: PAL component: multiselect proposal: accepted role: design ✏️ type: docs 📖 version: 11 +7
    

Update design kits

Beta Give feedback

1. [Read-only inputs]: update figma design kit carbon-design-kit#601
   adopter: DSAG adopter: PAL kit: figma role: design ✏️ type: enhancement 💡 version: 11 +6
   
2. [Read-only inputs]: review with figma guild and publish carbon-design-kit#632
   kit: figma role: design ✏️ +2
   

Primary implementation

Beta Give feedback

1. Read-only Inputs: Checkbox Implementation #12243
   adopter: DSAG adopter: PAL component: checkbox needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
2. [Read-only Inputs]: Datepicker Implementation #12401
   adopter: DSAG adopter: PAL component: date-picker needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
3. [Read-only inputs]: Timepicker implementation #12409
   adopter: DSAG adopter: PAL component: time-picker needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
4. [Read-only inputs]: Dropdown implementation #12432
   adopter: DSAG adopter: external component: dropdown needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
5. [Read-only inputs]: NumberInput implementation #12613
   adopter: DSAG adopter: PAL component: number-input needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
6. [Read-only inputs]: RadioButton implementation #12419
   adopter: DSAG adopter: PAL component: radio-button needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
7. [Read-only inputs]: Slider implementation #12415
   adopter: DSAG adopter: PAL component: slider needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
8. fix: remove icon from readonly text input #12382
   status: ready to merge 🎉 +1
9. [Read-only inputs]: Toggle implementation #12407
   adopter: DSAG adopter: PAL component: toggle needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
10. [Read-only inputs]: Select implementation #12423
    adopter: DSAG adopter: PAL component: select needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
11. [Read-only inputs]: Combobox implementation #12451
    adopter: DSAG adopter: PAL component: combobox needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
12. [Read-only inputs]: Multi-select implementation #12438
    adopter: DSAG adopter: PAL component: multiselect needs: community contribution package: @carbon/react proposal: accepted type: enhancement 💡 version: 11 +8
13. feat: readonly text area #12388
    status: ready to merge 🎉 +1
14. [Read-only Inputs]: Update border-bottom color #13032
    role: dev 🤖 type: enhancement 💡 version: 11 +3
    

[lee-chase]

Need to consider the various dropdown flavours (not a normal form component) and Select.

[lee-chase]

OK. So straw men are all created @sstrubberg

@tay1orjones the only outstanding issue you raised (unless I've missed some) is the property name readOnly. Before I started this work the TextInput and NumberInput components already had a property readOnly. I replicated this for consistency, however, like you I would prefer readonly as we are adhering to the pattern of this standard attribute. I could update all to have a readonly property, mark readOnly as deprecated in TextInput and NumberInput while treating it as readonly if a readonly property is not supplied.

@aagonzales has raised a question regarding cursors. Ordinarily, an 'input' does not change the text cursor when read-only. We have extended the concept beyond textual input boxes to checkboxes, radio buttons and a number of other scenarios which have buttons displayed but disabled. I think this requires a sync up with the read-only pattern designers to discuss. I'll suggest they organise something.