Suggestions

src/plugins/presentation_util/public/components/panel_toolbar/index.ts → src/plugins/presentation_util/public/components/solution_toolbar/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { PanelToolbar } from './panel_toolbar';
+export { SolutionToolbar } from './solution_toolbar';

src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 { ComponentStrings } from '../../../i18n/components';
+import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
+
+const { SolutionToolbar: strings } = ComponentStrings;
+
+export type Props = Pick<SolutionToolbarButtonProps, 'onClick'>;
+
+export const AddFromLibraryButton = ({ onClick }: Props) => (
+  <SolutionToolbarButton
+    iconType="folderOpen"
+    onClick={onClick}
+    label={strings.getLibraryButtonLabel()}
+  />
+);

src/plugins/presentation_util/public/components/panel_toolbar/panel_toolbar.scss → src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss

@@ -1,19 +1,9 @@
-.panelToolbar {
-  padding: 0 $euiSizeS $euiSizeS;
-  flex-grow: 0;
-}
 
-.panelToolbarButton {
+
+.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
 }
-
-.panelToolbar__quickButtonGroup {
-  .euiButtonGroup__buttons {
-    border-radius: $euiSizeXS;
-    background-color: $euiColorEmptyShade;
-  }
-}

src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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';
+
+export interface Props extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
+  label: string;
+  primary?: boolean;
+}
+
+export const SolutionToolbarButton = ({ label, primary, ...rest }: Props) => (
+  <EuiButton
+    {...rest}
+    size="s"
+    color={primary ? 'primary' : 'text'}
+    className="solutionToolbarButton"
+    fill={primary}
+  >
+    {label}
+  </EuiButton>
+);

src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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';
+export { SolutionToolbarPopover } from './popover';
+export { AddFromLibraryButton } from './add_from_library';
+export { QuickButton, QuickButtonGroup } from './quick_group';
+export { PrimaryActionButton, PrimaryActionPopover } from './primary';

src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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, { useState } from 'react';
+import { EuiPopover } from '@elastic/eui';
+import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
+
+import { SolutionToolbarButton, Props as ButtonProps } from './button';
+
+type AllowedButtonProps = Omit<ButtonProps, 'onClick' | 'fill'>;
+type AllowedPopoverProps = Omit<
+  EuiPopoverProps,
+  'button' | 'isOpen' | 'closePopover' | 'anchorPosition'
+>;
+
+export type Props = AllowedButtonProps & AllowedPopoverProps;
+
+export const SolutionToolbarPopover = ({ label, iconType, primary, ...popover }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onButtonClick = () => setIsOpen((status) => !status);
+  const closePopover = () => setIsOpen(false);
+
+  const button = (
+    <SolutionToolbarButton {...{ label, iconType, primary }} onClick={onButtonClick} />
+  );
+
+  return (
+    <EuiPopover anchorPosition="downLeft" {...{ isOpen, button, closePopover }} {...popover} />
+  );
+};

src/plugins/presentation_util/public/components/solution_toolbar/items/primary.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { SolutionToolbarPopover, Props as SolutionToolbarPopoverProps } from './popover';
+
+export const PrimaryActionPopover = (props: Omit<SolutionToolbarPopoverProps, 'primary'>) => (
+  <SolutionToolbarPopover primary={true} {...props} />
+);
+
+export const PrimaryActionButton = (props: Omit<SolutionToolbarButtonProps, 'primary'>) => (
+  <SolutionToolbarButton primary={true} {...props} />
+);

src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 { SolutionToolbarPopover, Props as SolutionToolbarPopoverProps } from './popover';
+
+export type Props = Omit<SolutionToolbarPopoverProps, 'primary'>;
+
+export const PrimaryActionPopover = (props: Props) => (
+  <SolutionToolbarPopover primary={true} {...props} />
+);

src/plugins/presentation_util/public/components/solution_toolbar/items/quick_group.scss

@@ -0,0 +1,8 @@
+.quickButtonGroup {
+  .euiButtonGroup__buttons {
+    border-radius: $euiSizeXS;
+  }
+  .quickButtonGroup__button {
+    background-color: $euiColorEmptyShade;
+  }
+}

src/plugins/presentation_util/public/components/solution_toolbar/items/quick_group.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { EuiButtonGroup, htmlIdGenerator, EuiButtonGroupOptionProps } from '@elastic/eui';
+import { ComponentStrings } from '../../../i18n/components';
+
+const { QuickButtonGroup: strings } = ComponentStrings;
+
+import './quick_group.scss';
+
+export interface QuickButton extends Pick<EuiButtonGroupOptionProps, 'iconType'> {
+  createType: string;
+  onClick: () => void;
+}
+
+export interface Props {
+  buttons: QuickButton[];
+}
+
+type Option = EuiButtonGroupOptionProps & Omit<QuickButton, 'createType'>;
+
+export const QuickButtonGroup = ({ buttons }: Props) => {
+  const buttonGroupOptions: Option[] = buttons.map((button: QuickButton, index) => {
+    const { createType: label, ...rest } = button;
+    const title = strings.getAriaButtonLabel(label);
+
+    return {
+      ...rest,
+      'aria-label': title,
+      className: 'quickButtonGroup__button',
+      id: `${htmlIdGenerator()()}${index}`,
+      label,
+      title,
+    };
+  });
+
+  const onChangeIconsMulti = (optionId: string) => {
+    buttonGroupOptions.find((x) => x.id === optionId)?.onClick();
+  };
+
+  return (
+    <EuiButtonGroup
+      className="quickButtonGroup"
+      legend={strings.getLegend()}
+      options={buttonGroupOptions}
+      onChange={onChangeIconsMulti}
+      type="multi"
+      isIconOnly
+    />
+  );
+};

src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.scss

@@ -0,0 +1,6 @@
+.SolutionToolbar {
+  padding: 0 $euiSizeS $euiSizeS;
+  flex-grow: 0;
+}
+
+