[labs/react] boolean attributes should allow false to be more react-like

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

[ashleyryan]

Figured it out! It was an async timing issue where I was checking for the hidden attribute before the first render was finished. It passes, looks like our workaround can safely be removed. Thanks for fixing this!

I should note that I only had this issue with the hidden attribute on a few components - I didn’t use anything like the id example you gave above. I also think we had a component with an attribute that took a “true” or “false” or undefined value as 3 separate things, so we should check that one as well. (But again I’m not on that team or at that company anymore, so I’ll give them a nudge)

[ashleyryan]

Thanks for this @taylor-vann - I no longer work on the project that was having the issue, but I’ll pass it on to the team. I did clone the repo and checked it out really quick and it most of the jest tests have passed as expected when I remove the higher order component I build to convert false to undefined. One is failing still and I haven’t had a chance to dig into it yet, but it looks good for the most part!