From 439c942680165c1974f860dbfb787617f2ac948e Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Thu, 17 Feb 2022 13:27:59 -0700
Subject: [PATCH 01/10] initial commit

---
 .../shared_ux/public/components/index.ts      |  8 +++
 .../solution_toolbar_button/button/button.mdx | 11 ++++
 .../button/button.scss                        | 13 +++++
 .../button/button.stories.tsx                 | 25 +++++++++
 .../button/button.test.tsx                    | 35 +++++++++++++
 .../solution_toolbar_button/button/button.tsx | 52 +++++++++++++++++++
 .../solution_toolbar_button/button/index.ts   |  9 ++++
 .../solution_toolbar_button/index.ts          |  9 ++++
 8 files changed, 162 insertions(+)
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
 create mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts

diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index 3c5e4424f99f5..025c1dd7460a5 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -19,9 +19,17 @@ export const LazyExitFullScreenButton = React.lazy(() =>
   }))
 );
 
+export const LazySolutionToolbarButton = React.lazy(() =>
+  import('./solution_toolbar_button').then(({ SolutionToolbarButton }) => ({
+    default: SolutionToolbarButton,
+  }))
+);
+
 /**
  * A `ExitFullScreenButton` component that is wrapped by the `withSuspense` HOC.  This component can
  * be used directly by consumers and will load the `LazyExitFullScreenButton` component lazily with
  * a predefined fallback and error boundary.
  */
 export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
+
+export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
new file mode 100644
index 0000000000000..447a5f6dfad56
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
@@ -0,0 +1,11 @@
+---
+id: sharedUX/Components/SolutionToolbarButton
+slug: /shared-ux/components/solution_toolbar/button/button
+title: Solution Toolbar Button
+summary: An opinionated implementation of the toolbar extracted to just the button. 
+tags: ['shared-ux', 'component']
+date: 2022-02-17
+---
+
+> This documentation is in-progress.
+This button is a piece of the solution toolbar component. This button has primary styling and requires a label.
\ No newline at end of file
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
new file mode 100644
index 0000000000000..ff9c15fd04a05
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
@@ -0,0 +1,13 @@
+.solutionToolbarButton {
+    line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
+    background-color: $euiColorEmptyShade;
+  
+    // Lighten the border color for all states
+    border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
+  
+    &[class*='--text'] {
+      border-width: $euiBorderWidthThin;
+      border-style: solid;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx
new file mode 100644
index 0000000000000..a59bf317fd7ad
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Props, SolutionToolbarButton } from './button';
+import mdx from './button.mdx';
+
+export default {
+  title: 'Solution Toolbar Button',
+  description: 'A button that is a part of the solution toolbar.',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const ConnectedComponent = ({ label }: Props) => {
+  return <SolutionToolbarButton label={label} />;
+};
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx
new file mode 100644
index 0000000000000..b0de228f66283
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { mount as enzymeMount, ReactWrapper } from 'enzyme';
+import React from 'react';
+import { ServicesProvider, SharedUXServices } from '../../../services';
+import { servicesFactory } from '../../../services/mocks';
+
+import { SolutionToolbarButton } from './button';
+
+describe('<SolutionToolbarButton />', () => {
+  let services: SharedUXServices;
+  let mount: (element: JSX.Element) => ReactWrapper;
+
+  beforeEach(() => {
+    services = servicesFactory();
+    mount = (element: JSX.Element) =>
+      enzymeMount(<ServicesProvider {...services}>{element}</ServicesProvider>);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('is rendered', () => {
+    const component = mount(<SolutionToolbarButton label="test" />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
new file mode 100644
index 0000000000000..1533058af45fe
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiButton, useEuiTheme } from '@elastic/eui';
+import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
+import cx from 'classnames';
+import './button.scss';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+
+export interface Props
+  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
+  label: string;
+  primary?: boolean;
+  isDarkModeEnabled?: boolean;
+}
+
+const label = i18n.translate('sharedUX.solutionToolbarButton.solutionToolbarButtonLabel', {
+  defaultMessage: 'sample label',
+});
+
+export const SolutionToolbarButton = ({ primary, className, ...rest }: Props) => {
+  const { euiTheme } = useEuiTheme();
+  const { colors, border, size } = euiTheme;
+  const buttonCSS = css`
+    line-height: ${size.base};
+    background-color: ${colors.primary};
+    border-color: ${border.color};
+    border-width: ${border.width.thin};
+    border-style: ${border.color};
+    }
+  `;
+
+  return (
+    <EuiButton
+      {...rest}
+      size="m"
+      color={primary ? 'primary' : 'text'}
+      className={`solutionToolbarButton ${className}`}
+      fill={primary}
+      css={buttonCSS}
+    >
+      {label}
+    </EuiButton>
+  );
+};
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
new file mode 100644
index 0000000000000..ee0d6c876945d
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { SolutionToolbarButton } from './button';
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts b/src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts
new file mode 100644
index 0000000000000..ee0d6c876945d
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { SolutionToolbarButton } from './button';

From 41b68e363b063e834ac10cce7b981bc2f4930ea7 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 22 Feb 2022 12:26:15 -0700
Subject: [PATCH 02/10] import sass for missing parts of emotion

---
 .../components/solution_toolbar_button/button/button.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
index 1533058af45fe..3647715f36dbc 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
@@ -9,11 +9,12 @@
 import React from 'react';
 import { EuiButton, useEuiTheme } from '@elastic/eui';
 import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
-import cx from 'classnames';
 import './button.scss';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 
+import './button.scss';
+
 export interface Props
   extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
   label: string;

From fa3a38f9779d2fa603ccfcf9bd701f4021e5df08 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 22 Feb 2022 12:56:59 -0700
Subject: [PATCH 03/10] lint fix and mdx improvement

---
 .../solution_toolbar_button/button/button.mdx |  2 +-
 .../button/button.scss                        | 21 +++++++++----------
 .../solution_toolbar_button/button/button.tsx | 18 ++++++++--------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
index 447a5f6dfad56..3c3aa088db1bc 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
@@ -8,4 +8,4 @@ date: 2022-02-17
 ---
 
 > This documentation is in-progress.
-This button is a piece of the solution toolbar component. This button has primary styling and requires a label.
\ No newline at end of file
+This button is a piece of the solution toolbar component. This button can have primary styling or text styling and requires a label. The primary button builds off of this button component.
\ No newline at end of file
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
index ff9c15fd04a05..4283813f1d0b7 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
@@ -1,13 +1,12 @@
 .solutionToolbarButton {
-    line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
-    background-color: $euiColorEmptyShade;
-  
-    // Lighten the border color for all states
-    border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
-  
-    &[class*='--text'] {
-      border-width: $euiBorderWidthThin;
-      border-style: solid;
-    }
+  line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
+  background-color: $euiColorEmptyShade;
+
+  // Lighten the border color for all states
+  border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
+
+  &[class*='--text'] {
+    border-width: $euiBorderWidthThin;
+    border-style: solid;
   }
-  
\ No newline at end of file
+}
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
index 3647715f36dbc..25ecd585b42a2 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 import { EuiButton, useEuiTheme } from '@elastic/eui';
 import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
-import './button.scss';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 
@@ -22,19 +21,20 @@ export interface Props
   isDarkModeEnabled?: boolean;
 }
 
-const label = i18n.translate('sharedUX.solutionToolbarButton.solutionToolbarButtonLabel', {
-  defaultMessage: 'sample label',
+const defaultLabel = i18n.translate('sharedUX.solutionToolbarButton.solutionToolbarButtonLabel', {
+  defaultMessage: 'Primary Action',
 });
 
-export const SolutionToolbarButton = ({ primary, className, ...rest }: Props) => {
+export const SolutionToolbarButton = ({ label= defaultLabel, primary, className, ...rest }: Props) => {
   const { euiTheme } = useEuiTheme();
-  const { colors, border, size } = euiTheme;
+  const { colors, border, font } = euiTheme;
   const buttonCSS = css`
-    line-height: ${size.base};
+    line-height: ${font.lineHeightMultiplier};
     background-color: ${colors.primary};
-    border-color: ${border.color};
-    border-width: ${border.width.thin};
-    border-style: ${border.color};
+    & [class*='--text'] {
+      border-width: ${border.width.thin};
+      border-style: ${border.color};    
+    }
     }
   `;
 

From 13de22318aa808fbe06b088682c2c4b67c265145 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 22 Feb 2022 13:22:09 -0700
Subject: [PATCH 04/10] lint fix

---
 .../components/solution_toolbar_button/button/button.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
index 25ecd585b42a2..306f9b26114ed 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
+++ b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
@@ -25,7 +25,12 @@ const defaultLabel = i18n.translate('sharedUX.solutionToolbarButton.solutionTool
   defaultMessage: 'Primary Action',
 });
 
-export const SolutionToolbarButton = ({ label= defaultLabel, primary, className, ...rest }: Props) => {
+export const SolutionToolbarButton = ({
+  label = defaultLabel,
+  primary,
+  className,
+  ...rest
+}: Props) => {
   const { euiTheme } = useEuiTheme();
   const { colors, border, font } = euiTheme;
   const buttonCSS = css`

From 9fd382728fb4561e397f2c4ca6ac93bec74e3b9f Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 22 Feb 2022 14:43:17 -0700
Subject: [PATCH 05/10] refactor for clarity

---
 .../shared_ux/public/components/index.ts      |  2 +-
 .../button/button.scss                        | 12 ----
 .../solution_toolbar_button/button/button.tsx | 58 -------------------
 .../solution_toolbar_button/button/index.ts   |  9 ---
 .../index.ts                                  |  2 +-
 .../solution_toolbar/button/primary.mdx}      |  7 ++-
 .../button/primary.stories.tsx}               |  8 +--
 .../solution_toolbar/button/primary.test.tsx} |  6 +-
 .../solution_toolbar/button/primary.tsx       | 35 +++++++++++
 9 files changed, 48 insertions(+), 91 deletions(-)
 delete mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
 delete mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
 delete mode 100644 src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
 rename src/plugins/shared_ux/public/components/{solution_toolbar_button => toolbar}/index.ts (84%)
 rename src/plugins/shared_ux/public/components/{solution_toolbar_button/button/button.mdx => toolbar/solution_toolbar/button/primary.mdx} (59%)
 rename src/plugins/shared_ux/public/components/{solution_toolbar_button/button/button.stories.tsx => toolbar/solution_toolbar/button/primary.stories.tsx} (74%)
 rename src/plugins/shared_ux/public/components/{solution_toolbar_button/button/button.test.tsx => toolbar/solution_toolbar/button/primary.test.tsx} (83%)
 create mode 100644 src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx

diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index 025c1dd7460a5..831f7908db32f 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -20,7 +20,7 @@ export const LazyExitFullScreenButton = React.lazy(() =>
 );
 
 export const LazySolutionToolbarButton = React.lazy(() =>
-  import('./solution_toolbar_button').then(({ SolutionToolbarButton }) => ({
+  import('./toolbar').then(({ SolutionToolbarButton }) => ({
     default: SolutionToolbarButton,
   }))
 );
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
deleted file mode 100644
index 4283813f1d0b7..0000000000000
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.solutionToolbarButton {
-  line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
-  background-color: $euiColorEmptyShade;
-
-  // Lighten the border color for all states
-  border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
-
-  &[class*='--text'] {
-    border-width: $euiBorderWidthThin;
-    border-style: solid;
-  }
-}
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
deleted file mode 100644
index 306f9b26114ed..0000000000000
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiButton, useEuiTheme } from '@elastic/eui';
-import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
-import { i18n } from '@kbn/i18n';
-import { css } from '@emotion/react';
-
-import './button.scss';
-
-export interface Props
-  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
-  label: string;
-  primary?: boolean;
-  isDarkModeEnabled?: boolean;
-}
-
-const defaultLabel = i18n.translate('sharedUX.solutionToolbarButton.solutionToolbarButtonLabel', {
-  defaultMessage: 'Primary Action',
-});
-
-export const SolutionToolbarButton = ({
-  label = defaultLabel,
-  primary,
-  className,
-  ...rest
-}: Props) => {
-  const { euiTheme } = useEuiTheme();
-  const { colors, border, font } = euiTheme;
-  const buttonCSS = css`
-    line-height: ${font.lineHeightMultiplier};
-    background-color: ${colors.primary};
-    & [class*='--text'] {
-      border-width: ${border.width.thin};
-      border-style: ${border.color};    
-    }
-    }
-  `;
-
-  return (
-    <EuiButton
-      {...rest}
-      size="m"
-      color={primary ? 'primary' : 'text'}
-      className={`solutionToolbarButton ${className}`}
-      fill={primary}
-      css={buttonCSS}
-    >
-      {label}
-    </EuiButton>
-  );
-};
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts b/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
deleted file mode 100644
index ee0d6c876945d..0000000000000
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export { SolutionToolbarButton } from './button';
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
similarity index 84%
rename from src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts
rename to src/plugins/shared_ux/public/components/toolbar/index.ts
index ee0d6c876945d..8a1dd723e4661 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { SolutionToolbarButton } from './button';
+export { SolutionToolbarButton } from './solution_toolbar/button';
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
similarity index 59%
rename from src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
rename to src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
index 3c3aa088db1bc..96c36a39dd88a 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.mdx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
@@ -1,11 +1,12 @@
 ---
 id: sharedUX/Components/SolutionToolbarButton
-slug: /shared-ux/components/solution_toolbar/button/button
+slug: /shared-ux/components/toolbar/solution_toolbar/button/primary
 title: Solution Toolbar Button
-summary: An opinionated implementation of the toolbar extracted to just the button. 
+summary: An opinionated implementation of the toolbar extracted to just the button.
 tags: ['shared-ux', 'component']
 date: 2022-02-17
 ---
 
 > This documentation is in-progress.
-This button is a piece of the solution toolbar component. This button can have primary styling or text styling and requires a label. The primary button builds off of this button component.
\ No newline at end of file
+
+This button is a piece of the solution toolbar component. This button has primary styling and requires a label.
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
similarity index 74%
rename from src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx
rename to src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
index a59bf317fd7ad..e0a7705c665f4 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.stories.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import { Props, SolutionToolbarButton } from './button';
-import mdx from './button.mdx';
+import { SolutionToolbarButton } from './primary';
+import mdx from './primary.mdx';
 
 export default {
   title: 'Solution Toolbar Button',
@@ -20,6 +20,6 @@ export default {
   },
 };
 
-export const ConnectedComponent = ({ label }: Props) => {
-  return <SolutionToolbarButton label={label} />;
+export const Component = () => {
+  return <SolutionToolbarButton label={'Primary Action'} iconType="apps"/>;
 };
diff --git a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
similarity index 83%
rename from src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx
rename to src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
index b0de228f66283..6b665004441ed 100644
--- a/src/plugins/shared_ux/public/components/solution_toolbar_button/button/button.test.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
@@ -8,10 +8,10 @@
 
 import { mount as enzymeMount, ReactWrapper } from 'enzyme';
 import React from 'react';
-import { ServicesProvider, SharedUXServices } from '../../../services';
-import { servicesFactory } from '../../../services/mocks';
+import { ServicesProvider, SharedUXServices } from '../../../../services';
+import { servicesFactory } from '../../../../services/mocks';
 
-import { SolutionToolbarButton } from './button';
+import { SolutionToolbarButton } from './primary';
 
 describe('<SolutionToolbarButton />', () => {
   let services: SharedUXServices;
diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx
new file mode 100644
index 0000000000000..a70085bc6c1e0
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiButton } from '@elastic/eui';
+import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
+
+
+export interface Props
+  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
+  label: string;
+}
+// public/components/toolbar/solution_toolbar/button/primary.tsx
+
+export const SolutionToolbarButton = ({
+  label,
+  ...rest
+}: Props) => {
+
+  return (
+    <EuiButton
+      size="m"
+      color="primary"
+      fill={true}
+      {...rest}
+    >
+      {label}
+    </EuiButton>
+  );
+};

From a28f87083b00bf08449a8edce39d6a6e8366b7a7 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 22 Feb 2022 16:04:43 -0700
Subject: [PATCH 06/10] import fix

---
 src/plugins/shared_ux/public/components/index.ts         | 2 +-
 src/plugins/shared_ux/public/components/toolbar/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index 831f7908db32f..0032ee555b5fc 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -20,7 +20,7 @@ export const LazyExitFullScreenButton = React.lazy(() =>
 );
 
 export const LazySolutionToolbarButton = React.lazy(() =>
-  import('./toolbar').then(({ SolutionToolbarButton }) => ({
+  import('./toolbar/index').then(({ SolutionToolbarButton }) => ({
     default: SolutionToolbarButton,
   }))
 );
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index 8a1dd723e4661..de15e73eaadeb 100644
--- a/src/plugins/shared_ux/public/components/toolbar/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { SolutionToolbarButton } from './solution_toolbar/button';
+export { SolutionToolbarButton } from './solution_toolbar/button/primary';

From bb2043ded919e67ee47a4adadd9f8c5dea000d26 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 23 Feb 2022 08:59:50 -0700
Subject: [PATCH 07/10] linting and snapshot addition

---
 .../__snapshots__/primary.test.tsx.snap       | 63 +++++++++++++++++++
 .../button/primary.stories.tsx                |  2 +-
 .../solution_toolbar/button/primary.tsx       | 18 +-----
 3 files changed, 67 insertions(+), 16 deletions(-)
 create mode 100644 src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap

diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap
new file mode 100644
index 0000000000000..045c08b18aa10
--- /dev/null
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SolutionToolbarButton /> is rendered 1`] = `
+<ServicesProvider
+  platform={
+    Object {
+      "setIsFullscreen": [MockFunction],
+    }
+  }
+>
+  <SolutionToolbarButton
+    label="test"
+  >
+    <EuiButton
+      color="primary"
+      fill={true}
+      size="m"
+    >
+      <EuiButtonDisplay
+        baseClassName="euiButton"
+        color="primary"
+        disabled={false}
+        element="button"
+        fill={true}
+        isDisabled={false}
+        size="m"
+        type="button"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--fill"
+          disabled={false}
+          style={
+            Object {
+              "minWidth": undefined,
+            }
+          }
+          type="button"
+        >
+          <EuiButtonContent
+            className="euiButton__content"
+            iconSide="left"
+            textProps={
+              Object {
+                "className": "euiButton__text",
+              }
+            }
+          >
+            <span
+              className="euiButtonContent euiButton__content"
+            >
+              <span
+                className="euiButton__text"
+              >
+                test
+              </span>
+            </span>
+          </EuiButtonContent>
+        </button>
+      </EuiButtonDisplay>
+    </EuiButton>
+  </SolutionToolbarButton>
+</ServicesProvider>
+`;
diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
index e0a7705c665f4..6c2529c3c7f59 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
@@ -21,5 +21,5 @@ export default {
 };
 
 export const Component = () => {
-  return <SolutionToolbarButton label={'Primary Action'} iconType="apps"/>;
+  return <SolutionToolbarButton label={'Primary Action'} iconType="apps" />;
 };
diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx
index a70085bc6c1e0..b99af852ed7e3 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.tsx
@@ -10,25 +10,13 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
 
-
-export interface Props
-  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
+export interface Props extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
   label: string;
 }
-// public/components/toolbar/solution_toolbar/button/primary.tsx
-
-export const SolutionToolbarButton = ({
-  label,
-  ...rest
-}: Props) => {
 
+export const SolutionToolbarButton = ({ label, ...rest }: Props) => {
   return (
-    <EuiButton
-      size="m"
-      color="primary"
-      fill={true}
-      {...rest}
-    >
+    <EuiButton size="m" color="primary" fill={true} {...rest}>
       {label}
     </EuiButton>
   );

From 53256d5353b307611296e70e146a914e307bca6b Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 23 Feb 2022 10:08:08 -0700
Subject: [PATCH 08/10] update tests and add more details to mdx

---
 .../components/toolbar/solution_toolbar/button/primary.mdx  | 2 +-
 .../toolbar/solution_toolbar/button/primary.test.tsx        | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
index 96c36a39dd88a..6693277b370ae 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.mdx
@@ -9,4 +9,4 @@ date: 2022-02-17
 
 > This documentation is in-progress.
 
-This button is a piece of the solution toolbar component. This button has primary styling and requires a label.
+This button is a part of the solution toolbar component. This button has primary styling and requires a label. OnClick handlers and icon types are supported as an extension of EuiButtonProps. Icons are always on the left of any labels within the button.
diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
index 6b665004441ed..c2e5fd1ce7ab8 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.test.tsx
@@ -32,4 +32,10 @@ describe('<SolutionToolbarButton />', () => {
 
     expect(component).toMatchSnapshot();
   });
+  test('it can be passed a functional onClick handler', () => {
+    const mockHandler = jest.fn();
+    const component = mount(<SolutionToolbarButton label="withOnClick" onClick={mockHandler} />);
+    component.simulate('click');
+    expect(mockHandler).toHaveBeenCalled();
+  });
 });

From 22e1033c97cc4cceccba3bbbccd42c648a748a6b Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Mon, 28 Feb 2022 09:39:18 -0700
Subject: [PATCH 09/10] update snapshot

---
 .../button/__snapshots__/primary.test.tsx.snap    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap
index 045c08b18aa10..1d7e3acb0b762 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/__snapshots__/primary.test.tsx.snap
@@ -2,6 +2,21 @@
 
 exports[`<SolutionToolbarButton /> is rendered 1`] = `
 <ServicesProvider
+  docLinks={
+    Object {
+      "dataViewsDocsLink": "dummy link",
+    }
+  }
+  editors={
+    Object {
+      "openDataViewEditor": [MockFunction],
+    }
+  }
+  permissions={
+    Object {
+      "canCreateNewDataView": true,
+    }
+  }
   platform={
     Object {
       "setIsFullscreen": [MockFunction],

From e2c59b3d528eb48fbaf7241f3b8576ad759c0fcd Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Thu, 3 Mar 2022 10:48:59 -0700
Subject: [PATCH 10/10] update controls and add comment

---
 .../shared_ux/public/components/index.ts      |  5 +++++
 .../button/primary.stories.tsx                | 20 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index b4858698aa466..c2f835b97ebde 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -32,6 +32,11 @@ export const LazySolutionToolbarButton = React.lazy(() =>
  */
 export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
 
+/**
+ * A `SolutionToolbarButton` component that is wrapped by the `withSuspense` HOC.  This component can
+ * be used directly by consumers and will load the `LazySolutionToolbarButton` component lazily with
+ * a predefined fallback and error boundary.
+ */
 export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
 
 /**
diff --git a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
index 6c2529c3c7f59..56c15ec7749af 100644
--- a/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/solution_toolbar/button/primary.stories.tsx
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Story } from '@storybook/react';
 import React from 'react';
 import { SolutionToolbarButton } from './primary';
 import mdx from './primary.mdx';
@@ -18,8 +19,23 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    iconType: {
+      control: {
+        type: 'radio',
+        expanded: true,
+        options: ['apps', 'logoGithub', 'folderCheck', 'documents'],
+      },
+    },
+  },
+};
+
+export const Component: Story<{
+  iconType: any;
+}> = ({ iconType }) => {
+  return <SolutionToolbarButton label={'Primary Action'} iconType={iconType} />;
 };
 
-export const Component = () => {
-  return <SolutionToolbarButton label={'Primary Action'} iconType="apps" />;
+Component.args = {
+  iconType: 'apps',
 };