[Dashboard][Collapsable Panels] Responsive layout #200771
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mbondyra
added
Team:Presentation
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
mbondyra
changed the title
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
3 times, most recently
from
8ad30ee to
feada58
Compare
mbondyra
changed the title
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
7 times, most recently
from
ae60f56 to
640252b
Compare
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
from
640252b to
da31420
Compare
Heenawter
reviewed
Nov 22, 2024
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
from
d20b9f3 to
cd143d7
Compare
mbondyra
commented
Nov 27, 2024
💚 Build Succeeded
Metrics [docs]Public APIs missing comments
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
|
Heenawter
added
backport:prev-minor
…d/collapsible_panels/maximize_panel
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
from
605c841 to
6f40808
Compare
mbondyra
force-pushed
the
dashboard/collapsible_panels/maximize_panel
branch
from
6f40808 to
9583785
Compare
mbondyra
added
Project:Collapsable Panels
Heenawter
approved these changes
Nov 28, 2024
|
Starting backport for target branches: 8.x |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 28, 2024
## Summary Fixes elastic#197714 ### Key Features #### Responsiveness 1. Adds a responsive view controlled by the `accessMode` prop. 2. For the responsive version (in the `VIEW` mode), panels retain height and are arranged based on screen order (left-to-right, top-to-bottom). 3. Interactivity (drag/resize) is disabled in `view` mode. <img width="514" alt="Screenshot 2024-11-25 at 17 34 56" src="https://github.com/user-attachments/assets/6a5a97aa-de9b-495a-b1de-301bc935a5ab"> #### Maximization 1. Supports expanded panel view using the `expandedPanelId` prop. 2. Interactivity (drag/resize) is disabled when a panel is expanded. <img width="1254" alt="Screenshot 2024-11-25 at 17 35 05" src="https://github.com/user-attachments/assets/c83014f6-18ad-435b-a59d-1d3ba3f80d84"> #### Considerations 1. CSS elements naming convention: Main component uses `kbnGrid` class, with modifiers like `kbnGrid--nonInteractive`. For the drag handle of `GridPanel` I used `kbnGridPanel__dragHandle` classname. 2. Classes vs. Inline Styles: I opted for using `kbnGrid--nonInteractive` instead of adding one more subscription to `GridPanel` to modify the styles inline. It's the first time in this package that I used classes instead of inline styles for no-initial styles setting. 3. Naming Convention: I opted for using the `expanded` word to describe an expanded panel. Another one could be `maximized` as it's more used in UI, but less in the legacy code. 4. Interactivity (drag/resize) is disabled in responsive mode but we could consider to limit this to small viewports only (<768px). --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit d92aa91)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Nov 29, 2024
…02225) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard][Collapsable Panels] Responsive layout (#200771)](#200771) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Marta Bondyra","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-28T18:31:09Z","message":"[Dashboard][Collapsable Panels] Responsive layout (#200771)\n\n## Summary\r\n\r\nFixes https://github.com/elastic/kibana/issues/197714\r\n\r\n### Key Features\r\n\r\n#### Responsiveness\r\n\r\n1. Adds a responsive view controlled by the `accessMode` prop. \r\n2. For the responsive version (in the `VIEW` mode), panels retain height\r\nand are arranged based on screen order (left-to-right, top-to-bottom).\r\n3. Interactivity (drag/resize) is disabled in `view` mode.\r\n\r\n<img width=\"514\" alt=\"Screenshot 2024-11-25 at 17 34 56\"\r\nsrc=\"https://github.com/user-attachments/assets/6a5a97aa-de9b-495a-b1de-301bc935a5ab\">\r\n\r\n#### Maximization\r\n1. Supports expanded panel view using the `expandedPanelId` prop.\r\n2. Interactivity (drag/resize) is disabled when a panel is expanded.\r\n\r\n<img width=\"1254\" alt=\"Screenshot 2024-11-25 at 17 35 05\"\r\nsrc=\"https://github.com/user-attachments/assets/c83014f6-18ad-435b-a59d-1d3ba3f80d84\">\r\n\r\n#### Considerations\r\n1. CSS elements naming convention: Main component uses `kbnGrid` class,\r\nwith modifiers like `kbnGrid--nonInteractive`. For the drag handle of\r\n`GridPanel` I used `kbnGridPanel__dragHandle` classname.\r\n2. Classes vs. Inline Styles: I opted for using\r\n`kbnGrid--nonInteractive` instead of adding one more subscription to\r\n`GridPanel` to modify the styles inline. It's the first time in this\r\npackage that I used classes instead of inline styles for no-initial\r\nstyles setting.\r\n3. Naming Convention: I opted for using the `expanded` word to describe\r\nan expanded panel. Another one could be `maximized` as it's more used in\r\nUI, but less in the legacy code.\r\n4. Interactivity (drag/resize) is disabled in responsive mode but we\r\ncould consider to limit this to small viewports only (<768px).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"d92aa91c3a8329057a2156ea7f1ecdc94a7a3cc2","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","loe:medium","release_note:skip","v9.0.0","backport:prev-minor","Project:Collapsable Panels"],"title":"[Dashboard][Collapsable Panels] Responsive layout","number":200771,"url":"https://github.com/elastic/kibana/pull/200771","mergeCommit":{"message":"[Dashboard][Collapsable Panels] Responsive layout (#200771)\n\n## Summary\r\n\r\nFixes https://github.com/elastic/kibana/issues/197714\r\n\r\n### Key Features\r\n\r\n#### Responsiveness\r\n\r\n1. Adds a responsive view controlled by the `accessMode` prop. \r\n2. For the responsive version (in the `VIEW` mode), panels retain height\r\nand are arranged based on screen order (left-to-right, top-to-bottom).\r\n3. Interactivity (drag/resize) is disabled in `view` mode.\r\n\r\n<img width=\"514\" alt=\"Screenshot 2024-11-25 at 17 34 56\"\r\nsrc=\"https://github.com/user-attachments/assets/6a5a97aa-de9b-495a-b1de-301bc935a5ab\">\r\n\r\n#### Maximization\r\n1. Supports expanded panel view using the `expandedPanelId` prop.\r\n2. Interactivity (drag/resize) is disabled when a panel is expanded.\r\n\r\n<img width=\"1254\" alt=\"Screenshot 2024-11-25 at 17 35 05\"\r\nsrc=\"https://github.com/user-attachments/assets/c83014f6-18ad-435b-a59d-1d3ba3f80d84\">\r\n\r\n#### Considerations\r\n1. CSS elements naming convention: Main component uses `kbnGrid` class,\r\nwith modifiers like `kbnGrid--nonInteractive`. For the drag handle of\r\n`GridPanel` I used `kbnGridPanel__dragHandle` classname.\r\n2. Classes vs. Inline Styles: I opted for using\r\n`kbnGrid--nonInteractive` instead of adding one more subscription to\r\n`GridPanel` to modify the styles inline. It's the first time in this\r\npackage that I used classes instead of inline styles for no-initial\r\nstyles setting.\r\n3. Naming Convention: I opted for using the `expanded` word to describe\r\nan expanded panel. Another one could be `maximized` as it's more used in\r\nUI, but less in the legacy code.\r\n4. Interactivity (drag/resize) is disabled in responsive mode but we\r\ncould consider to limit this to small viewports only (<768px).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"d92aa91c3a8329057a2156ea7f1ecdc94a7a3cc2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200771","number":200771,"mergeCommit":{"message":"[Dashboard][Collapsable Panels] Responsive layout (#200771)\n\n## Summary\r\n\r\nFixes https://github.com/elastic/kibana/issues/197714\r\n\r\n### Key Features\r\n\r\n#### Responsiveness\r\n\r\n1. Adds a responsive view controlled by the `accessMode` prop. \r\n2. For the responsive version (in the `VIEW` mode), panels retain height\r\nand are arranged based on screen order (left-to-right, top-to-bottom).\r\n3. Interactivity (drag/resize) is disabled in `view` mode.\r\n\r\n<img width=\"514\" alt=\"Screenshot 2024-11-25 at 17 34 56\"\r\nsrc=\"https://github.com/user-attachments/assets/6a5a97aa-de9b-495a-b1de-301bc935a5ab\">\r\n\r\n#### Maximization\r\n1. Supports expanded panel view using the `expandedPanelId` prop.\r\n2. Interactivity (drag/resize) is disabled when a panel is expanded.\r\n\r\n<img width=\"1254\" alt=\"Screenshot 2024-11-25 at 17 35 05\"\r\nsrc=\"https://github.com/user-attachments/assets/c83014f6-18ad-435b-a59d-1d3ba3f80d84\">\r\n\r\n#### Considerations\r\n1. CSS elements naming convention: Main component uses `kbnGrid` class,\r\nwith modifiers like `kbnGrid--nonInteractive`. For the drag handle of\r\n`GridPanel` I used `kbnGridPanel__dragHandle` classname.\r\n2. Classes vs. Inline Styles: I opted for using\r\n`kbnGrid--nonInteractive` instead of adding one more subscription to\r\n`GridPanel` to modify the styles inline. It's the first time in this\r\npackage that I used classes instead of inline styles for no-initial\r\nstyles setting.\r\n3. Naming Convention: I opted for using the `expanded` word to describe\r\nan expanded panel. Another one could be `maximized` as it's more used in\r\nUI, but less in the legacy code.\r\n4. Interactivity (drag/resize) is disabled in responsive mode but we\r\ncould consider to limit this to small viewports only (<768px).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"d92aa91c3a8329057a2156ea7f1ecdc94a7a3cc2"}}]}] BACKPORT--> Co-authored-by: Marta Bondyra <[email protected]> Co-authored-by: Hannah Mudge <[email protected]>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Dec 12, 2024
## Summary Fixes elastic#197714 ### Key Features #### Responsiveness 1. Adds a responsive view controlled by the `accessMode` prop. 2. For the responsive version (in the `VIEW` mode), panels retain height and are arranged based on screen order (left-to-right, top-to-bottom). 3. Interactivity (drag/resize) is disabled in `view` mode. <img width="514" alt="Screenshot 2024-11-25 at 17 34 56" src="https://github.com/user-attachments/assets/6a5a97aa-de9b-495a-b1de-301bc935a5ab"> #### Maximization 1. Supports expanded panel view using the `expandedPanelId` prop. 2. Interactivity (drag/resize) is disabled when a panel is expanded. <img width="1254" alt="Screenshot 2024-11-25 at 17 35 05" src="https://github.com/user-attachments/assets/c83014f6-18ad-435b-a59d-1d3ba3f80d84"> #### Considerations 1. CSS elements naming convention: Main component uses `kbnGrid` class, with modifiers like `kbnGrid--nonInteractive`. For the drag handle of `GridPanel` I used `kbnGridPanel__dragHandle` classname. 2. Classes vs. Inline Styles: I opted for using `kbnGrid--nonInteractive` instead of adding one more subscription to `GridPanel` to modify the styles inline. It's the first time in this package that I used classes instead of inline styles for no-initial styles setting. 3. Naming Convention: I opted for using the `expanded` word to describe an expanded panel. Another one could be `maximized` as it's more used in UI, but less in the legacy code. 4. Interactivity (drag/resize) is disabled in responsive mode but we could consider to limit this to small viewports only (<768px). --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #197714
Key Features
Responsiveness
accessModeprop.VIEWmode), panels retain height and are arranged based on screen order (left-to-right, top-to-bottom).viewmode.Maximization
expandedPanelIdprop.Considerations
kbnGridclass, with modifiers likekbnGrid--nonInteractive. For the drag handle ofGridPanelI usedkbnGridPanel__dragHandleclassname.kbnGrid--nonInteractiveinstead of adding one more subscription toGridPanelto modify the styles inline. It's the first time in this package that I used classes instead of inline styles for no-initial styles setting.expandedword to describe an expanded panel. Another one could bemaximizedas it's more used in UI, but less in the legacy code.