fix(modal): react - fix modal visibility when hidden="false"

[ashleyryan]

fixes #122

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)
• [ ] If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• [x] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] clarity.design website / infrastructure changes
• [ ] Other... Please describe:

What is the current behavior?

hidden={false} on CdsModal renders as hidden="false", which isn't really valid html, but it's an issue with react. The modal then doesn't render, because of css selectors for [hidden]

We had CSS to handle this case in v5, but some of the overlay/popover work in v6 overwrote the CSS

Issue Number: #122

What is the new behavior?

Increase CSS specificity of the visible styling for hidden="false"

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

This could have been fixed alternatively with a React HOC that converts the hidden boolean value of false to undefined, which prevents the hidden attribute from being applied as expected. But in the interest of keeping the React code base as thin as possible, I put the fix into CSS that already existed for this use case.

I reported this to the Lit team on their slack in the hopes they'd come up with a fix in lit-labs/react, and this is something they're going to look into fixing more broadly. Reported here: https://github.com/lit/lit/issues/3053

Also, I tried to add a react unit tests for this, but there seemed to be a bug somewhere in testing-library/dom or js-dom for this where the visibility property in CSS isn't cascaded/inherited correctly and checking for visibility returned visible, even when it's not.

[github-actions[bot]]

👋 @ashleyryan,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, checkout out a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

[github-actions[bot]]

:tada: This PR is included in version 6.1.0 :tada:

The release is available on:

• GitHub release
• v6.1.0

Your semantic-release bot :package::rocket:

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.