Support "Additional Children (e.g. Help Link)" for Select components
Is your feature request related to a problem? Please describe. Input components support additional children such as help links in the case that the field in question needs further explanation that isn't appropriate to the Helper Message. It would be helpful if Select components also supported this feature so that Input and Select elements on a form could maintain feature parity.
Describe the solution you'd like The Select component would implement "child elements" in the same way that Input components do.
Describe alternatives you've considered
- Rolling my own Select component to match the Input component style. This could cause feature drift and defeats the purpose of using a component library.
- Abusing the "labelStyle" property to somehow have the label be super wide with left floated text and right floated help icon. This feels hacky and I don't even know if it could work.
Additional context N/A unless more is asked of me.
Include native select as well as custom
This feature will allow a child element to display above a Select and NativeSelect on the right side (default), or alongside the select to the right depending on labelPosition.
- when label position is top, additional children will be top right
- when label position is left, additional children will be to the right of the select
- when label is visually hidden, additional children will be to the right of the select
Feedback:
- On the Select example, the label and help icon are too close to the input, and are inconsistent with the Native Select and regular Input.
- On the Native Select option, there's a Help Icon oddly hanging out below the input.
I QA'd this again and I think everything is looking good.
Testing Notes:
https://codesandbox.io/p/sandbox/select-additionalcontent-test-xtkmfk?file=%2Fexample.tsx%3A2%2C9
- CodeSandbox is broken: import paths are broken for both Select and NativeSelect ❌
- CodeSandbox shows error with NativeSelect (missing fieldId)❌
- Works with and without Tooltip ✅
- Behaves as expected with top label position ✅
- Behaves as expected with left label position ✅
- Behaves as expected with hidden label ✅
- Looks fine when other components are thrown inside
additionalContent✅
Testing Notes:
- Confirmed CodeSandbox works without broken paths or errors for both Select and NativeSelect