Make toolbar_button a shared component (#88386)

src/plugins/kibana_react/public/index.ts

@@ -15,6 +15,7 @@ export * from './ui_settings';
 export * from './field_icon';
 export * from './field_button';
 export * from './table_list_view';
+export * from './toolbar_button';
 export * from './split_panel';
 export * from './react_router_navigate';
 export { ValidatedDualRange, Value } from './validated_range';

src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`font weights bold is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--bold kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`font weights normal is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`hasArrow is rendered 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`positions center is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton toolbarButton--groupCenter kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`positions left is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton toolbarButton--groupLeft kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`positions none is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`positions right is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton toolbarButton--groupRight kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`sizes m is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--normal kbnToolbarButton--m"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="m"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;
+
+exports[`sizes s is applied 1`] = `
+<EuiButton
+  className="kbnToolbarButton kbnToolbarButton--normal kbnToolbarButton--s"
+  color="text"
+  contentProps={
+    Object {
+      "className": "kbnToolbarButton__content",
+    }
+  }
+  data-test-subj=""
+  iconSide="right"
+  iconType="arrowDown"
+  onClick={[Function]}
+  size="s"
+  textProps={
+    Object {
+      "className": "kbnToolbarButton__text",
+    }
+  }
+/>
+`;

src/plugins/kibana_react/public/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
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+export * from './toolbar_button';

src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss

@@ -1,4 +1,4 @@
-.lnsToolbarButton {
+.kbnToolbarButton {
   line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
   background-color: $euiColorEmptyShade;
 
@@ -15,11 +15,11 @@
     pointer-events: initial;
   }
 
-  .lnsToolbarButton__text > svg {
+  .kbnToolbarButton__text > svg {
     margin-top: -1px; // Just some weird alignment issue when icon is the child not the `iconType`
   }
 
-  .lnsToolbarButton__text:empty {
+  .kbnToolbarButton__text:empty {
     margin: 0;
   }
 
@@ -27,34 +27,33 @@
   &[class*='fullWidth'] {
     text-align: left;
 
-    .lnsToolbarButton__content {
+    .kbnToolbarButton__content {
       justify-content: space-between;
     }
   }
-
 }
 
-.lnsToolbarButton--groupLeft {
+.kbnToolbarButton--groupLeft {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.lnsToolbarButton--groupCenter {
+.kbnToolbarButton--groupCenter {
   border-radius: 0;
   border-left: none;
 }
 
-.lnsToolbarButton--groupRight {
+.kbnToolbarButton--groupRight {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: none;
 }
 
-.lnsToolbarButton--bold {
+.kbnToolbarButton--bold {
   font-weight: $euiFontWeightBold;
 }
 
-.lnsToolbarButton--s {
+.kbnToolbarButton--s {
   box-shadow: none !important; // sass-lint:disable-line no-important
   font-size: $euiFontSizeS;
 }

src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ToolbarButton, POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES } from './toolbar_button';
+
+const noop = () => {};
+
+describe('sizes', () => {
+  TOOLBAR_BUTTON_SIZES.forEach((size) => {
+    test(`${size} is applied`, () => {
+      const component = shallow(<ToolbarButton onClick={noop} size={size} />);
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
+
+describe('positions', () => {
+  POSITIONS.forEach((position) => {
+    test(`${position} is applied`, () => {
+      const component = shallow(<ToolbarButton onClick={noop} groupPosition={position} />);
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
+
+describe('font weights', () => {
+  WEIGHTS.forEach((weight) => {
+    test(`${weight} is applied`, () => {
+      const component = shallow(<ToolbarButton onClick={noop} fontWeight={weight} />);
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
+
+describe('hasArrow', () => {
+  it('is rendered', () => {
+    const component = shallow(<ToolbarButton onClick={noop} hasArrow />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx

@@ -1,7 +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;
- * you may not use this file except in compliance with the Elastic License.
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
  */
 
 import './toolbar_button.scss';
@@ -11,16 +13,24 @@ import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui';
 
 const groupPositionToClassMap = {
   none: null,
-  left: 'lnsToolbarButton--groupLeft',
-  center: 'lnsToolbarButton--groupCenter',
-  right: 'lnsToolbarButton--groupRight',
+  left: 'toolbarButton--groupLeft',
+  center: 'toolbarButton--groupCenter',
+  right: 'toolbarButton--groupRight',
 };
 
+type ButtonPositions = keyof typeof groupPositionToClassMap;
+export const POSITIONS = Object.keys(groupPositionToClassMap) as ButtonPositions[];
+
+type Weights = 'normal' | 'bold';
+export const WEIGHTS = ['normal', 'bold'] as Weights[];
+
+export const TOOLBAR_BUTTON_SIZES: Array<EuiButtonProps['size']> = ['s', 'm'];
+
 export type ToolbarButtonProps = PropsOf<typeof EuiButton> & {
   /**
    * Determines prominence
    */
-  fontWeight?: 'normal' | 'bold';
+  fontWeight?: Weights;
   /**
    * Smaller buttons also remove extra shadow for less prominence
    */
@@ -32,7 +42,7 @@ export type ToolbarButtonProps = PropsOf<typeof EuiButton> & {
   /**
    * Adjusts the borders for groupings
    */
-  groupPosition?: 'none' | 'left' | 'center' | 'right';
+  groupPosition?: ButtonPositions;
   dataTestSubj?: string;
 };
 
@@ -47,9 +57,9 @@ export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
   ...rest
 }) => {
   const classes = classNames(
-    'lnsToolbarButton',
+    'kbnToolbarButton',
     groupPositionToClassMap[groupPosition],
-    [`lnsToolbarButton--${fontWeight}`, `lnsToolbarButton--${size}`],
+    [`kbnToolbarButton--${fontWeight}`, `kbnToolbarButton--${size}`],
     className
   );
   return (
@@ -60,10 +70,10 @@ export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
       iconType={hasArrow ? 'arrowDown' : ''}
       color="text"
       contentProps={{
-        className: 'lnsToolbarButton__content',
+        className: 'kbnToolbarButton__content',
       }}
       textProps={{
-        className: 'lnsToolbarButton__text',
+        className: 'kbnToolbarButton__text',
       }}
       {...rest}
       size={size}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx

@@ -9,7 +9,7 @@ import { EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NativeRenderer } from '../../../native_renderer';
 import { Visualization, VisualizationLayerWidgetProps } from '../../../types';
-import { ToolbarButton } from '../../../shared_components';
+import { ToolbarButton } from '../../../../../../../src/plugins/kibana_react/public';
 
 export function LayerSettings({
   layerId,

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -24,7 +24,7 @@ import { Visualization, FramePublicAPI, Datasource } from '../../../types';
 import { Action } from '../state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
-import { ToolbarButton } from '../../../shared_components';
+import { ToolbarButton } from '../../../../../../../src/plugins/kibana_react/public';
 
 interface VisualizationSelection {
   visualizationId: string;

x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx

@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 import { EuiPopover, EuiPopoverTitle, EuiSelectable, EuiSelectableProps } from '@elastic/eui';
 import { IndexPatternRef } from './types';
 import { trackUiEvent } from '../lens_ui_telemetry';
-import { ToolbarButtonProps, ToolbarButton } from '../shared_components';
+import { ToolbarButton, ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public';
 
 export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
   label: string;

x-pack/plugins/lens/public/shared_components/index.ts

@@ -6,6 +6,5 @@
 
 export * from './empty_placeholder';
 export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
-export { ToolbarButtonProps, ToolbarButton } from './toolbar_button';
 export { LegendSettingsPopover } from './legend_settings_popover';
 export { PalettePicker } from './palette_picker';

x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx

@@ -6,8 +6,8 @@
 
 import React, { useState } from 'react';
 import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui';
-import { ToolbarButton, ToolbarButtonProps } from './toolbar_button';
 import { EuiIconLegend } from '../assets/legend';
+import { ToolbarButton, ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public';
 
 const typeToIconMap: { [type: string]: string | IconType } = {
   legend: EuiIconLegend as IconType,

x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx

@@ -16,12 +16,13 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { LayerConfig, AxesSettingsConfig } from './types';
-import { ToolbarPopover, ToolbarButtonProps } from '../shared_components';
+import { ToolbarPopover } from '../shared_components';
 import { isHorizontalChart } from './state_helpers';
 import { EuiIconAxisBottom } from '../assets/axis_bottom';
 import { EuiIconAxisLeft } from '../assets/axis_left';
 import { EuiIconAxisRight } from '../assets/axis_right';
 import { EuiIconAxisTop } from '../assets/axis_top';
+import { ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public';
 
 type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
 export interface AxisSettingsPopoverProps {