Split Button - initial concept. Includes Docs update. (#1193)

* Split Button - initial concept. Includes Docs update. Signed-off-by: Peter Fitzgibbons <[email protected]> * WIP SplitButton w/ Popover wrapper and dropdown list Signed-off-by: Peter Fitzgibbons <[email protected]> * Style primary control w/ hairline separator Signed-off-by: Peter Fitzgibbons <[email protected]> * Hairline Styling -- more Signed-off-by: Peter Fitzgibbons <[email protected]> * Setup SplitButton doc Basic/States Signed-off-by: Peter Fitzgibbons <[email protected]> * Convert SplitButton to React FC Signed-off-by: Peter Fitzgibbons <[email protected]> * Set correct SplitButton doc Basic,States Signed-off-by: Peter Fitzgibbons <[email protected]> * SplitButton tests and updated docs Signed-off-by: Peter Fitzgibbons <[email protected]> * Cleanup test and doc lint Signed-off-by: Peter Fitzgibbons <[email protected]> * Changelog SplitButton Signed-off-by: Peter Fitzgibbons <[email protected]> * Automate CSS Y-axis with buttons in tandem. Signed-off-by: Peter Fitzgibbons <[email protected]> * SplitButton handle keyboard control. Unify CSS automation. Allow onClick/href for each option item. Signed-off-by: Peter Fitzgibbons <[email protected]> * SplitButton popover correct keyboard interaction Signed-off-by: Peter Fitzgibbons <[email protected]> * Border and hairline colors corrected. Popover styling and keyboard control corrected. Signed-off-by: Peter Fitzgibbons <[email protected]> * many many nits. code cleanup. propagate optional props into their target components recover Change Demo doc. Signed-off-by: Peter Fitzgibbons <[email protected]> * lint fixes and test cleanup. Signed-off-by: Peter Fitzgibbons <[email protected]> * Copyright Headers Signed-off-by: Peter Fitzgibbons <[email protected]> --------- Signed-off-by: Peter Fitzgibbons <[email protected]>
opensearch-project · Jan 11, 2024 · eac077e · eac077e
1 parent 6ef0c94
commit eac077e
Show file tree

Hide file tree

Showing 19 changed files with 7,039 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@
 - Rename `crossInACircleFilled` asset files and ensure backward compatibility ([#1113](https://github.com/opensearch-project/oui/pull/1113))
 - Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))
 - Add `Docking` icons ([#1041](https://github.com/opensearch-project/oui/pull/1041))
+- Add SplitButton control ([#1193](https://github.com/opensearch-project/oui/pull/1193))
 
 ### 🐛 Bug Fixes
 

diff --git a/src-docs/src/routes.js b/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';
@@ -197,6 +191,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';
@@ -353,6 +349,7 @@ const navigation = [
     items: [
       BreadcrumbsExample,
       ButtonExample,
+      SplitButtonExample,
       CollapsibleNavExample,
       ContextMenuExample,
       ControlBarExample,

diff --git a/src-docs/src/views/split_button/split_button_basic.js b/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>
+  );
+};
diff --git a/src-docs/src/views/split_button/split_button_change_demo.js b/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>
+  );
+};
diff --git a/src-docs/src/views/split_button/split_button_complex.js b/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>
+  );
+};