[EuiSuperSelect] Placeholder support for EuiSuperSelect / EuiSuperSelectControl

[jtodd3]

Summary

Currently, there is no way to define a placeholder for the EuiSuperSelect component. If you pass in a placeholder value it gets placed in the rest param. Then, the value of rest is spread onto the EuiSuperSelectControl.

Fix

Add a named prop to EuiSuperSelect for the placeholder. If there is no selected value on the component and a placeholder is provided put the placeholder text inside the button with the subdued text color.

Replace lines 156-166 of super_select_control.tsx

 <button
    type="button"
    className={classes}
    aria-haspopup="listbox"
    disabled={disabled || readOnly}
    // @ts-ignore Using as a selector only for mixin use
    readOnly={readOnly}
    {...rest}
>
    {(!selectedValue && placeholder) && <Text color="subdued">{placeholder}</Text>} // whatever size prop you need to use
    {selectedValue}
</button>

[jtodd3]

I'm trying to push a branch to create a PR for this issue, but it won't let me.

[daveyholler]

@evangelia-mitsopoulou We'll get this reviewed and prioritized. In the event we can't get to is as quickly as your team needs, we always welcome contributions from others. Please feel free to review the contributing guidelines and open a PR if you'd like.

[evangelia-mitsopoulou]

@daveyholler thank you for reviewing it. We are under a tight deadline and we decided with my team @elastic/control-plane-iam to proceed for now with our current design. It will be needed from April onwards. Do you think you could find the capacity by that time? If not, we can contribute ourselves.

[cee-chen]

@evangelia-mitsopoulou EuiSuperSelect placeholder functionality should be in tomorrow's EUI release!