chore(dropdown): add split button action example

packages/react-core/src/components/Dropdown/examples/Dropdown.md

@@ -63,3 +63,11 @@ To provide users with more context about a `<DropdownItem>`, pass a short messag
 ```ts file="./DropdownWithDescriptions.tsx"
 
 ```
+
+### Split button
+
+Description of split button
+
+```ts file="./DropdownWithSplit.tsx"
+
+```

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx

@@ -0,0 +1,87 @@
+import {
+  Dropdown,
+  MenuToggle,
+  MenuToggleCheckbox,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  MenuToggleElement
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button-text');
+    element?.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          splitButtonItems={[
+            <MenuToggleCheckbox
+              id="split-button-checkbox-example"
+              key="split-checkbox"
+              aria-label="Select all"
+            ></MenuToggleCheckbox>
+          ]}
+          aria-label="Dropdown with checkbox split button"
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        />
+      )}
+      isOpen={isOpen}
+    >
+      <DropdownList>
+        <DropdownItem value={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          value={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem value={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <DropdownItem
+          value={4}
+          isAriaDisabled
+          key="aria-disabled link"
+          to="#default-link5"
+          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+        >
+          Aria-disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem value={5} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};