[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions #198454

cqliu1 · 2024-10-30T23:07:39Z

Summary

Closes #198370.
Follow up to #182535.

This removes border style overrides from the apps that support embeddables and cleans up outline styles for presentation panel borders/hover actions. I removed all of the dashboard specific border styles and made them more generic for any embeddable panel. Now, the borders respect the showBorder prop on the embeddable input. However even when showBorder is false, a border is shown on focus/hover to align with the border styles of the hover actions.

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
Flaky Test Runner was used on any tests changed
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)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

This was checked for breaking API changes and was labeled appropriately
This will appear in the Release Notes and follow the guidelines

angorayc · 2024-10-31T09:16:31Z

Hello @cqliu1 , thanks for the fix. Just an issue found: We have hover action button on each visualisation, but the hover action buttons are missing in this branch.

Expected:

…-fix'

elasticmachine · 2024-11-01T19:04:16Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

github-actions · 2024-11-01T19:04:24Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

cqliu1 · 2024-11-01T19:28:51Z

src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss

-    outline: $euiBorderThin;
-    z-index: $euiZLevel2;
-  }
+  margin-top: $euiSizeS;


This is adds space between controls and the dashboard grid when margins are off.

…rd/hover-actions-style-cleanup

angorayc

Hey Catherine,
I found that the outline appears when hovering onto the visualisations.
The hover actions are still not available. Could you please have another look? Thank you.

Screen.Recording.2024-11-05.at.12.43.22.mov

…rd/hover-actions-style-cleanup

elasticmachine · 2024-11-07T21:31:48Z

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

Heenawter

Left one small nit and one question, but otherwise, changes LGTM 👍 Code review + local test on Dashboard to ensure the no border prop + updated styles are respected.

The styles are so much easier to follow now, thanks for being so thorough with this!! 🎉

src/plugins/embeddable/public/__stories__/embeddable_panel.stories.tsx

.../presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx

…-fix'

angorayc

Thanks for the enhancement @cqliu1
I like the fix! But after clicking on the hover action button, the border around the button doesn't seem to align with the border of the visualisation. could you please check this behaviour again? Thank you!

Screen.Recording.2024-11-11.at.12.05.22.mov

…rd/hover-actions-style-cleanup

cqliu1 · 2024-11-11T18:19:44Z

Thanks for the enhancement @cqliu1
I like the fix! But after clicking on the hover action button, the border around the button doesn't seem to align with the border of the visualisation. could you please check this behaviour again? Thank you!

@angorayc Thanks Angela for testing this out! With the latest commit 4b5535a, the border should stay aligned with the border on the hover actions. Before it was only applying a border to the hover actions when one of the buttons is focused, but now it should apply the same border to both the panel and the hover actions on hover/focus.

…rd/hover-actions-style-cleanup

shahzad31

LGTM !!

elasticmachine · 2024-11-12T17:02:09Z

💚 Build Succeeded

Buildkite Build
Commit: bff6474
Storybooks Preview
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-198454-bff647460b58
Security Deployment

Metrics [docs]

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.1MB	1.1MB	-682.0B
`dashboard`	646.0KB	645.2KB	-844.0B
`eventAnnotationListing`	227.7KB	227.7KB	+14.0B
`exploratoryView`	182.7KB	182.7KB	-24.0B
`presentationPanel`	14.2KB	15.3KB	+1.1KB
`securitySolution`	13.4MB	13.4MB	-1.1KB
total			-1.5KB

Page load bundle

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

id	before	after	diff
`presentationPanel`	46.4KB	43.1KB	-3.3KB

History

💛 Build #250124 was flaky 397b828
💔 Build #250072 failed 4b5535a
💔 Build #250035 failed acff0b1
💔 Build #249419 failed e75da38

cc @cqliu1

andreadelrio

Styles cleanup LGTM. Thanks!

angorayc

Tested locally, looking great! Thanks so much for the fix @cqliu1 👍

kibanamachine · 2024-11-13T16:46:50Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11821856430

…clean up for hover actions (elastic#198454) ## Summary Closes elastic#198370. Follow up to elastic#182535. This removes border style overrides from the apps that support embeddables and cleans up outline styles for presentation panel borders/hover actions. I removed all of the dashboard specific border styles and made them more generic for any embeddable panel. Now, the borders respect the `showBorder` prop on the embeddable input. However even when `showBorder` is `false`, a border is shown on focus/hover to align with the border styles of the hover actions. ### Checklist Delete any items that are not applicable to this PR. - [ ] 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) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [ ] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 9af4bb5)

kibanamachine · 2024-11-13T16:52:07Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…d CSS clean up for hover actions (#198454) (#200051) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions (#198454)](#198454)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Catherine Liu <catherine.liu@elastic.co>

cqliu1 requested review from shahzad31 and angorayc October 30, 2024 23:07

cqliu1 requested review from a team as code owners October 30, 2024 23:07

botelastic bot added the Feature:Embedding Embedding content via iFrame label Oct 30, 2024

cqliu1 requested a review from a team as a code owner November 1, 2024 17:13

cqliu1 and others added 5 commits November 1, 2024 11:57

Fix border styles in dashboard

3ba63da

Move border styles into presentation panel

a22965f

Delete unused CSS

4f0b522

More cleanup

c72ef4c

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

f5f6fbe

…-fix'

cqliu1 force-pushed the dashboard/hover-actions-style-cleanup branch from 1cb75da to f5f6fbe Compare November 1, 2024 18:58

Remove conflicting styles in solutions

ac03c42

cqliu1 requested review from a team as code owners November 1, 2024 19:04

botelastic bot added ci:project-deploy-observability Create an Observability project Team:obs-ux-management Observability Management User Experience Team labels Nov 1, 2024

cqliu1 commented Nov 1, 2024

View reviewed changes

mbondyra approved these changes Nov 4, 2024

View reviewed changes

Heenawter self-requested a review November 4, 2024 16:17

cqliu1 added 2 commits November 4, 2024 09:41

Fix emotion

f4ae6de

Merge branch 'main' of https://github.com/elastic/kibana into dashboa…

ed0b4fc

…rd/hover-actions-style-cleanup

angorayc requested changes Nov 5, 2024

View reviewed changes

cqliu1 added 3 commits November 5, 2024 07:30

Fix hover actions check

9420aea

Only show panel border on hover if hover actions are available

db2e564

Merge branch 'main' of https://github.com/elastic/kibana into dashboa…

d89fdde

…rd/hover-actions-style-cleanup

cqliu1 added v8.16.1 release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas loe:medium Medium Level of Effort impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. and removed v8.16.1 labels Nov 7, 2024

cqliu1 added the ci:project-deploy-security Create a Security Serverless Project label Nov 7, 2024

Heenawter approved these changes Nov 7, 2024

View reviewed changes

cqliu1 and others added 2 commits November 7, 2024 15:53

Update presentation_panel_hover_actions.tsx

1b38329

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

e75da38

…-fix'

angorayc reviewed Nov 11, 2024

View reviewed changes

cqliu1 added 3 commits November 11, 2024 10:48

Fix whitespace

ed9869c

Merge branch 'main' of https://github.com/elastic/kibana into dashboa…

acff0b1

…rd/hover-actions-style-cleanup

Change hover border selectors

4b5535a

Merge branch 'main' of https://github.com/elastic/kibana into dashboa…

397b828

…rd/hover-actions-style-cleanup

shahzad31 approved these changes Nov 12, 2024

View reviewed changes

Merge branch 'main' into dashboard/hover-actions-style-cleanup

bff6474

andreadelrio approved these changes Nov 12, 2024

View reviewed changes

angorayc approved these changes Nov 13, 2024

View reviewed changes

cqliu1 merged commit 9af4bb5 into elastic:main Nov 13, 2024
52 checks passed

cqliu1 deleted the dashboard/hover-actions-style-cleanup branch November 13, 2024 16:46

cqliu1 restored the dashboard/hover-actions-style-cleanup branch November 13, 2024 16:46

kibanamachine mentioned this pull request Nov 13, 2024

[8.x] [Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions (#198454) #200051

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions #198454

[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions #198454

cqliu1 commented Oct 30, 2024 •

edited by kibanamachine

Loading

angorayc commented Oct 31, 2024

elasticmachine commented Nov 1, 2024

github-actions bot commented Nov 1, 2024

cqliu1 Nov 1, 2024

angorayc left a comment •

edited

Loading

elasticmachine commented Nov 7, 2024

Heenawter left a comment

angorayc left a comment

cqliu1 commented Nov 11, 2024 •

edited

Loading

shahzad31 left a comment

elasticmachine commented Nov 12, 2024 •

edited

Loading

andreadelrio left a comment

angorayc left a comment

kibanamachine commented Nov 13, 2024

kibanamachine commented Nov 13, 2024

[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions #198454

[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions #198454

Conversation

cqliu1 commented Oct 30, 2024 • edited by kibanamachine Loading

Summary

Checklist

Risk Matrix

For maintainers

angorayc commented Oct 31, 2024

elasticmachine commented Nov 1, 2024

github-actions bot commented Nov 1, 2024

🤖 GitHub comments

cqliu1 Nov 1, 2024

Choose a reason for hiding this comment

angorayc left a comment • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Nov 7, 2024

Heenawter left a comment

Choose a reason for hiding this comment

angorayc left a comment

Choose a reason for hiding this comment

cqliu1 commented Nov 11, 2024 • edited Loading

shahzad31 left a comment

Choose a reason for hiding this comment

elasticmachine commented Nov 12, 2024 • edited Loading

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

andreadelrio left a comment

Choose a reason for hiding this comment

angorayc left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 13, 2024

kibanamachine commented Nov 13, 2024

💚 All backports created successfully

Questions ?

cqliu1 commented Oct 30, 2024 •

edited by kibanamachine

Loading

angorayc left a comment •

edited

Loading

cqliu1 commented Nov 11, 2024 •

edited

Loading

elasticmachine commented Nov 12, 2024 •

edited

Loading