React: CdsModal doesn't display when setting hidden={false}

[ashleyryan]

Describe the bug

When setting the hidden prop to false on the CdsModal component, the modal is not visible. React sends a string to the DOM, so the attribute is hidden="false" but the hidden attribute should be removed, not set to false. See the spect https://www.w3.org/TR/2008/WD-html5-20080610/semantics.html#boolean

How to reproduce

https://stackblitz.com/edit/clarity-react-8em3m2?file=src%2FApp.tsx

Notice how the modal only appears if you conditionally render the modal only when hidden is false, or if you convert false to undefined

Expected behavior

The Modal would be visible with hidden=false like it is in V5: https://codesandbox.io/s/goofy-cori-wyy4eq?file=/src/App.tsx

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
ie: Angular 11

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

Lit issue: lit/lit#3053

Related (closed) React Issue: facebook/react#9230 (comment)

[github-actions]

🎉 This issue has been resolved in version 6.1.0 🎉

The release is available on:

• GitHub release
• v6.1.0

Your semantic-release bot 📦🚀

[github-actions]

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