From fb536f54286a20766a87a88698ca038716e767cb Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 25 Jan 2021 14:14:47 -0800 Subject: [PATCH] Make toolbar_button a shared component (#88386) --- src/plugins/kibana_react/public/index.ts | 1 + .../toolbar_button.test.tsx.snap | 199 ++++++++++++++++++ .../public/toolbar_button/index.ts | 9 + .../toolbar_button}/toolbar_button.scss | 19 +- .../toolbar_button/toolbar_button.test.tsx | 47 +++++ .../public/toolbar_button}/toolbar_button.tsx | 32 ++- .../config_panel/layer_settings.tsx | 2 +- .../workspace_panel/chart_switch.tsx | 2 +- .../change_indexpattern.tsx | 2 +- .../lens/public/shared_components/index.ts | 1 - .../shared_components/toolbar_popover.tsx | 2 +- .../axis_settings_popover.tsx | 3 +- 12 files changed, 292 insertions(+), 27 deletions(-) create mode 100644 src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap create mode 100644 src/plugins/kibana_react/public/toolbar_button/index.ts rename {x-pack/plugins/lens/public/shared_components => src/plugins/kibana_react/public/toolbar_button}/toolbar_button.scss (81%) create mode 100644 src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx rename {x-pack/plugins/lens/public/shared_components => src/plugins/kibana_react/public/toolbar_button}/toolbar_button.tsx (61%) diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index c99da5e9b36b8..cbb60bba47861 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 0000000000000..294be46398e8a --- /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 0000000000000..f952741291b68 --- /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 61b02f47678c3..f290b3c7c5f89 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 0000000000000..3d4ce29ffa5e9 --- /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 2ba227e6ff84f..388a11992268e 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 bc537e5a7d689..d3ca72a02940d 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 659626149aef2..474720e638939 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 25cb34d19beb8..f2d72079c2185 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 622bf5397c935..c4e79c3f1bcb8 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 cf2268c6eadf2..adc6d082f514f 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 45ec7098aa639..931e62ea1d13f 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 {