Make toolbar_button a shared component (#88386) (#89240)

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/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';

x-pack/plugins/lens/public/shared_components/toolbar_button.scss → 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,46 +15,45 @@
     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;
   }
 
   // Toolbar buttons don't look good with centered text when fullWidth
   &[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();
+  });
+});