From fc808a453490771939c6f744067b8f49c3430cd0 Mon Sep 17 00:00:00 2001 From: "Eyo O. Eyo" <7893459+eokoneyo@users.noreply.github.com> Date: Wed, 15 Nov 2023 14:34:07 +0100 Subject: [PATCH] Remove legacy toolbar component (#170761) ## Summary This PR removes the duplicated ToolbarButton component that has been marked for deprecation since https://github.com/elastic/kibana/pull/151381/commits/cf160573331671e4020376fab6a7f3e36a3723dd. In this changeset; - The import declaration for `ToolbarButton` & `ToolbarButtonProps` from `@kbn/kibana-react-plugin/public` is changed to `@kbn/shared-ux-button-toolbar`. - The visual expectation from the legacy `ToolbarButton` is preserved in the new component - A prop `as` is introduced to handle rendering toolbar buttons that are simply just icons, a use case for this can be found when configuring Legend settings for a visualisation. The `as` prop accepts values of `standard` and `iconButton` and in either case the same styling is preserved. - When the standard version of the toolbar is being used, by default the button will rendered with a down arrow positioned to the right, this icon can be changed by specifying any eui compatible `IconType`. ### Checklist - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) --- .../add_from_library/add_from_library.tsx | 2 +- .../toolbar_button.test.tsx.snap | 52 ++++- .../toolbar_button/toolbar_button.stories.tsx | 17 +- .../toolbar_button/toolbar_button.styles.ts | 29 ++- .../toolbar_button/toolbar_button.test.tsx | 53 +++-- .../buttons/toolbar_button/toolbar_button.tsx | 169 +++++++++++++-- .../src/popover/popover.test.tsx | 2 +- .../button_toolbar/src/popover/popover.tsx | 6 +- .../__snapshots__/toolbar.test.tsx.snap | 6 +- src/plugins/kibana_react/public/index.ts | 4 - .../toolbar_button.test.tsx.snap | 199 ------------------ .../public/toolbar_button/index.ts | 9 - .../public/toolbar_button/toolbar_button.scss | 61 ------ .../toolbar_button/toolbar_button.test.tsx | 47 ----- .../public/toolbar_button/toolbar_button.tsx | 85 -------- .../dashboard_picker/dashboard_picker.tsx | 29 +-- .../data_view_picker/data_view_picker.tsx | 11 +- src/plugins/presentation_util/tsconfig.json | 3 +- .../workspace_panel/chart_switch.tsx | 15 +- .../legend/legend_settings_popover.tsx | 5 +- .../shared_components/toolbar_popover.tsx | 18 +- .../xy_config_panel/axis_settings_popover.tsx | 4 +- .../xy/xy_config_panel/layer_header.tsx | 28 ++- x-pack/plugins/lens/tsconfig.json | 3 +- 24 files changed, 353 insertions(+), 504 deletions(-) delete mode 100644 src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap delete mode 100644 src/plugins/kibana_react/public/toolbar_button/index.ts delete mode 100644 src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss delete mode 100644 src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx delete mode 100644 src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx diff --git a/packages/shared-ux/button_toolbar/src/buttons/add_from_library/add_from_library.tsx b/packages/shared-ux/button_toolbar/src/buttons/add_from_library/add_from_library.tsx index da1d3b8fc8711..b021acd6d5d2a 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/add_from_library/add_from_library.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/add_from_library/add_from_library.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { ToolbarButton, ToolbarButtonProps } from '../toolbar_button'; -export type Props = Omit; +export type Props = Omit, 'iconType' | 'label' | 'type'>; const label = { getLibraryButtonLabel: () => diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap index 05065612bb411..68576d81711a8 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap @@ -1,6 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` is rendered - default 1`] = ` +exports[` iconButton is rendered - default 1`] = ` + +`; + +exports[` standard is rendered - default 1`] = ` `; -exports[` is rendered - primary 1`] = ` +exports[` standard is rendered - primary 1`] = ` +`; + +exports[` standard is rendered - text wth icon 1`] = ` + `; diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx index 580d894ecd042..909ae1cd2845e 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx @@ -21,6 +21,13 @@ export default { }; const argTypes = { + buttonStyle: { + defaultValue: 'standard', + control: { + type: 'radio', + options: ['standard', 'iconButton'], + }, + }, buttonType: { defaultValue: 'empty', control: { @@ -39,9 +46,15 @@ const argTypes = { type Params = Record; -export const ToolbarButton = ({ buttonType, iconSide }: Params) => { +export const ToolbarButton = ({ buttonStyle, buttonType, iconSide }: Params) => { return ( - + ); }; diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts index 162e81bb4efcb..510bedf9fafbb 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts @@ -8,12 +8,39 @@ import { UseEuiTheme } from '@elastic/eui'; +export const fontWeightDefinitions = (euiTheme: UseEuiTheme['euiTheme']) => ({ + bold: euiTheme.font.weight.bold, + normal: euiTheme.font.weight.regular, +}); + export const ToolbarButtonStyles = ({ euiTheme }: UseEuiTheme) => { return { + default: { + // style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss + // informed by issue https://github.com/elastic/eui/issues/4730 + borderStyle: 'solid', + border: euiTheme.border.thin, + borderColor: euiTheme.border.color, + }, emptyButton: { backgroundColor: euiTheme.colors.emptyShade, - border: `${euiTheme.border.thin} !important`, + border: `${euiTheme.border.thin}`, color: `${euiTheme.colors.text}`, }, + buttonPositions: { + left: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + right: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderLeft: 'none', + }, + center: { + borderRadius: 0, + borderLeft: 'none', + }, + }, }; }; diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.test.tsx b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.test.tsx index 74b5fde37f5ff..6761f4272079d 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.test.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.test.tsx @@ -12,22 +12,47 @@ import { mountWithIntl } from '@kbn/test-jest-helpers'; import { ToolbarButton } from './toolbar_button'; describe('', () => { - test('is rendered - default', () => { - const component = mountWithIntl( 'click'} />); - expect(component.render()).toMatchSnapshot(); - }); + describe('standard', () => { + test('is rendered - default', () => { + const component = mountWithIntl( + 'click'} /> + ); + expect(component.render()).toMatchSnapshot(); + }); + + test('is rendered - primary', () => { + const component = mountWithIntl( + 'click'} /> + ); + expect(component.render()).toMatchSnapshot(); + }); + + test('is rendered - text wth icon', () => { + const component = mountWithIntl( + 'click'} + /> + ); + expect(component.render()).toMatchSnapshot(); + }); - test('is rendered - primary', () => { - const component = mountWithIntl( - 'click'} /> - ); - expect(component.render()).toMatchSnapshot(); + test('accepts an onClick handler', () => { + const mockHandler = jest.fn(); + const component = mountWithIntl(); + component.find('button').simulate('click'); + expect(mockHandler).toHaveBeenCalled(); + }); }); - test('accepts an onClick handler', () => { - const mockHandler = jest.fn(); - const component = mountWithIntl(); - component.find('button').simulate('click'); - expect(mockHandler).toHaveBeenCalled(); + describe('iconButton', () => { + test('is rendered - default', () => { + const component = mountWithIntl( + + ); + expect(component.render()).toMatchSnapshot(); + }); }); }); diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx index 76adb41e237bd..84039857d0891 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx @@ -7,48 +7,177 @@ */ import React from 'react'; -import { EuiButton, useEuiTheme } from '@elastic/eui'; +import { EuiButton, EuiButtonIcon, useEuiTheme, IconType } from '@elastic/eui'; import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button'; -import { ToolbarButtonStyles } from './toolbar_button.styles'; +import { ToolbarButtonStyles, fontWeightDefinitions } from './toolbar_button.styles'; type ToolbarButtonTypes = 'primary' | 'empty'; -/** - * Props for `PrimaryButton`. - */ -export interface Props +type ToolbarButtonFontWeights = 'normal' | 'bold'; + +type ButtonPositions = 'left' | 'right' | 'center' | 'none'; + +type ButtonRenderStyle = 'standard' | 'iconButton'; + +interface ToolbarButtonCommonProps extends Pick< EuiButtonPropsForButton, - 'onClick' | 'iconType' | 'iconSide' | 'size' | 'data-test-subj' | 'isDisabled' + 'onClick' | 'iconType' | 'size' | 'data-test-subj' | 'isDisabled' > { - label: string; + /** + * Render style of the toolbar button + */ + as?: ButtonRenderStyle; type?: ToolbarButtonTypes; + /** + * Adjusts the borders for groupings + */ + groupPosition?: ButtonPositions; } -export const ToolbarButton: React.FunctionComponent = ({ +type ToolbarStandardButton = Pick & + Omit & { + as?: Extract; + /** + * Display text for toolbar button + */ + label: React.ReactNode; + /** + * Determines if the button will have a down arrow or not + */ + hasArrow?: boolean; + /** + * Determines prominence + */ + fontWeight?: ToolbarButtonFontWeights; + }; + +type ToolbarIconButton = ToolbarButtonCommonProps & { + as: Extract; + iconType: IconType; + label?: string; +}; + +/** + * Props for `PrimaryButton`. + */ +export type Props = T extends Extract + ? ToolbarIconButton + : ToolbarStandardButton; + +const isIconButton = ( + props: ToolbarStandardButton | ToolbarIconButton +): props is ToolbarIconButton => { + return (props as ToolbarIconButton).as === 'iconButton'; +}; + +const computeToolbarButtonCommonCSSProps = ( + euiTheme: ReturnType, + { + type, + isDisabled, + groupPosition, + }: Pick, 'type' | 'isDisabled' | 'groupPosition'> +) => { + const toolButtonStyles = ToolbarButtonStyles(euiTheme); + + const groupPositionStyles = + groupPosition && groupPosition !== 'none' + ? toolButtonStyles.buttonPositions[groupPosition] + : {}; + + const defaultStyles = { + ...toolButtonStyles.default, + ...groupPositionStyles, + }; + + return isDisabled + ? defaultStyles + : { + ...defaultStyles, + ...(type === 'primary' ? {} : toolButtonStyles.emptyButton), + }; +}; + +const ToolbarStandardButton = ({ + hasArrow = true, + fontWeight = 'normal', + type, label, - type = 'empty', - iconSide = 'left', - size = 'm', + iconSide, + iconType, + fullWidth, isDisabled, + groupPosition, ...rest -}) => { +}: Omit) => { const euiTheme = useEuiTheme(); - const toolbarButtonStyleProps: EuiButtonPropsForButton = !isDisabled - ? type === 'primary' - ? { color: 'primary', fill: true } - : { color: 'text', css: ToolbarButtonStyles(euiTheme).emptyButton } - : {}; + const cssProps = { + ...computeToolbarButtonCommonCSSProps(euiTheme, { type, isDisabled, groupPosition }), + fontWeight: fontWeightDefinitions(euiTheme.euiTheme)[fontWeight], + }; + + const toolbarButtonStyleProps: EuiButtonPropsForButton = isDisabled + ? {} + : type === 'primary' + ? { color: 'primary', fill: true } + : { color: 'text' }; + + const icon = iconType ?? (hasArrow ? 'arrowDown' : ''); return ( {label} ); }; + +const ToolbarIconButton = ({ + size, + type, + label, + isDisabled, + groupPosition, + ...rest +}: Omit) => { + const euiTheme = useEuiTheme(); + const cssProps = computeToolbarButtonCommonCSSProps(euiTheme, { + type, + isDisabled, + groupPosition, + }); + + return ( + + ); +}; + +export function ToolbarButton(props: Props) { + const { type = 'empty', size = 'm' } = props; + + if (isIconButton(props)) { + return ; + } + + return ; +} diff --git a/packages/shared-ux/button_toolbar/src/popover/popover.test.tsx b/packages/shared-ux/button_toolbar/src/popover/popover.test.tsx index b03cb9e63d460..dfaba0f816e7e 100644 --- a/packages/shared-ux/button_toolbar/src/popover/popover.test.tsx +++ b/packages/shared-ux/button_toolbar/src/popover/popover.test.tsx @@ -37,7 +37,7 @@ describe('', () => { expect(button.prop('color')).toBe('text'); expect(button.prop('css')).toMatchObject({ backgroundColor: '#FFF', - border: '1px solid #D3DAE6 !important', + border: '1px solid #D3DAE6', color: '#343741', }); }); diff --git a/packages/shared-ux/button_toolbar/src/popover/popover.tsx b/packages/shared-ux/button_toolbar/src/popover/popover.tsx index 25dff5c52250f..c7af471b6eb48 100644 --- a/packages/shared-ux/button_toolbar/src/popover/popover.tsx +++ b/packages/shared-ux/button_toolbar/src/popover/popover.tsx @@ -12,7 +12,10 @@ import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/po import { ToolbarButtonProps, ToolbarButton } from '../buttons'; -type AllowedButtonProps = Omit; +type AllowedButtonProps = Omit< + ToolbarButtonProps<'standard'>, + 'iconSide' | 'onClick' | 'fill' | 'label' +>; type AllowedPopoverProps = Omit< EuiPopoverProps, 'button' | 'isOpen' | 'closePopover' | 'anchorPosition' @@ -24,6 +27,7 @@ type AllowedPopoverProps = Omit< export type Props = AllowedButtonProps & AllowedPopoverProps & { children: (arg: { closePopover: () => void }) => React.ReactNode; + label: NonNullable['label']>; }; /** diff --git a/packages/shared-ux/button_toolbar/src/toolbar/__snapshots__/toolbar.test.tsx.snap b/packages/shared-ux/button_toolbar/src/toolbar/__snapshots__/toolbar.test.tsx.snap index 44b910bf017e7..32844b4bef9c6 100644 --- a/packages/shared-ux/button_toolbar/src/toolbar/__snapshots__/toolbar.test.tsx.snap +++ b/packages/shared-ux/button_toolbar/src/toolbar/__snapshots__/toolbar.test.tsx.snap @@ -8,7 +8,7 @@ exports[` is rendered 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" > diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index f665b5f4ee403..05abdbd84e91c 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/src/plugins/kibana_react/public/index.ts @@ -44,10 +44,6 @@ export { export { useExecutionContext } from './use_execution_context'; -export type { ToolbarButtonProps } from './toolbar_button'; -/** @deprecated ToolbarButton - use `ToolbarButton` from `@kbn/shared-ux-button-toolbar` */ -export { POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES, ToolbarButton } from './toolbar_button'; - export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate'; export type { 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 deleted file mode 100644 index 753dd8d6fe81f..0000000000000 --- a/src/plugins/kibana_react/public/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap +++ /dev/null @@ -1,199 +0,0 @@ -// 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 deleted file mode 100644 index af21f700901b9..0000000000000 --- a/src/plugins/kibana_react/public/toolbar_button/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export * from './toolbar_button'; diff --git a/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss b/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss deleted file mode 100644 index cbf6d85349446..0000000000000 --- a/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss +++ /dev/null @@ -1,61 +0,0 @@ -.kbnToolbarButton { - line-height: $euiButtonHeight; // Keeps alignment of text and chart icon - - // Override background color for non-disabled buttons - &:not(:disabled) { - background-color: $euiColorEmptyShade; - } - - // todo: once issue https://github.com/elastic/eui/issues/4730 is merged, this code might be safe to remove - // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed - min-width: 0; - border-width: $euiBorderWidthThin; - border-style: solid; - border-color: $euiBorderColor; // Lighten the border color for all states - - .kbnToolbarButton__text > svg { - margin-top: -1px; // Just some weird alignment issue when icon is the child not the `iconType` - } - - .kbnToolbarButton__text:empty { - margin: 0; - } - - // Toolbar buttons don't look good with centered text when fullWidth - &[class*='fullWidth'] { - text-align: left; - - .kbnToolbarButton__content { - justify-content: space-between; - } - } -} - -.kbnToolbarButton--groupLeft { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.kbnToolbarButton--groupCenter { - border-radius: 0; - border-left: none; -} - -.kbnToolbarButton--groupRight { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; -} - -.kbnToolbarButton--bold { - font-weight: $euiFontWeightBold; -} - -.kbnToolbarButton--normal { - font-weight: $euiFontWeightRegular; -} - -.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 deleted file mode 100644 index 97690e483393f..0000000000000 --- a/src/plugins/kibana_react/public/toolbar_button/toolbar_button.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 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/src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx b/src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx deleted file mode 100644 index 4b22710eef795..0000000000000 --- a/src/plugins/kibana_react/public/toolbar_button/toolbar_button.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import './toolbar_button.scss'; -import React from 'react'; -import classNames from 'classnames'; -import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui'; - -const groupPositionToClassMap = { - none: null, - left: 'kbnToolbarButton--groupLeft', - center: 'kbnToolbarButton--groupCenter', - right: 'kbnToolbarButton--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?: Weights; - /** - * Smaller buttons also remove extra shadow for less prominence - */ - size?: EuiButtonProps['size']; - /** - * Determines if the button will have a down arrow or not - */ - hasArrow?: boolean; - /** - * Adjusts the borders for groupings - */ - groupPosition?: ButtonPositions; - dataTestSubj?: string; -}; - -export const ToolbarButton: React.FunctionComponent = ({ - children, - className, - fontWeight = 'normal', - size = 'm', - hasArrow = true, - groupPosition = 'none', - dataTestSubj = '', - ...rest -}) => { - const classes = classNames( - 'kbnToolbarButton', - groupPositionToClassMap[groupPosition], - [`kbnToolbarButton--${fontWeight}`, `kbnToolbarButton--${size}`], - className - ); - - return ( - - {children} - - ); -}; diff --git a/src/plugins/presentation_util/public/components/dashboard_picker/dashboard_picker.tsx b/src/plugins/presentation_util/public/components/dashboard_picker/dashboard_picker.tsx index b2d8a576ebae8..01b1c8d2210da 100644 --- a/src/plugins/presentation_util/public/components/dashboard_picker/dashboard_picker.tsx +++ b/src/plugins/presentation_util/public/components/dashboard_picker/dashboard_picker.tsx @@ -20,7 +20,7 @@ import { EuiHighlight, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { ToolbarButton } from '@kbn/kibana-react-plugin/public'; +import { ToolbarButton } from '@kbn/shared-ux-button-toolbar'; import { SavedObjectCommon } from '@kbn/saved-objects-finder-plugin/common'; import { pluginServices } from '../../services'; @@ -122,19 +122,20 @@ export function DashboardPicker({ isDisabled, onChange, idsToOmit }: DashboardPi isLoading={isLoading} data-test-subj="open-dashboard-picker" onClick={() => setIsPopoverOpen(!isPopoverOpen)} - > - - {selectedDashboard?.label ?? - i18n.translate('presentationUtil.dashboardPicker.noDashboardOptionLabel', { - defaultMessage: 'Select dashboard', - })} - - + label={ + + {selectedDashboard?.label ?? + i18n.translate('presentationUtil.dashboardPicker.noDashboardOptionLabel', { + defaultMessage: 'Select dashboard', + })} + + } + /> } isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx index a7ee475cfa5d3..1804a2fcf2046 100644 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx +++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx @@ -10,9 +10,9 @@ import React, { useState } from 'react'; import { EuiSelectable, EuiInputPopover, EuiSelectableProps } from '@elastic/eui'; import { DataViewListItem } from '@kbn/data-views-plugin/common'; -import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; +import { ToolbarButton, ToolbarButtonProps } from '@kbn/shared-ux-button-toolbar'; -export type DataViewTriggerProps = ToolbarButtonProps & { +export type DataViewTriggerProps = Omit, 'label'> & { label: string; title?: string; }; @@ -46,15 +46,14 @@ export function DataViewPicker({ const { label, title, ...rest } = trigger; return ( setPopoverIsOpen(!isPopoverOpen)} + label={label} fullWidth {...colorProp} {...rest} - > - {label} - + /> ); }; diff --git a/src/plugins/presentation_util/tsconfig.json b/src/plugins/presentation_util/tsconfig.json index 1270c0802dff2..e17fd6cc5a754 100644 --- a/src/plugins/presentation_util/tsconfig.json +++ b/src/plugins/presentation_util/tsconfig.json @@ -30,7 +30,8 @@ "@kbn/storybook", "@kbn/ui-actions-plugin", "@kbn/saved-objects-finder-plugin", - "@kbn/content-management-plugin" + "@kbn/content-management-plugin", + "@kbn/shared-ux-button-toolbar" ], "exclude": ["target/**/*"] } 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 a88cd0619f001..c40c81285dc15 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 @@ -20,7 +20,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { ToolbarButton } from '@kbn/kibana-react-plugin/public'; +import { ToolbarButton } from '@kbn/shared-ux-button-toolbar'; import { Visualization, FramePublicAPI, @@ -429,12 +429,13 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { onClick={() => setFlyoutOpen(!flyoutOpen)} data-test-subj="lnsChartSwitchPopover" fontWeight="bold" - > - - + label={ + + } + /> } isOpen={flyoutOpen} closePopover={() => setFlyoutOpen(false)} diff --git a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx index 34cdcfe2e18b1..64a374bae7052 100644 --- a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx @@ -15,10 +15,9 @@ import { EuiFieldNumber, } from '@elastic/eui'; import { Position, VerticalAlignment, HorizontalAlignment } from '@elastic/charts'; -import { ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; import { LegendSize } from '@kbn/visualizations-plugin/public'; import { useDebouncedValue } from '@kbn/visualization-ui-components'; -import { ToolbarPopover } from '../toolbar_popover'; +import { ToolbarPopover, type ToolbarPopoverProps } from '../toolbar_popover'; import { LegendLocationSettings } from './location/legend_location_settings'; import { ColumnsNumberSetting } from './layout/columns_number_setting'; import { LegendSizeSettings } from './size/legend_size_settings'; @@ -119,7 +118,7 @@ export interface LegendSettingsPopoverProps { /** * Button group position */ - groupPosition?: ToolbarButtonProps['groupPosition']; + groupPosition?: ToolbarPopoverProps['groupPosition']; /** * Legend size in pixels */ 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 dbb3d69588624..c8e096cbbb8a7 100644 --- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx @@ -7,8 +7,8 @@ import './toolbar_popover.scss'; import React, { useState } from 'react'; -import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui'; -import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; +import { EuiFlexItem, EuiPopover, EuiPopoverTitle, IconType } from '@elastic/eui'; +import { ToolbarButton, ToolbarButtonProps } from '@kbn/shared-ux-button-toolbar'; import { EuiIconLegend } from '@kbn/chart-icons'; const typeToIconMap: { [type: string]: string | IconType } = { @@ -35,7 +35,7 @@ export interface ToolbarPopoverProps { /** * Button group position */ - groupPosition?: ToolbarButtonProps['groupPosition']; + groupPosition?: ToolbarButtonProps<'iconButton'>['groupPosition']; buttonDataTestSubj?: string; panelClassName?: string; handleClose?: () => void; @@ -63,18 +63,16 @@ export const ToolbarPopover: React.FunctionComponent = ({ aria-label={title} button={ { setOpen(!open); }} - title={title} - hasArrow={false} + aria-label={title} isDisabled={isDisabled} groupPosition={groupPosition} - dataTestSubj={buttonDataTestSubj} - > - - + data-test-subj={buttonDataTestSubj} + /> } isOpen={open} closePopover={() => { diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx index 11077414e25b8..6b56d4f82ca19 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx @@ -10,7 +10,7 @@ import { EuiSwitch, IconType, EuiFormRow, EuiButtonGroup, EuiSelect } from '@ela import { i18n } from '@kbn/i18n'; import { isEqual } from 'lodash'; import { AxisExtentConfig, YScaleType } from '@kbn/expression-xy-plugin/common'; -import { ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; +import { ToolbarButtonProps } from '@kbn/shared-ux-button-toolbar'; import { EuiIconAxisBottom, EuiIconAxisLeft, @@ -131,7 +131,7 @@ const popoverConfig = ( isHorizontal: boolean ): { icon: IconType; - groupPosition: ToolbarButtonProps['groupPosition']; + groupPosition: ToolbarButtonProps<'iconButton'>['groupPosition']; popoverTitle: string; buttonDataTestSubj: string; } => { diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx index 941b6d01e6b40..99c7b2bec30d4 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx @@ -15,8 +15,10 @@ import { EuiPopoverTitle, useEuiTheme, EuiIconTip, + EuiFlexGroup, + EuiFlexItem, } from '@elastic/eui'; -import { ToolbarButton } from '@kbn/kibana-react-plugin/public'; +import { ToolbarButton } from '@kbn/shared-ux-button-toolbar'; import { IconChartBarReferenceLine, IconChartBarAnnotations } from '@kbn/chart-icons'; import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; @@ -231,18 +233,22 @@ const DataLayerHeaderTrigger = function ({ return ( - <> - - - {currentVisType.fullLabel || currentVisType.label} - - - + label={ + + + + + + + {currentVisType.fullLabel || currentVisType.label} + + + + } + /> ); }; diff --git a/x-pack/plugins/lens/tsconfig.json b/x-pack/plugins/lens/tsconfig.json index d342ddf99fc77..12f737244bcb0 100644 --- a/x-pack/plugins/lens/tsconfig.json +++ b/x-pack/plugins/lens/tsconfig.json @@ -90,7 +90,8 @@ "@kbn/search-response-warnings", "@kbn/logging", "@kbn/core-plugins-server", - "@kbn/field-utils" + "@kbn/field-utils", + "@kbn/shared-ux-button-toolbar" ], "exclude": [ "target/**/*",