mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -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) |
||
|---|---|---|
| .. | ||
| src | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.mdx | ||
| tsconfig.json | ||
---
id: sharedUX/Components/Toolbar
slug: /shared-ux/components/button_toolbar
title: Toolbar
summary: An implementation of the popover, primary button, icon button group and add from library button
tags: ['shared-ux', 'component', 'toolbar']
date: 2022-07-28
---
This `toolbar` component accepts a `children` prop. Children can include a `popover` or a generic `button`. It can also include the `IconButtonGroup` and `AddFromLibrary` component for soltuions.
Styling of the popover and button follow the primary styles.
```jsx
<Toolbar>
{{
primaryButton,
iconButtonGroup,
extraButtons,
addFromLibraryButton,
}}
</Toolbar>
```