fix(Sidebar): fix a collision between children and shorthand props (#4145)

* fix(Sidebar): fix a collision between `children` and shorthand props

* remove only

* fix test

Author: layershifter

cypress/integration/Sidebar/Sidebar.spec.js

@@ -1,6 +1,13 @@
 /// <reference types="cypress" />
 
 describe('Sidebar: spec', () => {
+  it('with a Menu', () => {
+    cy.visit('/maximize/sidebar-and-menu/')
+
+    cy.get('[data-tid="menu"]').should('be.visible')
+    cy.get('[data-tid="menu-item"]').should('be.visible')
+  })
+
   it('with a Modal', () => {
     cy.visit('/maximize/sidebar-and-modal/')
 

docs/src/examples/modules/Sidebar/Spec/SidebarAndMenu.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Menu, Sidebar } from 'semantic-ui-react'
+
+const SidebarAndMenu = () => (
+  <Sidebar
+    as={Menu}
+    animation='push'
+    data-tid='menu'
+    inverted
+    items={[
+      { key: 'home', content: 'Home', 'data-tid': 'menu-item' },
+      { key: 'about', content: 'About' },
+    ]}
+    vertical
+    visible
+  />
+)
+
+export default SidebarAndMenu

src/modules/Sidebar/Sidebar.js

@@ -109,14 +109,16 @@ class Sidebar extends Component {
     const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
     return (
-      <Ref innerRef={this.ref}>
-        <ElementType {...rest} className={classes}>
-          {childrenUtils.isNil(children) ? content : children}
-          {visible && (
-            <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
-          )}
-        </ElementType>
-      </Ref>
+      <>
+        <Ref innerRef={this.ref}>
+          <ElementType {...rest} className={classes}>
+            {childrenUtils.isNil(children) ? content : children}
+          </ElementType>
+        </Ref>
+        {visible && (
+          <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
+        )}
+      </>
     )
   }
 }

test/specs/modules/Transition/TransitionGroup-test.js

@@ -12,6 +12,7 @@ const wrapperShallow = (...args) => (wrapper = shallow(...args))
 describe('TransitionGroup', () => {
   common.isConformant(TransitionGroup, {
     rendersFragmentByDefault: true,
+    rendersChildren: false,
   })
 
   beforeEach(() => {

test/utils/nestedShallow.js

@@ -1,10 +1,15 @@
 import { Ref } from '@fluentui/react-component-ref'
 import enzyme from 'enzyme'
 import _ from 'lodash'
+import React from 'react'
 
 const diveToLevel = (wrapper, autoNesting, nestingLevel) => {
   let nestedWrapper = wrapper
 
+  if (autoNesting && nestedWrapper.is(React.Fragment)) {
+    nestedWrapper = nestedWrapper.childAt(0)
+  }
+
   if (autoNesting && nestedWrapper.is(Ref)) {
     nestedWrapper = nestedWrapper.childAt(0)
   }