Merge branch 'main' into clean/breadcrumb-updates

CHANGELOG.md

@@ -21,13 +21,15 @@
 - 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
 
 - Add exit code to compile-scss script on failure ([#1024](https://github.com/opensearch-project/oui/pull/1024))
 - Extract build archive into a folder for OSD integration test CI ([#1075](https://github.com/opensearch-project/oui/pull/1075))
 - Correct file path for import of Query component ([#1069](https://github.com/opensearch-project/oui/pull/1069))
 - Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111))
+- Fix playground support check ([#1162](https://github.com/opensearch-project/oui/pull/1162))
 
 ### 🚞 Infrastructure
 

src-docs/src/components/guide_section/guide_section.tsx

@@ -133,7 +133,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
 
   const renderPlaygroundToggle = () => {
     const isPlaygroundUnsupported =
-      typeof window !== 'undefined' && typeof document !== 'undefined';
+      typeof window === 'undefined' || typeof document === 'undefined';
 
     if (!isPlaygroundUnsupported && !!playground) {
       return (

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,

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