[Canvas] Toolbar UI Updates #113329

cqliu1 · 2021-09-28T20:46:08Z

Summary

Related to #85666.
~~Blocked by #94139.~~

This integrates the SolutionToolbar component from presentation_util into the Canvas workpad header and aligns the UI for adding content in Dashboard and Canvas.

Before:

After:

Changes:

Adds SolutionToolbar component to WorkpadHeader component
Replaces Add from Kibana menu option nested in the Add element menu with Add from library button on the toolbar
Adds quick buttons for Text, Shape, and Image elements

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2021-10-05T18:20:04Z

Pinging @elastic/kibana-presentation (Team:Presentation)

andreadelrio

I think the colors of the buttons on the left should match the one on the right, so you'd have to give that svg's fill the same color that <EuiButton color="text"> uses

Fixed ts errors Fixed proptypes Fixes tests

cqliu1 · 2021-10-06T01:17:34Z

I'm not setting a color, so it should default to text. It looks like the EuiButtonGroup component is applying a slightly different color.

The same goes for dark mode

andreadelrio

Seems like the different shades of gray are coming from EUI. I can check with them but not a blocker for this. LGTM

…toolbar

crob611

Looks good to me and functions like expected.

Some feedback that I'm sure has been discussed elsewhere, do we like having a quick button for Text/Image/etc and also having them in the dropdown?

crob611 · 2021-10-11T17:22:31Z

x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx

+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  // Moved this section out of the main component to enable stories


Let's remove this comment. It keeps getting moved around as the code moves, so I don't think it's really necessary.

…toolbar

cqliu1 · 2021-10-12T17:58:31Z

Some feedback that I'm sure has been discussed elsewhere, do we like having a quick button for Text/Image/etc and also having them in the dropdown?

I'd prefer to leave the options in the element menu for discoverability. IMO, it'd be helpful to have all the element options in one list at least for new Canvas users even if it's redundant to have the quick buttons as well.

@andreadelrio what do you think?

kibanamachine · 2021-10-12T18:20:33Z

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`presentationUtil`	151	150	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`canvas`	1.0MB	1.0MB	-218.0B
`dashboard`	135.4KB	135.4KB	-34.0B
total			-252.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`presentationUtil`	43.6KB	43.0KB	-592.0B

Unknown metric groups

API count

id	before	after	diff
`presentationUtil`	178	177	-1

History

💛 Build #158623 was flaky 3f1281d
💔 Build #158606 failed 5bd8a53
💔 Build #158276 failed fde83c0feecc6f02ff3fe1679113891c16ff2857
💚 Build #157701 succeeded 9c27a9eccc5696305f5b492dbab321ac97d62141
💔 Build #156563 failed b413cb7ef090fc8559e5d842572a5cdf7aea8d14

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

andreadelrio · 2021-10-12T18:46:35Z

Some feedback that I'm sure has been discussed elsewhere, do we like having a quick button for Text/Image/etc and also having them in the dropdown?

I'd prefer to leave the options in the element for discoverability. IMO, it'd be helpful to have all the element options in one list at least for new Canvas users even if it's redundant to have the quick buttons as well.

@andreadelrio what do you think?

++. I think it makes sense to list all available elements under + Add Element and have that co-exist with the quick buttons.

It’s similar to what Google Slides does where there are quick buttons for Shape, Image and Text which users can also find under Insert > Shape, Insert > Image and Insert > Text.

kibanamachine · 2021-10-14T19:02:19Z