New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Modal): Added optional Id for close button #6732
Conversation
Looking at the initial issue, I see "We are currently using Should we confirm this meets the requirement? |
Yes. I will as Jenn to take a look. thanks! |
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 |
@jeffpuzzo @jgiardino @tiffanynolan. I updated this to add a prop |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for updating this! This approach would definitely support our use case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
variant="plain" | ||
onClick={onClose} | ||
aria-label="Close" | ||
{...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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
This LGTM! Much better and should work with our Pendo tracking. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM - thanks!
What: Closes #5856
Updated the ModalContent pass the
ouiaId
to the Modal close button. The Modal close button component appends the display name to theouiaId
and sets that as the button'souiaId
.To test this add
ouiaId="testId"
to the in any example. This will add "testIdt-ModalBoxCloseButton"