[shared-ux] Migrate solution toolbar quick group buttons as icon button group component (elastic#126297)

Author: rshen91

src/plugins/shared_ux/public/components/index.ts

@@ -19,9 +19,9 @@ export const LazyExitFullScreenButton = React.lazy(() =>
   }))
 );
 
-export const LazySolutionToolbarButton = React.lazy(() =>
-  import('./toolbar/index').then(({ SolutionToolbarButton }) => ({
-    default: SolutionToolbarButton,
+export const LazyToolbarButton = React.lazy(() =>
+  import('./toolbar/index').then(({ ToolbarButton }) => ({
+    default: ToolbarButton,
   }))
 );
 
@@ -35,11 +35,11 @@ export const RedirectAppLinks = React.lazy(() => import('./redirect_app_links'))
 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 `ToolbarButton` component that is wrapped by the `withSuspense` HOC.  This component can
+ * be used directly by consumers and will load the `LazyToolbarButton` component lazily with
  * a predefined fallback and error boundary.
  */
-export const SolutionToolbarButton = withSuspense(LazySolutionToolbarButton);
+export const ToolbarButton = withSuspense(LazyToolbarButton);
 
 /**
  * The Lazily-loaded `NoDataViews` component.  Consumers should use `React.Suspennse` or the
@@ -57,3 +57,18 @@ export const LazyNoDataViewsPage = React.lazy(() =>
  * a predefined fallback and error boundary.
  */
 export const NoDataViewsPage = withSuspense(LazyNoDataViewsPage);
+
+/**
+ * The Lazily-loaded `IconButtonGroup` component.  Consumers should use `React.Suspennse` or the
+ * `withSuspense` HOC to load this component.
+ */
+export const LazyIconButtonGroup = React.lazy(() =>
+  import('./toolbar/index').then(({ IconButtonGroup }) => ({
+    default: IconButtonGroup,
+  }))
+);
+
+/**
+ * The IconButtonGroup component that is wrapped by the `withSuspence` HOC.
+ */
+export const IconButtonGroup = withSuspense(LazyIconButtonGroup);

src/plugins/shared_ux/public/components/toolbar/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap

@@ -0,0 +1,20 @@
+---
+id: sharedUX/Components/Toolbar/Icon_Button_Group
+slug: /shared-ux/components/toolbar/icon_button_group
+title: Toolbar Icon Button Group
+summary: 'An array of icon-only buttons for use in a toolbar'
+tags: ['shared-ux', 'component']
+date: 2022-02-23
+---
+
+> This documentation is in-progress.
+
+This component requires a prop that consists of a series of buttons that can then be displayed based on the number of buttons desired. An example of a button that can be part of an array of icon buttons is included below:
+
+```
+  {
+    label: 'Text',
+    onClick: clickHandler,
+    iconType: 'visText',
+  }
+```

src/plugins/shared_ux/public/components/toolbar/buttons/icon_button_group/icon_button_group.mdx

@@ -0,0 +1,70 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React from 'react';
+import { IconButtonGroup } from './icon_button_group';
+import mdx from './icon_button_group.mdx';
+
+export default {
+  title: 'Toolbar/Icon Button Group',
+  description: 'A collection of buttons that is a part of a toolbar.',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+const quickButtons = [
+  {
+    label: 'Text',
+    onClick: action('onTextClick'),
+    iconType: 'visText',
+    title: 'Text as markdown',
+  },
+  {
+    label: 'Control',
+    onClick: action('onControlClick'),
+    iconType: 'controlsHorizontal',
+  },
+  {
+    label: 'Link',
+    onClick: action('onLinkClick'),
+    iconType: 'link',
+  },
+  {
+    label: 'Image',
+    onClick: action('onImageClick'),
+    iconType: 'image',
+  },
+  {
+    label: 'Markup',
+    onClick: action('onMarkupClick'),
+    iconType: 'visVega',
+  },
+];
+
+export const ConnectedComponent: Story<{ buttonCount: number }> = ({ buttonCount }) => {
+  return (
+    <IconButtonGroup legend="Example icon group" buttons={quickButtons.slice(0, buttonCount)} />
+  );
+};
+
+ConnectedComponent.argTypes = {
+  buttonCount: {
+    defaultValue: 2,
+    control: {
+      type: 'number',
+      min: 1,
+      max: 5,
+      step: 1,
+    },
+  },
+};

src/plugins/shared_ux/public/components/toolbar/buttons/icon_button_group/icon_button_group.stories.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 { UseEuiTheme } from '@elastic/eui';
+
+export const IconButtonGroupStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    button: {
+      '&.euiButtonGroupButton': {
+        backgroundColor: euiTheme.colors.emptyShade,
+        border: `${euiTheme.border.thin} !important`,
+        '&:first-of-type': {
+          borderTopLeftRadius: `${euiTheme.border.radius.medium} !important`,
+          borderBottomLeftRadius: `${euiTheme.border.radius.medium} !important`,
+        },
+        '&:last-of-type': {
+          borderTopRightRadius: `${euiTheme.border.radius.medium} !important`,
+          borderBottomRightRadius: `${euiTheme.border.radius.medium} !important`,
+        },
+      },
+    },
+  };
+};