Pass a dash component to label property of dcc.Tab

[jwcomp4]

Why is this feature important?

Currently unable to pass a dash component to the label property of a dcc.Tab. Being able to do so would enable users to have images in the tab itself and then target that image with a tooltip or other functionality via a callback.

Describe the acceptance criteria

Being able to pass a dash component to the label property of dcc.Tab

End result could produce something like this:

Additional context

Was able to create a workaround for this by using a mix of Dash Mantine Components tab hierarchy, Dash Mantine components Avatar and Dash Bootstrap Components Tooltip.

[alexcjohnson]

Thanks @jwcomp4 - FYI I moved this to the main Dash repo. The core component suites (dash-core-components, dash-html-components, and dash-table) now live in this repo so we don't use the others anymore.

@T4rk1n maybe as simple as changing dcc.Tab.label to PropTypes.node and including in a test?

[T4rk1n]

Unfortunately, changing the dcc.Tab.label property to component is not enough as it's used in another way by the Tabs component. I remember I didn't have success in changing it.

[alexcjohnson]

Good to know. We'll leave it open then until someone gets a chance to dig in further. This part:

https://github.com/plotly/dash/blob/5611628315acc4c92f8712c3281a950bf4c3628c/components/dash-core-components/src/components/Tabs.react.js#L46-L48

Makes it look like there may already be a hacky way to do this (label=[html.Div(children=[...])] perhaps? I haven't tried but @jwcomp4 perhaps you want to explore this. Since label is defined as a string though you'd need app.run(dev_tools_props_check=True)), which I guess we will want to preserve, but I'm sure we can do better than this.