[MD]UI improvement to remove the underline of default label for data source options

[zhongnansu]

If hovering over the default data source option, there's an underline of text

We want to remove that, so it will look like this

[zhongnansu]

did some research but can’t find an easy way to remove the underline of Default label by CSS override. The underline is added with text-decoration: underline , according to text-decroration spec, it’s drawn across descendant text elements, a child element can’t remove the decoration. I tried some hacks from stackoverflow, none of them works.

But it’s still possible since EuiSelectableOption has a prop called append , that we can pass in the default label and it will be rendered at the end of each option. We’ll need to do following refactor:

• Refactor multi-selectable, and data source selector to use EuiSelectable same as other pickers, instead of EuiComboBox or EuiFilterSelectItem
• Replace the DataSourceOption component we created with just EuiSelectableOption , and have to check all UX requirement of options can still be met

[BionIT]

@zhongnansu Are we gonna make the change for 2.15 or target for 2.16?

[zhongnansu]

@zhongnansu Are we gonna make the change for 2.15 or target for 2.16?

This involves refactor of multi-selectable and selector to change base EUI components, given my current assigned tasks, I don't think I have bandwidth to finish this by 06/10. I'll suggest targeting 2.16.0.

[zhongnansu]

Need to prioritize other tasks, moving this to 2.17 for now