From 6164988cf6a0e3a1b4ca5bb47476c998c13d5dbe Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Fri, 4 Mar 2022 07:54:53 -0700
Subject: [PATCH 01/14] deprecate

---
 .../public/components/solution_toolbar/items/button.tsx         | 2 ++
 .../public/components/solution_toolbar/items/index.ts           | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
index ee1bbd64b5f871..df27027da6548f 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
@@ -12,6 +12,7 @@ import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/butt
 
 import './button.scss';
 
+/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
 export interface Props
   extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
   label: string;
@@ -19,6 +20,7 @@ export interface Props
   isDarkModeEnabled?: boolean;
 }
 
+/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
 export const SolutionToolbarButton = ({ label, primary, className, ...rest }: Props) => (
   <EuiButton
     {...rest}
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
index 6076dbf8cf1235..bac001dc8dfa0a 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
+/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
 export { SolutionToolbarButton } from './button';
+
 export { SolutionToolbarPopover } from './popover';
 export { AddFromLibraryButton } from './add_from_library';
 export type { QuickButtonProps } from './quick_group';

From cd0b90fff9a31b82a79beaf2ce5946a8087e7968 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 9 Mar 2022 08:22:37 -0700
Subject: [PATCH 02/14] replace the solution toolbar buttons in presentation
 utils

---
 src/plugins/presentation_util/kibana.json     | 15 ++++++--
 .../solution_toolbar/items/button.scss        | 12 -------
 .../solution_toolbar/items/button.tsx         | 34 -------------------
 .../solution_toolbar/items/index.ts           |  3 --
 .../solution_toolbar/items/popover.tsx        |  8 +++--
 src/plugins/presentation_util/tsconfig.json   |  3 +-
 .../shared_ux/public/components/index.ts      |  8 +++++
 .../public/components/toolbar/index.ts        |  2 +-
 src/plugins/shared_ux/public/index.ts         |  1 +
 9 files changed, 29 insertions(+), 57 deletions(-)
 delete mode 100644 src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
 delete mode 100644 src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx

diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 6c8d38a5f8a1e9..0562d0e9d9ec50 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -9,7 +9,16 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "extraPublicDirs": ["common/lib"],
-  "requiredPlugins": ["savedObjects", "kibanaReact", "embeddable", "expressions", "dataViews"],
+  "extraPublicDirs": [
+    "common/lib"
+  ],
+  "requiredPlugins": [
+    "savedObjects",
+    "kibanaReact",
+    "embeddable",
+    "expressions",
+    "dataViews",
+    "shared-ux"
+  ],
   "optionalPlugins": []
-}
+}
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
deleted file mode 100644
index 4283813f1d0b7c..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/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/presentation_util/public/components/solution_toolbar/items/button.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
deleted file mode 100644
index df27027da6548f..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
+++ /dev/null
@@ -1,34 +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 } from '@elastic/eui';
-import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
-
-import './button.scss';
-
-/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
-export interface Props
-  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
-  label: string;
-  primary?: boolean;
-  isDarkModeEnabled?: boolean;
-}
-
-/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
-export const SolutionToolbarButton = ({ label, primary, className, ...rest }: Props) => (
-  <EuiButton
-    {...rest}
-    size="m"
-    color={primary ? 'primary' : 'text'}
-    className={`solutionToolbarButton ${className}`}
-    fill={primary}
-  >
-    {label}
-  </EuiButton>
-);
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
index bac001dc8dfa0a..b10fdc7dfffff4 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
@@ -6,9 +6,6 @@
  * Side Public License, v 1.
  */
 
-/** @deprecated Use `SolutionToolbarButton` from `src/plugins/shared_ux/public`. */
-export { SolutionToolbarButton } from './button';
-
 export { SolutionToolbarPopover } from './popover';
 export { AddFromLibraryButton } from './add_from_library';
 export type { QuickButtonProps } from './quick_group';
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
index fea6bf41a16018..93022cc92c1ab7 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
@@ -9,10 +9,12 @@
 import React, { useState } from 'react';
 import { EuiPopover } from '@elastic/eui';
 import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
+import {
+  SolutionToolbarButton,
+  SolutionToolbarButtonProps as ButtonProps,
+} from '../../../../../shared_ux/public/index';
 
-import { SolutionToolbarButton, Props as ButtonProps } from './button';
-
-type AllowedButtonProps = Omit<ButtonProps, 'onClick' | 'fill'>;
+type AllowedButtonProps = Omit<typeof ButtonProps, 'onClick' | 'fill'>;
 type AllowedPopoverProps = Omit<
   EuiPopoverProps,
   'button' | 'isOpen' | 'closePopover' | 'anchorPosition'
diff --git a/src/plugins/presentation_util/tsconfig.json b/src/plugins/presentation_util/tsconfig.json
index 38f2cf3c14a122..f92386af596ae9 100644
--- a/src/plugins/presentation_util/tsconfig.json
+++ b/src/plugins/presentation_util/tsconfig.json
@@ -20,6 +20,7 @@
     { "path": "../saved_objects/tsconfig.json" },
     { "path": "../embeddable/tsconfig.json" },
     { "path": "../kibana_react/tsconfig.json" },
-    { "path": "../data/tsconfig.json" }
+    { "path": "../data/tsconfig.json" },
+    { "path": "../shared_ux/tsconfig.json" }
   ]
 }
diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index c2f835b97ebde7..d3fa007c27db7b 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -25,6 +25,12 @@ export const LazySolutionToolbarButton = React.lazy(() =>
   }))
 );
 
+export const LazySolutionToolbarButtonProps = React.lazy(() =>
+  import('./toolbar/index').then(({ Props }) => ({
+    default: SolutionToolbarButtonProps,
+  }))
+);
+
 /**
  * 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
@@ -39,6 +45,8 @@ export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
  */
 export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
 
+export const SolutionToolbarButtonProps = withSuspense(LazySolutionToolbarButtonProps);
+
 /**
  * The Lazily-loaded `NoDataViews` component.  Consumers should use `React.Suspennse` or the
  * `withSuspense` HOC to load this component.
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index de15e73eaadeb0..0064afb0cd188f 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/primary';
+export { SolutionToolbarButton, Props } from './solution_toolbar/button/primary';
diff --git a/src/plugins/shared_ux/public/index.ts b/src/plugins/shared_ux/public/index.ts
index a196a60db847b6..35b23b0e5bff5f 100755
--- a/src/plugins/shared_ux/public/index.ts
+++ b/src/plugins/shared_ux/public/index.ts
@@ -18,3 +18,4 @@ export function plugin() {
 export type { SharedUXPluginSetup, SharedUXPluginStart } from './types';
 export { ExitFullScreenButton, LazyExitFullScreenButton } from './components';
 export { NoDataViewsPage, LazyNoDataViewsPage } from './components';
+export { SolutionToolbarButton, SolutionToolbarButtonProps } from './components';

From 997b3796a5d63f120c1b2e03585f9b2e4e674d37 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 9 Mar 2022 08:47:04 -0700
Subject: [PATCH 03/14] fix imports for storybook to run

---
 .../items/add_from_library.tsx                |  4 +--
 .../solution_toolbar/items/index.ts           |  1 -
 .../items/primary_button.scss                 | 20 -------------
 .../solution_toolbar/items/primary_button.tsx | 29 -------------------
 .../solution_toolbar.stories.tsx              |  3 +-
 .../solution_toolbar/solution_toolbar.tsx     |  5 ++--
 .../public/components/toolbar/index.ts        |  3 +-
 7 files changed, 9 insertions(+), 56 deletions(-)
 delete mode 100644 src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss
 delete mode 100644 src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
index 0550de1d069fa0..f8ccf94427f704 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
@@ -8,11 +8,11 @@
 
 import React from 'react';
 import { ComponentStrings } from '../../../i18n/components';
-import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
+import { SolutionToolbarButton, SolutionToolbarButtonProps } from '../../../../../shared_ux/public';
 
 const { SolutionToolbar: strings } = ComponentStrings;
 
-export type Props = Omit<SolutionToolbarButtonProps, 'iconType' | 'label'>;
+export type Props = Omit<typeof SolutionToolbarButtonProps, 'iconType' | 'label'>;
 
 export const AddFromLibraryButton = ({ onClick, ...rest }: Props) => (
   <SolutionToolbarButton
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
index b10fdc7dfffff4..d72177860e8e55 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
@@ -10,5 +10,4 @@ export { SolutionToolbarPopover } from './popover';
 export { AddFromLibraryButton } from './add_from_library';
 export type { QuickButtonProps } from './quick_group';
 export { QuickButtonGroup } from './quick_group';
-export { PrimaryActionButton } from './primary_button';
 export { PrimaryActionPopover } from './primary_popover';
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss
deleted file mode 100644
index c3d89f430d70c4..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss
+++ /dev/null
@@ -1,20 +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.
- */
-
-// Temporary fix for lensApp icon not support ghost color
-.solutionToolbar__primaryButton--dark {
-  .euiIcon path {
-    fill: $euiColorInk;
-  }
-}
-
-.solutionToolbar__primaryButton--light {
-  .euiIcon path {
-    fill: $euiColorGhost;
-  }
-}
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx
deleted file mode 100644
index dcf16228ac63b7..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx
+++ /dev/null
@@ -1,29 +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 { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
-
-import './primary_button.scss';
-
-export interface Props extends Omit<SolutionToolbarButtonProps, 'primary'> {
-  isDarkModeEnabled?: boolean;
-}
-
-export const PrimaryActionButton = ({ isDarkModeEnabled, ...props }: Props) => (
-  <SolutionToolbarButton
-    primary={true}
-    className={`solutionToolbar__primaryButton ${
-      isDarkModeEnabled
-        ? 'solutionToolbar__primaryButton--dark'
-        : 'solutionToolbar__primaryButton--light'
-    }`}
-    {...props}
-  />
-);
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
index 3a04a4c974538b..76db5d1078ffb3 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
@@ -11,9 +11,10 @@ import { Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { EuiContextMenu } from '@elastic/eui';
 
+import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
 import { SolutionToolbar } from './solution_toolbar';
 import { SolutionToolbarPopover } from './items';
-import { AddFromLibraryButton, PrimaryActionButton, QuickButtonGroup } from './items';
+import { AddFromLibraryButton, QuickButtonGroup } from './items';
 
 const quickButtons = [
   {
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
index fa678dbdaae89f..6e410e22702923 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
@@ -8,12 +8,13 @@
 
 import React, { ReactElement } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { SolutionToolbarButton } from 'src/plugins/shared_ux/public';
+
+import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
 
 import {
   AddFromLibraryButton,
   QuickButtonGroup,
-  PrimaryActionButton,
-  SolutionToolbarButton,
   PrimaryActionPopover,
   SolutionToolbarPopover,
 } from './items';
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index 0064afb0cd188f..ea6ee4f9e8dcbf 100644
--- a/src/plugins/shared_ux/public/components/toolbar/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { SolutionToolbarButton, Props } from './solution_toolbar/button/primary';
+export type { Props } from './solution_toolbar/button/primary';
+export { SolutionToolbarButton } from './solution_toolbar/button/primary';

From c1755c7036a4a07280e157997aff522fcc5cbd4d Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 9 Mar 2022 09:39:24 -0700
Subject: [PATCH 04/14] fix errors

---
 src/plugins/presentation_util/kibana.json                   | 2 +-
 src/plugins/shared_ux/public/components/index.ts            | 2 +-
 src/plugins/shared_ux/public/components/toolbar/index.ts    | 6 ++++--
 .../components/toolbar/solution_toolbar/button/primary.tsx  | 5 +++--
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 0562d0e9d9ec50..98b1217eec6f38 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -18,7 +18,7 @@
     "embeddable",
     "expressions",
     "dataViews",
-    "shared-ux"
+    "sharedUx"
   ],
   "optionalPlugins": []
 }
\ No newline at end of file
diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index d3fa007c27db7b..c2b0e78239fb8b 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -26,7 +26,7 @@ export const LazySolutionToolbarButton = React.lazy(() =>
 );
 
 export const LazySolutionToolbarButtonProps = React.lazy(() =>
-  import('./toolbar/index').then(({ Props }) => ({
+  import('./toolbar/index').then(({ SolutionToolbarButtonProps }: any) => ({
     default: SolutionToolbarButtonProps,
   }))
 );
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index ea6ee4f9e8dcbf..23d79a70433ad5 100644
--- a/src/plugins/shared_ux/public/components/toolbar/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -6,5 +6,7 @@
  * Side Public License, v 1.
  */
 
-export type { Props } from './solution_toolbar/button/primary';
-export { SolutionToolbarButton } from './solution_toolbar/button/primary';
+export {
+  SolutionToolbarButton,
+  SolutionToolbarButtonProps,
+} from './solution_toolbar/button/primary';
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 b99af852ed7e3d..df7b1a686882e7 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,11 +10,12 @@ 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 SolutionToolbarButtonProps
+  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
   label: string;
 }
 
-export const SolutionToolbarButton = ({ label, ...rest }: Props) => {
+export const SolutionToolbarButton = ({ label, ...rest }: SolutionToolbarButtonProps) => {
   return (
     <EuiButton size="m" color="primary" fill={true} {...rest}>
       {label}

From 89594165530e29fa42047985e07e3c2e5cbb022e Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 9 Mar 2022 15:13:54 -0700
Subject: [PATCH 05/14] update requiredPlugins

---
 src/plugins/presentation_util/kibana.json        |  2 +-
 .../solution_toolbar/items/popover.tsx           | 16 +++++-----------
 .../solution_toolbar/solution_toolbar.tsx        |  6 ++++--
 src/plugins/shared_ux/public/components/index.ts | 10 +---------
 .../shared_ux/public/components/toolbar/index.ts |  6 ++----
 5 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 98b1217eec6f38..1c549da423e76f 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -18,7 +18,7 @@
     "embeddable",
     "expressions",
     "dataViews",
-    "sharedUx"
+    "sharedUX"
   ],
   "optionalPlugins": []
 }
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
index 93022cc92c1ab7..8d19733bd80927 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
@@ -7,12 +7,12 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover } from '@elastic/eui';
+import { EuiPopover, IconType } from '@elastic/eui';
 import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
 import {
   SolutionToolbarButton,
   SolutionToolbarButtonProps as ButtonProps,
-} from '../../../../../shared_ux/public/index';
+} from '../../../../../shared_ux/public';
 
 type AllowedButtonProps = Omit<typeof ButtonProps, 'onClick' | 'fill'>;
 type AllowedPopoverProps = Omit<
@@ -23,16 +23,10 @@ type AllowedPopoverProps = Omit<
 export type Props = AllowedButtonProps &
   AllowedPopoverProps & {
     children: (arg: { closePopover: () => void }) => React.ReactNode;
+    iconType: IconType;
   };
 
-export const SolutionToolbarPopover = ({
-  label,
-  iconType,
-  primary,
-  iconSide,
-  children,
-  ...popover
-}: Props) => {
+export const SolutionToolbarPopover = ({ iconType, children, ...popover }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onButtonClick = () => setIsOpen((status) => !status);
@@ -40,7 +34,7 @@ export const SolutionToolbarPopover = ({
 
   const button = (
     <SolutionToolbarButton
-      {...{ label, iconType, primary, iconSide }}
+      {...{ label, iconType }}
       onClick={onButtonClick}
       data-test-subj={popover['data-test-subj']}
     />
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
index 6e410e22702923..85d56ee705b43f 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
@@ -8,9 +8,11 @@
 
 import React, { ReactElement } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { SolutionToolbarButton } from 'src/plugins/shared_ux/public';
 
-import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
+import {
+  SolutionToolbarButton,
+  SolutionToolbarButton as PrimaryActionButton,
+} from '../../../../shared_ux/public';
 
 import {
   AddFromLibraryButton,
diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index c2b0e78239fb8b..aa6a4ce3a5594b 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -20,17 +20,11 @@ export const LazyExitFullScreenButton = React.lazy(() =>
 );
 
 export const LazySolutionToolbarButton = React.lazy(() =>
-  import('./toolbar/index').then(({ SolutionToolbarButton }) => ({
+  import('./toolbar').then(({ SolutionToolbarButton }) => ({
     default: SolutionToolbarButton,
   }))
 );
 
-export const LazySolutionToolbarButtonProps = React.lazy(() =>
-  import('./toolbar/index').then(({ SolutionToolbarButtonProps }: any) => ({
-    default: SolutionToolbarButtonProps,
-  }))
-);
-
 /**
  * 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
@@ -45,8 +39,6 @@ export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
  */
 export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
 
-export const SolutionToolbarButtonProps = withSuspense(LazySolutionToolbarButtonProps);
-
 /**
  * The Lazily-loaded `NoDataViews` component.  Consumers should use `React.Suspennse` or the
  * `withSuspense` HOC to load this component.
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index 23d79a70433ad5..29acb526e9904e 100644
--- a/src/plugins/shared_ux/public/components/toolbar/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -6,7 +6,5 @@
  * Side Public License, v 1.
  */
 
-export {
-  SolutionToolbarButton,
-  SolutionToolbarButtonProps,
-} from './solution_toolbar/button/primary';
+export { SolutionToolbarButton } from './solution_toolbar/button/primary';
+export type { SolutionToolbarButtonProps } from './solution_toolbar/button/primary';

From a78e943f38296990acd6deb8f09fb9905de5ab29 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Wed, 9 Mar 2022 15:54:44 -0700
Subject: [PATCH 06/14] props in public

---
 .../components/solution_toolbar/items/add_from_library.tsx  | 2 +-
 src/plugins/shared_ux/public/components/index.ts            | 2 ++
 src/plugins/shared_ux/public/index.ts                       | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
index f8ccf94427f704..6adad6d0f3d692 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
@@ -12,7 +12,7 @@ import { SolutionToolbarButton, SolutionToolbarButtonProps } from '../../../../.
 
 const { SolutionToolbar: strings } = ComponentStrings;
 
-export type Props = Omit<typeof SolutionToolbarButtonProps, 'iconType' | 'label'>;
+export type Props = Omit<SolutionToolbarButtonProps, 'iconType' | 'label'>;
 
 export const AddFromLibraryButton = ({ onClick, ...rest }: Props) => (
   <SolutionToolbarButton
diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index aa6a4ce3a5594b..c29d2d4daabde7 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -39,6 +39,8 @@ export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
  */
 export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
 
+export type { SolutionToolbarButtonProps } from './toolbar';
+
 /**
  * The Lazily-loaded `NoDataViews` component.  Consumers should use `React.Suspennse` or the
  * `withSuspense` HOC to load this component.
diff --git a/src/plugins/shared_ux/public/index.ts b/src/plugins/shared_ux/public/index.ts
index 35b23b0e5bff5f..68d537f13f3c88 100755
--- a/src/plugins/shared_ux/public/index.ts
+++ b/src/plugins/shared_ux/public/index.ts
@@ -18,4 +18,8 @@ export function plugin() {
 export type { SharedUXPluginSetup, SharedUXPluginStart } from './types';
 export { ExitFullScreenButton, LazyExitFullScreenButton } from './components';
 export { NoDataViewsPage, LazyNoDataViewsPage } from './components';
-export { SolutionToolbarButton, SolutionToolbarButtonProps } from './components';
+export {
+  SolutionToolbarButton,
+  LazySolutionToolbarButton,
+  type SolutionToolbarButtonProps,
+} from './components';

From d565815c484822ea34d3933b9fc803dd76834bca Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Thu, 10 Mar 2022 13:35:44 -0700
Subject: [PATCH 07/14] fix kibana json

---
 src/plugins/presentation_util/kibana.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 1c549da423e76f..98b1217eec6f38 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -18,7 +18,7 @@
     "embeddable",
     "expressions",
     "dataViews",
-    "sharedUX"
+    "sharedUx"
   ],
   "optionalPlugins": []
 }
\ No newline at end of file

From 18688d1ce59a0919d361b26baf46c194df93e00c Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Sun, 13 Mar 2022 20:08:08 -0600
Subject: [PATCH 08/14] clean up

---
 .../public/components/solution_toolbar/items/popover.tsx   | 5 +++--
 .../components/solution_toolbar/items/primary_popover.tsx  | 2 +-
 .../solution_toolbar/solution_toolbar.stories.tsx          | 7 +------
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
index 8d19733bd80927..0fd241c562fffa 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
@@ -14,7 +14,7 @@ import {
   SolutionToolbarButtonProps as ButtonProps,
 } from '../../../../../shared_ux/public';
 
-type AllowedButtonProps = Omit<typeof ButtonProps, 'onClick' | 'fill'>;
+type AllowedButtonProps = Omit<ButtonProps, 'onClick' | 'fill'>;
 type AllowedPopoverProps = Omit<
   EuiPopoverProps,
   'button' | 'isOpen' | 'closePopover' | 'anchorPosition'
@@ -22,11 +22,12 @@ type AllowedPopoverProps = Omit<
 
 export type Props = AllowedButtonProps &
   AllowedPopoverProps & {
+    label: string;
     children: (arg: { closePopover: () => void }) => React.ReactNode;
     iconType: IconType;
   };
 
-export const SolutionToolbarPopover = ({ iconType, children, ...popover }: Props) => {
+export const SolutionToolbarPopover = ({ label, iconType, children, ...popover }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onButtonClick = () => setIsOpen((status) => !status);
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
index 164d4c9b4a1a62..fc89faf2ef67aa 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
@@ -13,5 +13,5 @@ import { SolutionToolbarPopover, Props as SolutionToolbarPopoverProps } from './
 export type Props = Omit<SolutionToolbarPopoverProps, 'primary'>;
 
 export const PrimaryActionPopover = (props: Omit<SolutionToolbarPopoverProps, 'primary'>) => (
-  <SolutionToolbarPopover primary={true} {...props} />
+  <SolutionToolbarPopover {...props} />
 );
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
index 76db5d1078ffb3..92bbebea97f3fc 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
@@ -49,12 +49,7 @@ const primaryButtonConfigs = {
     <PrimaryActionButton label="Primary Action" iconType="apps" onClick={action('generic')} />
   ),
   Canvas: (
-    <SolutionToolbarPopover
-      label="Add element"
-      iconType="plusInCircle"
-      panelPaddingSize="none"
-      primary={true}
-    >
+    <SolutionToolbarPopover label="Add element" iconType="plusInCircle" panelPaddingSize="none">
       {() => (
         <EuiContextMenu
           initialPanelId={0}

From 52081d2d9323566f873765ac6bce55f03cf1f785 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Sun, 13 Mar 2022 20:25:05 -0600
Subject: [PATCH 09/14] remove deprecated from public index

---
 .../components/solution_toolbar/solution_toolbar.tsx       | 7 +------
 src/plugins/presentation_util/public/index.ts              | 2 --
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
index 8ecc9b63593d72..a80d4d21122d9b 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
@@ -14,12 +14,7 @@ import {
   SolutionToolbarButton as PrimaryActionButton,
 } from '../../../../shared_ux/public';
 
-import {
-  AddFromLibraryButton,
-  QuickButtonGroup,
-  PrimaryActionPopover,
-  SolutionToolbarPopover,
-} from './items';
+import { QuickButtonGroup, PrimaryActionPopover, SolutionToolbarPopover } from './items';
 
 import './solution_toolbar.scss';
 
diff --git a/src/plugins/presentation_util/public/index.ts b/src/plugins/presentation_util/public/index.ts
index 7148b9fb6c7ddd..13b0acc5a1f48c 100644
--- a/src/plugins/presentation_util/public/index.ts
+++ b/src/plugins/presentation_util/public/index.ts
@@ -52,11 +52,9 @@ export type { QuickButtonProps } from './components/solution_toolbar';
 
 export {
   AddFromLibraryButton,
-  PrimaryActionButton,
   PrimaryActionPopover,
   QuickButtonGroup,
   SolutionToolbar,
-  SolutionToolbarButton,
   SolutionToolbarPopover,
 } from './components/solution_toolbar';
 

From 46c79b003866fbb98c46f13df2a231242249dac1 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 15 Mar 2022 10:48:43 -0600
Subject: [PATCH 10/14] remove icon side

---
 .../public/control_group/embeddable/control_group_container.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
index 7393462caf0298..3931ef38a29c45 100644
--- a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
+++ b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
@@ -119,7 +119,6 @@ export class ControlGroupContainer extends Container<
         ownFocus
         label={ControlGroupStrings.getControlButtonTitle()}
         iconType="arrowDown"
-        iconSide="right"
         panelPaddingSize="none"
         data-test-subj="dashboardControlsMenuButton"
       >

From e414da28d3aaa07d8d5d93ec19032bdc39a7f233 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 15 Mar 2022 11:13:21 -0600
Subject: [PATCH 11/14] refactor

---
 .../dashboard/public/application/top_nav/dashboard_top_nav.tsx | 3 +--
 .../dashboard/public/application/top_nav/editor_menu.tsx       | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index e66525398b86ba..4df71d3bb9b153 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -48,12 +48,12 @@ import {
 import {
   AddFromLibraryButton,
   LazyLabsFlyout,
-  PrimaryActionButton,
   QuickButtonGroup,
   QuickButtonProps,
   SolutionToolbar,
   withSuspense,
 } from '../../../../presentation_util/public';
+import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -590,7 +590,6 @@ export function DashboardTopNav({
             {{
               primaryActionButton: (
                 <PrimaryActionButton
-                  isDarkModeEnabled={IS_DARK_THEME}
                   label={getCreateVisualizationButtonTitle()}
                   onClick={createNewVisType(lensAlias)}
                   iconType="lensApp"
diff --git a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
index 5fece7ff959ced..ccdf1fb0736a5d 100644
--- a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
@@ -242,7 +242,6 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
         defaultMessage: 'Select type',
       })}
       iconType="arrowDown"
-      iconSide="right"
       panelPaddingSize="none"
       data-test-subj="dashboardEditorMenuButton"
     >

From 17d8b8ea0fdbc5fdf565dcd3da2c92070584972e Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 15 Mar 2022 11:32:48 -0600
Subject: [PATCH 12/14] change tsconfig

---
 src/plugins/dashboard/kibana.json                      | 10 ++++++++--
 .../public/application/top_nav/dashboard_top_nav.tsx   |  4 ++--
 src/plugins/dashboard/tsconfig.json                    |  3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/plugins/dashboard/kibana.json b/src/plugins/dashboard/kibana.json
index 0130d4a5f81181..cac4ad98a72e7e 100644
--- a/src/plugins/dashboard/kibana.json
+++ b/src/plugins/dashboard/kibana.json
@@ -30,5 +30,11 @@
   ],
   "server": true,
   "ui": true,
-  "requiredBundles": ["home", "kibanaReact", "kibanaUtils", "presentationUtil"]
-}
+  "requiredBundles": [
+    "home",
+    "kibanaReact",
+    "kibanaUtils",
+    "presentationUtil",
+    "sharedUX"
+  ]
+}
\ No newline at end of file
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index 4df71d3bb9b153..8c3f0057d34a5d 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -53,7 +53,7 @@ import {
   SolutionToolbar,
   withSuspense,
 } from '../../../../presentation_util/public';
-import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
+import { SolutionToolbarButton } from '../../../../shared_ux/public';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -589,7 +589,7 @@ export function DashboardTopNav({
           <SolutionToolbar isDarkModeEnabled={IS_DARK_THEME}>
             {{
               primaryActionButton: (
-                <PrimaryActionButton
+                <SolutionToolbarButton
                   label={getCreateVisualizationButtonTitle()}
                   onClick={createNewVisType(lensAlias)}
                   iconType="lensApp"
diff --git a/src/plugins/dashboard/tsconfig.json b/src/plugins/dashboard/tsconfig.json
index 862bed9d667a01..a08a548d003cd2 100644
--- a/src/plugins/dashboard/tsconfig.json
+++ b/src/plugins/dashboard/tsconfig.json
@@ -29,6 +29,7 @@
     { "path": "../charts/tsconfig.json" },
     { "path": "../discover/tsconfig.json" },
     { "path": "../visualizations/tsconfig.json" },
-    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" }
+    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" },
+    { "path": "../shared_ux/tsconfig.json" }
   ]
 }

From d4e7ea9381178482ff0d5fab1a5194304ffb4909 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 15 Mar 2022 11:47:22 -0600
Subject: [PATCH 13/14] fix spelling

---
 src/plugins/presentation_util/kibana.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 98b1217eec6f38..1c549da423e76f 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -18,7 +18,7 @@
     "embeddable",
     "expressions",
     "dataViews",
-    "sharedUx"
+    "sharedUX"
   ],
   "optionalPlugins": []
 }
\ No newline at end of file

From ccdfdb54a695b85baff5c481ee74c6fbf259b5a2 Mon Sep 17 00:00:00 2001
From: rshen91 <rshen@elastic.co>
Date: Tue, 15 Mar 2022 12:26:48 -0600
Subject: [PATCH 14/14] remove icon side

---
 .../workpad_header/editor_menu/editor_menu.component.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
index e8f762f9731a19..3ed6505a13cd08 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
@@ -149,7 +149,6 @@ export const EditorMenu: FC<Props> = ({
       ownFocus
       label={strings.getEditorMenuButtonLabel()}
       iconType="arrowDown"
-      iconSide="right"
       panelPaddingSize="none"
       data-test-subj="canvasEditorMenuButton"
     >