feat(Modal): Added optional Id for close button

[tlabaj]

What: Closes #5856

Updated the ModalContent pass the ouiaId to the Modal close button. The Modal close button component appends the display name to the ouiaId and sets that as the button's ouiaId.

To test this add ouiaId="testId" to the in any example. This will add "testIdt-ModalBoxCloseButton"

[patternfly-build]

Preview: https://patternfly-react-pr-6732.surge.sh

[jpuzz0]

Looking at the initial issue, I see "We are currently using data- attributes to uniquely identify elements in the DOM.", where this is adding an id prop to the button, I'm wondering if this solves the problem for the user completely. It's certainly better than them using the className cited in the ticket though.

Should we confirm this meets the requirement?

[tlabaj]

Looking at the initial issue, I see "We are currently using data- attributes to uniquely identify elements in the DOM.", where this is adding an id prop to the button, I'm wondering if this solves the problem for the user completely. It's certainly better than them using the className cited in the ticket though.

Should we confirm this meets the requirement?

Yes. I will as Jenn to take a look. thanks!

[jgiardino]

Thanks for picking up this issue!

@tiffanynolan has taken over the task of redefining how we tag UI elements so that we can uniquely identify them for the purpose of gathering user metrics, so I'd like her to weigh in on the solution provided here.

One question I have is whether it's possible to enable us to specify a custom data- html attribute instead of using the id attribute? TBH, I'm not sure how important it is that the html attributes we use for identifying UI elements are the same, but wanted to ask. If that's not an option, then the id should support our use case.

[tlabaj]

@jeffpuzzo @jgiardino @tiffanynolan. I updated this to add a prop closeButtonProps to modal. It is more flexible and you can add data-. attributes or an id.

[jgiardino]

Thanks for updating this! This approach would definitely support our use case.

[jgiardino]

Can I take back what I said 😬

Looking at what Tiffany proposed, she wants to use data-ouia-component-id as our attribute for tagging elements, which appears to already be used for this element. When I try to specify that value with this prop, it appears that I can't override the dynamic value that is generated by PF. Sorry for the back-track on this one.

[jpuzz0]

I'm not familiar with OUIAProps yet, but does this usage of ouiaId meet the user requirements to be able to specify a custom data-ouia-component-id? Maybe they're synonymous?

[tlabaj]

@jeffpuzzo Yes. I explain in the description for this PR how you can see this demonstrated.
I talked to @jgiardino and Tiffany offline and what they were actually looking for is to utilize the ouiaId for identification purposes. The modal is already enabled to use ouiaId. Since the Modal is not compassable, the consumer can not add ouiaId to the close button. I pass the model's ouiaId to the close button and append the close button's display name to it so it is unique then I add the ouiaId to the button.
You can read more about OUIA here

[tiffanynolan]

This LGTM! Much better and should work with our Pendo tracking.

[jgiardino]

LGTM - thanks!