react-magma icon indicating copy to clipboard operation
react-magma copied to clipboard

Support "Additional Children (e.g. Help Link)" for Select components

Open noahwebs opened this issue 2 years ago • 6 comments

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.

noahwebs avatar Jul 19 '23 17:07 noahwebs

Include native select as well as custom

jwad03 avatar Oct 06 '23 15:10 jwad03

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

chris-cedrone-cengage avatar Nov 14 '23 17:11 chris-cedrone-cengage

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.

Image

  • On the Native Select option, there's a Help Icon oddly hanging out below the input.

Image

orion-cengage avatar Nov 30 '23 14:11 orion-cengage

I QA'd this again and I think everything is looking good.

orion-cengage avatar Dec 04 '23 14:12 orion-cengage

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

silvalaura avatar Dec 04 '23 19:12 silvalaura

Testing Notes:

  • Confirmed CodeSandbox works without broken paths or errors for both Select and NativeSelect

silvalaura avatar Dec 07 '23 16:12 silvalaura