Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UnifiedDocViewer] Redesign Actions to be responsive #163239

Closed
Tracked by #163284
kertal opened this issue Aug 7, 2023 · 1 comment · Fixed by #173780
Closed
Tracked by #163284

[UnifiedDocViewer] Redesign Actions to be responsive #163239

kertal opened this issue Aug 7, 2023 · 1 comment · Fixed by #173780
Assignees
@jughosta
Labels
enhancement New value added to drive a business result Feature:UnifiedDocViewer Issues relating to the unified doc viewer component impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph)

Comments

@kertal
Copy link
Member

kertal commented Aug 7, 2023 •
edited
Loading

The document level action of the UnifiedDocViewer should show icons + text if there's enough space. If there isn't (or there are too many actions) icons should only be displayed instead with a tooltip showing the text on hover. Also, if there are several actions available we can pick the top "x" ones and group the rest under the "more" icon.

Icon-only actions

image

Icon + text actions

image

Originally posted by @andreadelrio in #160306 (comment)
@botelastic botelastic bot added the needs-team Issues missing a team label label Aug 7, 2023
@kertal kertal added Feature:UnifiedDocViewer Issues relating to the unified doc viewer component Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) labels Aug 7, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Aug 7, 2023
@kertal kertal added enhancement New value added to drive a business result needs-team Issues missing a team label labels Aug 7, 2023
@botelastic botelastic bot removed the needs-team Issues missing a team label label Aug 7, 2023
@kertal kertal changed the title [DocViewer] Responsive Actions [UnifiedDocViewer] Responsive Actions Aug 9, 2023
@kertal kertal added loe:medium Medium Level of Effort impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. labels Aug 10, 2023
@kertal kertal mentioned this issue Sep 26, 2023
Closed
@kertal kertal changed the title [UnifiedDocViewer] Responsive Actions [UnifiedDocViewer] Redesign Actions to be responsive Oct 3, 2023
@kertal kertal assigned lukasolson and jughosta and unassigned lukasolson Nov 30, 2023
@jughosta jughosta mentioned this issue Dec 20, 2023
Merged
4 tasks
delanni pushed a commit to delanni/kibana that referenced this issue Jan 11, 2024
@jughosta @kibanamachine
@davismcphee @delanni
[UnifiedDocViewer] Redesign header and make actions responsive (elast…
00bc5b1 
…ic#173780)

- Resolves elastic#163239
- Resolves elastic#164660
- Related PR elastic#173765

## Summary

- large screen and max 3 items => it will render an icon and a label for
each action:
<img width="500" alt="Screenshot 2024-01-03 at 18 02 23"
src="https://github.com/elastic/kibana/assets/1415710/f125a544-59c2-4ac9-aa87-9e72dd2c6deb">

- otherwise: max 3 icons and the rest in a context menu:
<img width="400" alt="Screenshot 2024-01-03 at 18 02 07"
src="https://github.com/elastic/kibana/assets/1415710/942b5cdb-2774-401a-9c68-daeb01b5d459">

- small screen: all items are in the context menu
<img width="678" alt="Screenshot 2024-01-03 at 18 01 39"
src="https://github.com/elastic/kibana/assets/1415710/52b9fb2a-b022-4a56-ad3c-e022b6876c0a">


I also extended "Discover customization" example plugin to showcase more
actions. For testing you can run kibana with `yarn start --run-examples`
and update number of additional actions locally via
https://github.com/jughosta/kibana/blob/690c38e689d8fb802cce8155c1a300f5ca9cb94f/examples/discover_customization_examples/public/plugin.tsx#L411

### 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] 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)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
@jughosta @kibanamachine
@davismcphee @CoenWarmer
[UnifiedDocViewer] Redesign header and make actions responsive (elast…
854750b 
…ic#173780)

- Resolves elastic#163239
- Resolves elastic#164660
- Related PR elastic#173765

## Summary

- large screen and max 3 items => it will render an icon and a label for
each action:
<img width="500" alt="Screenshot 2024-01-03 at 18 02 23"
src="https://github.com/elastic/kibana/assets/1415710/f125a544-59c2-4ac9-aa87-9e72dd2c6deb">

- otherwise: max 3 icons and the rest in a context menu:
<img width="400" alt="Screenshot 2024-01-03 at 18 02 07"
src="https://github.com/elastic/kibana/assets/1415710/942b5cdb-2774-401a-9c68-daeb01b5d459">

- small screen: all items are in the context menu
<img width="678" alt="Screenshot 2024-01-03 at 18 01 39"
src="https://github.com/elastic/kibana/assets/1415710/52b9fb2a-b022-4a56-ad3c-e022b6876c0a">


I also extended "Discover customization" example plugin to showcase more
actions. For testing you can run kibana with `yarn start --run-examples`
and update number of additional actions locally via
https://github.com/jughosta/kibana/blob/690c38e689d8fb802cce8155c1a300f5ca9cb94f/examples/discover_customization_examples/public/plugin.tsx#L411

### 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] 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)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jughosta jughosta

Labels
enhancement New value added to drive a business result Feature:UnifiedDocViewer Issues relating to the unified doc viewer component impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[UnifiedDocViewer] Redesign header and make actions responsive jughosta/kibana
4 participants
@kertal @lukasolson @jughosta @elasticmachine