From 9227ed1f5956ba6419f57c9248d849a99edec4a7 Mon Sep 17 00:00:00 2001
From: Austin Green <agreen@zendesk.com>
Date: Wed, 22 Aug 2018 09:28:35 -0700
Subject: [PATCH 1/2] chore(docs): update SplitButton example with React15
 version

---
 .../src/elements/SplitButton.example.md       | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/packages/buttons/src/elements/SplitButton.example.md b/packages/buttons/src/elements/SplitButton.example.md
index 420161e336e..c9625c0c768 100644
--- a/packages/buttons/src/elements/SplitButton.example.md
+++ b/packages/buttons/src/elements/SplitButton.example.md
@@ -6,6 +6,10 @@ 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 `Fragments` API internally. For React <=15 support, use the example below.
+
 ```jsx
 /**
  * Must use relative link to avoid circular dependency
@@ -49,3 +53,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>;
+```

From 69a91c18d8298a29f147ca2736eb8cf4ec9b0499 Mon Sep 17 00:00:00 2001
From: Austin Green <agreen@zendesk.com>
Date: Wed, 22 Aug 2018 09:48:03 -0700
Subject: [PATCH 2/2] Fix linting issues

---
 packages/buttons/src/elements/SplitButton.example.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/buttons/src/elements/SplitButton.example.md b/packages/buttons/src/elements/SplitButton.example.md
index c9625c0c768..0e88b3e150d 100644
--- a/packages/buttons/src/elements/SplitButton.example.md
+++ b/packages/buttons/src/elements/SplitButton.example.md
@@ -8,7 +8,8 @@ The `SplitButton` pattern is accomplished with:
 
 ### React `16+`
 
-The `react-menus` package uses the `Fragments` API internally. For React <=15 support, use the example below.
+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
 /**