diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index c99da5e9b36b83..cbb60bba478618 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/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';
diff --git a/src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap b/src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap
new file mode 100644
index 00000000000000..294be46398e8a2
--- /dev/null
+++ b/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`] = `
+
+`;
+
+exports[`font weights normal is applied 1`] = `
+
+`;
+
+exports[`hasArrow is rendered 1`] = `
+
+`;
+
+exports[`positions center is applied 1`] = `
+
+`;
+
+exports[`positions left is applied 1`] = `
+
+`;
+
+exports[`positions none is applied 1`] = `
+
+`;
+
+exports[`positions right is applied 1`] = `
+
+`;
+
+exports[`sizes m is applied 1`] = `
+
+`;
+
+exports[`sizes s is applied 1`] = `
+
+`;
diff --git a/src/plugins/kibana_react/public/toolbar_button/index.ts b/src/plugins/kibana_react/public/toolbar_button/index.ts
new file mode 100644
index 00000000000000..f952741291b684
--- /dev/null
+++ b/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';
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_button.scss b/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss
similarity index 81%
rename from x-pack/plugins/lens/public/shared_components/toolbar_button.scss
rename to src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss
index 61b02f47678c3d..f290b3c7c5f892 100644
--- a/x-pack/plugins/lens/public/shared_components/toolbar_button.scss
+++ b/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;
}
diff --git a/src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx b/src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx
new file mode 100644
index 00000000000000..3d4ce29ffa5e9b
--- /dev/null
+++ b/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();
+ expect(component).toMatchSnapshot();
+ });
+ });
+});
+
+describe('positions', () => {
+ POSITIONS.forEach((position) => {
+ test(`${position} is applied`, () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+ });
+});
+
+describe('font weights', () => {
+ WEIGHTS.forEach((weight) => {
+ test(`${weight} is applied`, () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+ });
+});
+
+describe('hasArrow', () => {
+ it('is rendered', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_button.tsx b/src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx
similarity index 61%
rename from x-pack/plugins/lens/public/shared_components/toolbar_button.tsx
rename to src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx
index 2ba227e6ff84f4..388a11992268eb 100644
--- a/x-pack/plugins/lens/public/shared_components/toolbar_button.tsx
+++ b/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 = ['s', 'm'];
+
export type ToolbarButtonProps = PropsOf & {
/**
* Determines prominence
*/
- fontWeight?: 'normal' | 'bold';
+ fontWeight?: Weights;
/**
* Smaller buttons also remove extra shadow for less prominence
*/
@@ -32,7 +42,7 @@ export type ToolbarButtonProps = PropsOf & {
/**
* Adjusts the borders for groupings
*/
- groupPosition?: 'none' | 'left' | 'center' | 'right';
+ groupPosition?: ButtonPositions;
dataTestSubj?: string;
};
@@ -47,9 +57,9 @@ export const ToolbarButton: React.FunctionComponent = ({
...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 = ({
iconType={hasArrow ? 'arrowDown' : ''}
color="text"
contentProps={{
- className: 'lnsToolbarButton__content',
+ className: 'kbnToolbarButton__content',
}}
textProps={{
- className: 'lnsToolbarButton__text',
+ className: 'kbnToolbarButton__text',
}}
{...rest}
size={size}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx
index bc537e5a7d689f..d3ca72a02940da 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx
+++ b/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,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
index 659626149aef26..474720e6389399 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
+++ b/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;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx
index 25cb34d19beb8d..f2d72079c21851 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx
+++ b/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;
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
index 622bf5397c9356..c4e79c3f1bcb87 100644
--- a/x-pack/plugins/lens/public/shared_components/index.ts
+++ b/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';
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
index cf2268c6eadf2e..adc6d082f514f9 100644
--- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
+++ b/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,
diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
index 45ec7098aa6395..931e62ea1d13f8 100644
--- a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
+++ b/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 {