Bufix/split-button-single (#1209)

* Make SplitButton display simple button when no options

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

* Changelog Fix Split Button

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

* Remove hairline if simple-button displayed

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

---------

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Signed-off-by: Miki <miki@amazon.com>
Co-authored-by: Miki <miki@amazon.com>

CHANGELOG.md

@@ -42,6 +42,7 @@
 - Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111))
 - Fix bug in OuiButtonContent for showing info tooltip in icon-only buttons when hovered([#1160](https://github.com/opensearch-project/oui/pull/1160))
 - Fix playground support check ([#1162](https://github.com/opensearch-project/oui/pull/1162))
+- Make a OuiSplitButton with no options present as a button ([#1208](https://github.com/opensearch-project/oui/pull/1208))
 - Prevent collapsable button of a resizable from adding to the height when hidden ([#1241](https://github.com/opensearch-project/oui/pull/1241))
 - Prevent action buttons of OuiDataGridCell from moving the content ([#1224](https://github.com/opensearch-project/oui/pull/1224))
 - Fix vertical alignment and font weight of breadcrumbs that are buttons or links ([#1232](https://github.com/opensearch-project/oui/pull/1232))

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

@@ -29,6 +29,15 @@ const splitButtonBasicSnippet = `<OuiSplitButton
 >Basic Split Button</OuiSplitButton>
 `;
 
+import SplitButtonSimple from './split_button_simple';
+const splitButtonSimpleSource = require('!!raw-loader!./split_button_simple');
+const splitButtonSimpleHtml = renderToHtml(SplitButtonSimple);
+const splitButtonSimpleSnippet = `<OuiSplitButton
+  options={[]} initiallyOpen
+  onClick={() => console.log("Primary clicked")}
+>Simple Split Button</OuiSplitButton>
+`;
+
 import SplitButtonComplex from './split_button_complex';
 const splitButtonComplexSource = require('!!raw-loader!./split_button_complex');
 const splitButtonComplexHtml = renderToHtml(SplitButtonComplex);
@@ -180,6 +189,30 @@ export const SplitButtonExample = {
       snippet: splitButtonBasicSnippet,
       demo: <SplitButtonBasic />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitButtonSimpleSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitButtonSimpleHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            When no options are provided, SplitButton displays a simple Button
+            in it&apos;s place, even if other dropdown options are present (like
+            <OuiCode>intiallyOpen</OuiCode>)
+          </p>
+        </div>
+      ),
+      props: { OuiSplitButton },
+      snippet: splitButtonSimpleSnippet,
+      demo: <SplitButtonSimple />,
+    },
     {
       title: 'More complex',
       source: [

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

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