[Hidden] Change children type to allow many and add children tests

[rosskevin]

Closes #8072

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[rosskevin]

codecov appears hung. It's been about 25 minutes since it should have queued there, but their status says operational. https://status.codecov.io/

[oliviertassinari]

We should assert the output dom.

[oliviertassinari]

I feel like we are missing a part in the story. As far as I know the CSS version do not support multiple children.

[rosskevin]

Perhaps this would be better served by creating a <span class wrapper instead of changing this to cloning children. This would change the DOM, but it would cover all children.
@oliviertassinari

My concern is this case:

        <HiddenCss mdUp>
          <Foo />
          <Foo />
          foo
        </HiddenCss>,

Which I think would still show string foo with this implementation:

  return React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        className: classNames(child.props.className, className.join(' ')),
      });
    }

    return child;
  });

I guess we could look for typeof child number | string and cover only those in <span class, this would leave the DOM mostly intact.

Thoughts?

[oliviertassinari]

Perhaps this would be better served by creating a <span class wrapper instead

We could try this approach. We would need to make sure the responsive drawers of the docs are still working. It's not guaranteed.

[rosskevin]

@oliviertassinari it looks like the span implementation worked. I tried drawers. Also added structural tests for children just to be paranoid.

[oliviertassinari]

The docs seems ok. Good job 👍

[oliviertassinari]

What do you think of adding a warning if ...other is non empty?

[rosskevin]

I'll alter the current warning, since a ref is no longer valid there.

[oliviertassinari]

What do you think of sticking to assert.strictEqual(X, true)? I have found two other tests file using this pattern. It's almost not used.

[rosskevin]

I hate when this happens. All green locally, remotely, not so much.

[rosskevin]

Wow, the simple change that I thought would never end!