[Backport 1.x] Split Button - initial concept. Includes Docs update.

src-docs/src/routes.js

@@ -1,12 +1,6 @@
 /*
+ * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
  */
 
 import React, { createElement, Fragment } from 'react';
@@ -199,6 +193,8 @@ import { SideNavExample } from './views/side_nav/side_nav_example';
 
 import { SpacerExample } from './views/spacer/spacer_example';
 
+import { SplitButtonExample } from './views/split_button/split_button_example';
+
 import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
@@ -356,6 +352,7 @@ const navigation = [
     items: [
       BreadcrumbsExample,
       ButtonExample,
+      SplitButtonExample,
       CollapsibleNavExample,
       ContextMenuExample,
       ControlBarExample,

src-docs/src/views/split_button/split_button_basic.js

@@ -0,0 +1,27 @@
+/*
+ * copyright opensearch contributors
+ * spdx-license-identifier: apache-2.0
+ */
+
+import React from 'react';
+
+import { OuiSplitButton } from '../../../../src/components';
+
+export default () => {
+  const options = [
+    { id: '1', display: 'Option 1', href: '#' },
+    {
+      id: '2',
+      display: 'Option 2',
+      onClick: () => console.log('Option 2 clicked'),
+    },
+  ];
+
+  const primaryClick = () => console.log('Primary clicked');
+
+  return (
+    <OuiSplitButton options={options} onClick={primaryClick}>
+      Basic Split Button
+    </OuiSplitButton>
+  );
+};

src-docs/src/views/split_button/split_button_change_demo.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useState } from 'react';
+
+import { OuiSplitButton, OuiText } from '../../../../src/components';
+
+export default () => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const options = [
+    {
+      display: (
+        <Fragment>
+          <strong>Option one</strong>
+          <OuiText disabled size="s" color="subdued">
+            Has a short description giving more detail to the option.
+          </OuiText>
+        </Fragment>
+      ),
+      button: 'Option one',
+      onClick: () => setSelectedIndex(0),
+      onButtonClick: () => console.log('Option one clicked'),
+    },
+    {
+      display: (
+        <Fragment>
+          <strong>Option two</strong>
+          <OuiText size="s" color="subdued">
+            Has a short description giving more detail to the option.
+          </OuiText>
+        </Fragment>
+      ),
+      button: 'Option two',
+      onClick: () => setSelectedIndex(1),
+      onButtonClick: () => console.log('Option two clicked'),
+    },
+    {
+      display: 'Just some Text',
+      button: 'Option three',
+      onClick: () => setSelectedIndex(2),
+      onButtonClick: () => console.log('Option three clicked'),
+    },
+  ];
+
+  return (
+    <OuiSplitButton
+      options={options}
+      selectedIndex={selectedIndex}
+      onClick={options[selectedIndex].onButtonClick}
+      hasDividers
+      optionProps={{ textAlign: 'left' }}>
+      {options[selectedIndex].button}
+    </OuiSplitButton>
+  );
+};

src-docs/src/views/split_button/split_button_complex.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment } from 'react';
+
+import { OuiSplitButton, OuiText } from '../../../../src/components';
+
+export default () => {
+  const options = [
+    {
+      display: (
+        <Fragment>
+          <strong>Option one</strong>
+          <OuiText disabled size="s" color="subdued">
+            Has a short description giving more detail to the option.
+          </OuiText>
+        </Fragment>
+      ),
+      onClick: () => console.log('Option one clicked'),
+    },
+    {
+      display: (
+        <Fragment>
+          <strong>Option two</strong>
+          <OuiText size="s" color="subdued">
+            Has a short description giving more detail to the option.
+          </OuiText>
+        </Fragment>
+      ),
+      onClick: () => console.log('Option 2 clicked'),
+    },
+    {
+      display: 'Just some Text',
+      onClick: () => console.log('Option 3 Clicked'),
+    },
+  ];
+
+  return (
+    <OuiSplitButton
+      options={options}
+      selectedIndex={1}
+      hasDividers
+      optionProps={{ textAlign: 'left' }}>
+      Complex Selections
+    </OuiSplitButton>
+  );
+};