Adding [x]Props to every component

[gretanausedaite]

The goal is to allow adding a custom className (or data attribute) to every single dom node. For example: it should be possible to add a custom class to Button text, Checkbox wrapper, etc.

To do:

• Go through each component and check if you can customize every part of it. Eg. Checkbox wrapper, checkbox, and checkbox label needs to be customizable.
• For every non-customizable element in every component, add a new prop to allow that customisation where needed. Name it like [x]Props, e.g. wrapperProps in Checkbox.

Example usage from a consumer-perspective:

<Checkbox
  label='My checkbox'
  className='my-checkbox-input'
  wrapperProps={{ className: 'my-checkbox-wrapper' }}
  labelProps={{ className: 'my-checkbox-text' }}
/>

Status

High Priority:

• ComboBox: ComboBox: Add customisation props #1567
• DatePicker: Adding Props to DatePicker Component #1466
• ExpandableBlock: Expandable Block composition #1354
• Input: Rebuilding input container #1355
• RadioTile: Improvements to RadioTile DOM Node customization #1409
• Textarea: Rebuilding input container #1355

Mid Priority:

• Buttons: Improving Button DOM Node customization #1435
• ColorPicker: Added [x]Props for ColorPicker component #2211
• Checkbox: Adding props to Checkbox component #1371
• Fieldset: Nothing to change
• FileUpload: Adding Props to FileUpload Component #1440
• InputGroup Rebuilding input container #1355
• NonIdealState: Adding Props to NonIdealState Component #1407
• Slider: Adding Props to Slider Component #1436
• Stepper: Adding Props to Stepper Component #1430
• Surface Is only one element / has subcomponents.
• Table: Table DOM Node customization  #1437
• Tabs: Tabs: composition #1548
• Tree: Add [x]Props to Tree component  #2022
• ToggleSwitch: Add [x]Props to ToggleSwitch #2010

Low Priority:

• Avatar: Is only one element.
• BlockQuote: Not needed / footer has nothing special.
• Carousel: Already has subcomponents.
• Input: Is only one element.
• Progress Indicator: Adding [x]Props to ProgressIndicators  #1442
• Radio: Improvements to Radio customization  #1450
• RadioTileGroup: Added tileContainerProps to RadioTileGroup #2299
• Search Box: Already has subcomponents.
• SideNavigation: Side Navigation customization  #1458
• Toast: Customisation effort: toast #1510
• Tag: allow tags to be used as buttons #1815, use LinkAction inside Tag #1824
• Modal: add new props for customizing internal Modal elements #1821