USWDS - Modal: Use classname constants for all variable references in JavaScript file. #6026
Conversation
|
To confirm this issue, I pulled this branch and modified Here is the test html:
when using
The JS error is: The label's for attribute doesn't match any element id. I then replaced
with :
And the modal worked as expected with no error. |
|
Hi USWDS, anything I can do to get this merged? |
|
Hi @sanson, thank you for reaching out We have your proposed fix scheduled for the November release. We'll be reviewing and approving that fix in our current sprint. Your custom workaround for modal isn't one we'd recommend, but it led us to confirm the double init issue that necessitated it. We'll document and investigate this because we do hope users follow our guidance to add their own modals. Have a great day and let us know what else you need. The USWDS Team |
There was a problem hiding this comment.
Thanks for your contribution!
Created a test branch on site [test-modal-uswds-6027] that has this installed and uses the touchpoints modal. No regressions on interactive component pages.
|
Thank you! |
Summary
Fixed a bug in the usa-modal component whereby the class name was hard-coded in JavaScript. Using the PREFIX variable consistently allows users to bundle the modal package with a prefix other than usa-.
Breaking change
This is not a breaking change.
Related issue
Closes #6027
Related pull requests
Changelog PR
Preview link
Preview link:
Problem statement
Users may choose to use a different prefix in the modal component. Currently, not all of the variables use the PREFIX variable for all styles. Update the styles to allow users to bundle the modal package with a prefix other than usa-.
Solution
By replacing hardcoded variables like (".usa-modal") with available constants such as (
.${MODAL_CLASSNAME}) users that choose to customize the prefix with the modal component can do so.