Stack: Modifying StackItem so that it can render multiple children (#7908)

* Removing children prop from StackItem.types.ts as it is already given to StackItem via IComponent.

* Stack: Modifying StackItem so that it can handle multiple children.

* Adding change file.

* Removing childNodes variable that is unused.

Author: khmakoto

common/changes/@uifabric/experiments/stackItem_2019-02-06-01-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Stack: Modifying StackItem so that it can render multiple children.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "makotom@microsoft.com"
+}

packages/experiments/src/components/Stack/StackItem/StackItem.test.tsx

@@ -61,9 +61,9 @@ describe('Stack Item', () => {
       </Stack>
     );
 
-    const stackItem = wrapper.find('span').at(0);
+    const stackItem = wrapper.find('div').at(1);
     const stackItemClass = stackItem.props().className;
-    const child = wrapper.find('span').at(1);
+    const child = wrapper.find('span').at(0);
     const childClass = child.props().className;
 
     expect(stackItemClass).toContain(stackItemClassName);

packages/experiments/src/components/Stack/StackItem/StackItem.tsx

@@ -5,17 +5,16 @@ import { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackIt
 import { styles } from './StackItem.styles';
 
 const view: IStackItemComponent['view'] = props => {
-  const childNodes: React.ReactElement<{}>[] = React.Children.toArray(props.children) as React.ReactElement<{}>[];
-  const first = childNodes[0];
-  if (!first) {
+  const { children } = props;
+  if (React.Children.count(children) < 1) {
     return null;
   }
 
   const Slots = getSlots<IStackItemProps, IStackItemSlots>(props, {
-    root: 'span'
+    root: 'div'
   });
 
-  return <Slots.root>{first}</Slots.root>;
+  return <Slots.root>{children}</Slots.root>;
 };
 
 export const StackItem: React.StatelessComponent<IStackItemProps> = createComponent({

packages/experiments/src/components/Stack/StackItem/StackItem.types.ts

@@ -23,11 +23,6 @@ export interface IStackItemProps extends IStackItemSlots, IStyleableComponentPro
    */
   className?: string;
 
-  /**
-   * @internal Internal use only - gives the Stack component a handle on the children of its Stack.Items
-   */
-  children?: (React.ReactElement<IStackItemProps> | string)[] | React.ReactElement<IStackItemProps> | string;
-
   /**
    * Defines how much to grow the StackItem in proportion to its siblings.
    */