Expose the AutoComplete Option Label

[AndreasPresthammer]

Is your feature request related to a problem? Please describe.

My primary goal to disable certain options, and also apply a Popover (https://storybook.eds.equinor.com/?path=/docs/data-display-popover--docs) to the disabled elements. We want the Popover to explain to the end user why the option is disabled.

The disabling part works fine using the AutoComplete.optionDisabled-prop. On the other hand, to apply the Popover on the disabled options we were thinking to make use of the AutoComplete.optionComponent-prop to provide a custom option that uses the Popover. Naively this works fine, but the problem is that the default option Label component has a bunch of styling that we would really want to retain on our slighty modified Option-component. The mentioned Label is not exposed, so we cannot wrap it in our optionComponent-code.

Describe the solution you'd like

We would like the Autocomplete Option Label component (https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Autocomplete/Option.tsx#L44) to be exported, such that we can wrap it in our Popover, but still retain the default Autocomplete styling (that you maintain).

Describe alternatives you've considered

Alternatively you could consider providing other ways we can achieve our described goals of explaining to the end user why an option is disabled.

An alternative approach for us to get the behavior we want is also to duplicate the code here https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Autocomplete/Option.tsx#L44 over into our own app, but we would rather try to avoid that.

[AndreasPresthammer]

Any feedback on this?

[oddvernes]

I can perhaps take a look at this soon, we have been a bit busy lately 😅