mirror of
https://github.com/elastic/kibana.git
synced 2025-06-28 11:05:39 -04:00
bb9bbf4086
Closes https://github.com/elastic/kibana/issues/147263 ## Summary This PR fixes the styling of the Dashboard and Canvas toolbars by migrating from the Presentation Util `SolutionToolbar` over to the Shared UX `Toolbar` component: - **Dashboard:**  - **Canvas:**  However, in order to keep the styling the same, this also required editing the Shared UX `Toolbar` (and its related components) in order to support non-primary buttons. When initially migrating, **only** primary buttons were supported for the `Toolbar` component - this resulted in a Dashboard toolbar that looked like this, which goes against the EUI guideline of only having a single primary button: <p align="center"> <img width="500px" src="https://user-images.githubusercontent.com/8698078/220704118-fc8515b7-dbb6-43ce-99a7-1db2f41c915a.png"/> </p> I did this by removing the old `PrimaryButton` component and replacing it with the more generic `ToolbarButton` - as part of this, I migrated both the `ToolbarPopover` and the `AddFromLibrary` buttons to use this new component. I updated the related Storybooks to reflect the capabilities I added to each component, such as making the `ToolbarPopover` **conditionally** take the `iconType` prop and, if not given, it will default to an `arrowDown` icon on the right side of the button:  Since only Dashboard and Canvas used the Presentation Util `SolutionToolbar`, now that these have been migrated, I removed all the old deprecated components from Presentation Util as a final clean up. ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) - Checked on Chrome, Firefox, and Safari to ensure that all styles were applied ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
22 lines
824 B
TypeScript
22 lines
824 B
TypeScript
/*
|
|
* 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 { ToolbarButton, IconButtonGroup, AddFromLibraryButton } from './src/buttons';
|
|
export type {
|
|
AddFromLibraryButtonProps,
|
|
IconButtonGroupProps,
|
|
ToolbarButtonProps,
|
|
IconButton,
|
|
} from './src/buttons';
|
|
|
|
export { ToolbarPopover } from './src/popover';
|
|
export type { ToolbarPopoverProps } from './src/popover';
|
|
|
|
export { Toolbar } from './src/toolbar';
|
|
export type { ToolbarProps } from './src/toolbar';
|
|
export type { ToolbarButtonType } from './src/toolbar';
|