Suggestions

[clintandrewhall]

Thoughts?

[cqliu1]

I like this pattern a lot better than how I had it. Essentially consuming the component should look something like this right? Does that mean if you want to use SolutionToolbar, you also have to import the pre-styled children components, i.e. PrimaryActionButton, QuickButtonGroup, etc?

const quickButtons = [
    {
      iconType: 'visText',
      createType: i18n.translate('dashboard.panelToolbar.markdownQuickButtonLabel', {
        defaultMessage: 'Markdown',
      }),
      onClick: createNewVisType('markdown'),
    },
    {
      iconType: 'controlsHorizontal',
      createType: i18n.translate('dashboard.panelToolbar.markdownQuickButtonLabel', {
        defaultMessage: 'Input control',
      }),
      onClick: createNewVisType('input_control_vis'),
    },
  ];

return ( 
  <SolutionToolbar>
    {{
      primaryActionButton: (
        <PrimaryActionButton
          label={i18n.translate('dashboard.panelToolbar.addPanelButtonLabel', {
            defaultMessage: 'Create panel',
          })}
          onClick={createNew}
          iconType="plusInCircleFilled"
          data-test-subj="addVisualizationButton"
        />
      ),
      quickButtonGroup: <QuickButtonGroup buttons={quickButtons} />,
      addFromLibraryButton: <AddFromLibraryButton onClick={addFromLibrary} />,
    }}
  </SolutionToolbar>
);