Fluid inputs

[aagonzales]

This issue is to provide a fluid variations for input fields.

• Components will be experimental at the onset, moved to stable once all inputs, documentation, etc is complete
• Each input will be worked on individually and held to the same standard of completion:
  • Website must be updated to provide pattern and component "style tab" documentation
  • Updated design tooling must be provided
  • Implementation must be complete, including tests, stories, and docs.
• TextInput will be the first to lay groundwork, subsequent inputs will build upon the intial work started.
  • The website pattern will be built up over time
  • A cohesive Form example showing an entire form of fluid inputs will be built up over time

Tasks

Beta Give feedback

1. Fluid inputs: update design specs to v11 #11443
   epic planning: umbrella proposal: accepted role: design ✏️ role: visual 🎨 type: enhancement 💡 +6
   
2. Fluid inputs: remaining issues with states #11728
   role: design ✏️ +1
   
3. Fluid inputs: TextInput #11785
   epic planning: umbrella role: design ✏️ role: dev 🤖 +4
4. Fluid inputs: Label content overflow #12082
   role: dev 🤖 +1
   
5. Deprecate isFluid prop #12003
   +0
   
6. Fluid inputs: FluidTextArea #12019
   epic planning: umbrella +2
7. Fluid inputs: FluidDropdown #12107
   package: @carbon/react role: design ✏️ role: dev 🤖 type: enhancement 💡 +4
   
8. Fluid inputs: FluidComboBox #12120
   package: @carbon/react role: design ✏️ role: dev 🤖 type: enhancement 💡 +4
   
9. Fluid inputs: FluidMultiSelect #12124
   package: @carbon/react role: design ✏️ role: dev 🤖 type: enhancement 💡 +4
   
10. Fluid inputs: FluidDatePicker #12125
    package: @carbon/react planning: umbrella role: design ✏️ role: dev 🤖 type: enhancement 💡 +5
11. Fluid inputs: FluidNumberInput #12126
    4 of 4
    package: @carbon/react planning: umbrella role: design ✏️ role: dev 🤖 type: enhancement 💡 +5
12. Fluid inputs: FluidSelect #12127
    4 of 4
    package: @carbon/react planning: umbrella role: design ✏️ role: dev 🤖 type: enhancement 💡 +5
13. Fluid inputs: FluidSearch #12440
    4 of 4
    package: react planning: umbrella role: design ✏️ role: dev 🤖 type: enhancement 💡 +5
14. Fluid inputs: FluidForm #12453
    4 of 4
    planning: umbrella +1
15. Fluid inputs: FluidTimePicker #12475
    5 of 5
    planning: umbrella +1
16. Fluid inputs: Evaluate indexing strategy for platform #12025
    +0
    
17. [Sketch] Add "Fluid inputs" carbon-design-kit#558
    11 of 11
    kit: sketch planning: umbrella role: design ✏️ type: enhancement 💡 version: 11 +5
    
18. Fluid inputs: add style tests to ensure fluid mixins exist #12817
    package: styles role: dev 🤖 type: enhancement 💡 version: 11 +4
    
19. Fluid inputs: Add pattern carbon-website#3123
    5 of 5
    planning: umbrella role: design ✏️ +2
    
20. [XD] Add "Fluid inputs" carbon-design-kit#559
    kit: adobe xd role: design ✏️ +2

End game

Beta Give feedback

1. Final naming discussion + create issues for any changes that are needed. docs(fluid): remove "fixed" term carbon-website#3391
2. Publish website branch
3. Slack announcement
4. Publish Figma branches

---

Click here to view the original (now outdated) spec

Fluid Inputs

Add fluid variations to input fields.

• Text input
• Text area
• Dropdown
• ComboBox
• Multi-select
• Date picker
• Number input
• Select

Text input

Text area

Dropdown

ComboBox

MultiSelect

Date Picker

Number input

Select

No helper text