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

* Split Button - initial concept. Includes Docs update. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * WIP SplitButton w/ Popover wrapper and dropdown list Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Style primary control w/ hairline separator Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Hairline Styling -- more Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Setup SplitButton doc Basic/States Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Convert SplitButton to React FC Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Set correct SplitButton doc Basic,States Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton tests and updated docs Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Cleanup test and doc lint Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Changelog SplitButton Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Automate CSS Y-axis with buttons in tandem. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton handle keyboard control. Unify CSS automation. Allow onClick/href for each option item. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton popover correct keyboard interaction Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Border and hairline colors corrected. Popover styling and keyboard control corrected. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * many many nits. code cleanup. propagate optional props into their target components recover Change Demo doc. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * lint fixes and test cleanup. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Copyright Headers Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> --------- Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> (cherry picked from commit eac077e) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jan 25, 2024 · d8831c3 · d8831c3
1 parent b88b1e7
commit d8831c3
Show file tree

Hide file tree

Showing 18 changed files with 7,038 additions and 41 deletions.
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';
@@ -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,

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>
+  );
+};