chore(docs): update SplitButton example with React15 version

packages/buttons/src/elements/SplitButton.example.md

@@ -6,6 +6,11 @@ The `SplitButton` pattern is accomplished with:
 - `Menu` component from [@zendeskgarden/react-menus](https://garden.zendesk.com/react-components/menus/)
   package for the secondary actions menu
 
+### React `16+`
+
+The `react-menus` package uses the [React.Fragments](https://reactjs.org/docs/fragments.html)
+API internally. For React <=15 support, use the example below.
+
 ```jsx
 /**
  * Must use relative link to avoid circular dependency
@@ -49,3 +54,84 @@ const increment = (num = 0) => setState({ count: state.count + num });
   </Row>
 </Grid>;
 ```
+
+### React `<=15`
+
+Due the the `Fragment` usage in the `react-menus` component, a wrapping `<div>`
+is visible in React versions `<= 15`.
+
+This extra `<div>` can cause styling issues depending on where/how the
+component is used. The most customizable approach, if you are using a
+lower React version, is to use the `MenuContainer` component. This
+customization allows you to spread the required attributes and events
+onto the `ChevronButton`.
+
+```jsx
+/**
+ * Must use relative link to avoid circular dependency
+ * between `react-menus` and `react-buttons` in lerna bootstrap
+ **/
+const { MenuContainer, MenuView, Item } = require('../../../menus/src');
+
+initialState = {
+  count: 0,
+  isOpen: false
+};
+
+const increment = (num = 0) => setState({ count: state.count + num });
+
+<Grid>
+  <Row>
+    <Col sm={6}>
+      <MenuContainer
+        isOpen={state.isOpen}
+        placement="top-end"
+        onChange={selectedKey => {
+          if (selectedKey === 'add-5') {
+            increment(5);
+          } else if (selectedKey === 'add-10') {
+            increment(10);
+          }
+        }}
+        onStateChange={newState => setState(newState)}
+        trigger={({ getTriggerProps, triggerRef }) => (
+          <ButtonGroupView>
+            <Button onClick={() => increment(1)}>Add 1</Button>
+            <ChevronButton
+              {...getTriggerProps({
+                buttonRef: triggerRef,
+                active: state.isOpen,
+                rotated: state.isOpen
+              })}
+            />
+          </ButtonGroupView>
+        )}
+      >
+        {({ getMenuProps, menuRef, placement, getItemProps, focusedKey }) => (
+          <MenuView {...getMenuProps({ placement, menuRef })}>
+            <Item
+              {...getItemProps({
+                key: 'add-5',
+                textValue: 'Add 5',
+                focused: focusedKey === 'add-5'
+              })}
+            >
+              Add 5
+            </Item>
+            <Item
+              {...getItemProps({
+                key: 'add-10',
+                textValue: 'Add 10',
+                focused: focusedKey === 'add-10'
+              })}
+            >
+              Add 10
+            </Item>
+          </MenuView>
+        )}
+      </MenuContainer>
+    </Col>
+    <Col sm={6}>Total Count: {state.count}</Col>
+  </Row>
+</Grid>;
+```