Spread data-* attributes onto elements

[roryg11]

Feature request

Currently not all blueprint components propagate their data attributes to the rendered element and it would be great if they would, but for now we'd like to request data-* attributes on the Tab component.

We will can make more feature requests on other elements as we discover which ones are important. 😄

[rootulp]

+1 in order to query Blueprint elements via getByTestId which uses the attribute data-testid.

[eastside]

+1 for this

It would be really nice to get this out. It's extremely helpful for integration tests to be able to store/access data-* attributes. Without it, I'm stuck with rather ugly hacks, like folding data into classes.

[adidahiya]

This was fixed for the Tab component in #3766.

If there are other components where you need this feature, please list those out here.

[eastside]

I believe the Select<> component needs it as well.

[adidahiya]

I'd be open to a PR for this feature in <Select>, but it's not as simple as <Tab> because it's a more complicated component.

Can you show me an example of what you're doing in your test code? I'm potentially concerned that simply creating an easy selector for the wrapper element of a Select will not be sufficient for tests, and that you may end up reaching into the internals of the component, at which point you might as well use the exported class names:

import { Classes } from "@blueprintjs/select";

[petejkim]

@adidahiya Please make it possible for <Alert> to have a data-testid as well, and it would be even better if we can assign data-testid for the cancel and confirm button in the <Alert> dialog.

[luigilake]

@adidahiya I agree with @petejkim . Could it possible to send in a data-h (dataH) into <Alert> specifically for the Cancel and Confirm/[CUSTOM TEXT] buttons? Thank you!

[adidahiya]

Btw we fixed this for Spinner in #5321

[bossa-jpg]

Please make it possible for <TimePicker> and <NonIdealState> components as well.

[yamiyo2020]

It would be nice to include it for <MultiSelect2> aswell.

[adidahiya]

Please make it possible for <TimePicker> and <NonIdealState> components as well.

I'm open to PRs which add support for arbitrary HTML attributes forwarded to the root element for these components. You would just have to extend React.HTMLAttributes<HTMLDivElement> in the component props interfaces and add a {...htmlProps} spread (similar to #5321).