Description

A boolean attribute, by definition, is true when it exists on the element, regardless of the value. There is no hidden="false", the false value would be removing the attribute. React allows false values for things like checked, so it's confusing to have to do something like hidden={showElement ? undefined : true} on a boolean attribute.

We have this issue on our Modals.

Steps to Reproduce

set hidden={false} on a CdsModal and notice that it does not show, as expected.

Live Reproduction Link

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

Expected Results

The hidden prop can accept a value of false and behave like undefined.

Actual Results

false is the same as true

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11