[Canvas] Fix sharable runtime styles and remove color="ghost" where unnecessary

[cee-chen]

Summary

👋 Hey y'all - EUI will shortly be deprecating the ghost color in all button components (see https://eui.elastic.co/v89.0.0/#/navigation/button#ghost-vs-dark-mode).

I'm opening this PR ahead of time for your team so you can test this migration and ensure no UI regressions have occurred as a result. To be honest, I'm very unsure how to test the shereable runtime feature - I tried downloading a ZIP file but it emitted a html file that rendered nothing, so I'd appreciate help QAing this if possible.

Checklist

• Tested exported file

[elasticmachine]

Pinging @elastic/eui-team (EUI)

[elasticmachine]

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

[nickpeihl]

Testing the Canvas shareable runtime requires a few steps.

1. yarn kbn bootstrap
2. node x-pack/plugins/canvas/scripts/shareable_runtime.js
3. yarn start
4. Install sample data ecommerce
5. Open the "[eCommerce] Revenue Tracking" workpad
6. Click "Share - Share on a website"
7. In the flyout, click the "download an example ZIP file" link.
8. Extract the zip file to a directory
9. Inside the directory, run python -m http.server and open http://localhost:8000

Any changes to the code require a rebuild of the runtime in step 2. You could copy the output kbn_canvas.js file to the unzipped directory to test.

The shareable runtime has loads of CSS issues in main already. Some of the .scss files use the composes: selector from CSS-Modules, but I believe we no longer support CSS-Modules in favor of Emotion 🤔 .

Here is how it looks in main.

And with this PR

Compare to this screenshot from the original PR.

With our current priorities, I do not foresee us spending time fixing the aesthetic CSS issues in the shareable runtime. The shareable runtime is not widely used and we have higher impact features in our roadmap. cc @ThomThomson @cqliu1 in case they feel differently.

Since this PR as it doesn't break anything and it allows EUI to remove the deprecated prop, I'm going to say "lgtm".

[ThomThomson]

@nickpeihl agreed that we should not spend time fixing these aesthetic problems with the shareable runtime. If an engineer from another team wanted to fix this I wouldn't be against it, but it does have very little usage.

[cee-chen]

Ahh interesting. Yeah it looks like the bottom bar totally broke during EuiBottomBar's conversion to Emotion (elastic/eui#5823), which removed any Sass styles associated with .euiBottomBar and thus broken the composes: behavior here:

kibana/x-pack/plugins/canvas/shareable_runtime/components/footer/footer.module.scss

Line 9 in 604409b

composes: euiBottomBar from global;

If there's a quick and easy way to fix node x-pack/plugins/canvas/scripts/shareable_runtime.js to use Emotion, I could look into that... but yeah not sure if that'd be worth doing if usage is so low. I can timebox myself to 30 mins or so of poking at it

[cee-chen]

That wasn't too bad at all! Here's the fixed styles:

Quick note - I'm aware the EuiContextMenu colors are broken - this is an issue to fix on EUI's side of things (see #169571 as well). Once we fix it in EUI, this package should automatically inherit the fix.

[ThomThomson]

Amazing, thank you for fixing this @cee-chen!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 08927bd

Metrics [docs]

✅ unchanged

History

• 💔 Build #170171 failed 2184c6e
• 💔 Build #170165 failed 19d301d
• 💛 Build #169611 was flaky 235d2b8
• 💔 Build #169230 failed d10b7d6

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

[nickpeihl]

Thank you @cee-chen for fixing this! Updated changes lgtm!