[Dashboard][Collapsable Panels] Grid styles #204060
Assignees
Labels
Feature:Dashboard
Dashboard related features
impact:high
Addressing this issue will have a high level of impact on the quality/strength of our product.
loe:medium
Medium Level of Effort
Project:Collapsable Panels
Related to the project for adding collapsable sections to Dashboards.
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
Comments
Heenawter
added
Feature:Dashboard
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
This was referenced Dec 12, 2024
andreadelrio
changed the title
3 tasks
Heenawter
added
loe:medium
Heenawter
added a commit
to Heenawter/kibana
that referenced
this issue
Jan 21, 2025
Closes elastic#204060 ## Summary This PR updates the styles used for `kbn-grid-layout` in Dashboard as shown below. - **Dragging** | Before | After | |--------|--------| |  |  | |  |  | - **Resizing** | Before | After | |--------|--------| |  |  | |  |  | As part of this work, I moved all aesthetic style logic out of the `kbn-grid-layout` package and added support for Emotion to the `GridLayout` component instead - this means that the consumer is responsible for applying styles based on given classes, and `kbn-grid-layout` is now less opinionated. The only styling kept in the `kbn-grid-layout` package are those that handle layout-engine specific functionality (positioning of panels, hiding edit actions in view mode, etc). In addition, I also updated the styles used in the grid example app and added settings for dynamically changing the grid gutter size + row height: https://github.com/user-attachments/assets/c2f06db1-7041-412e-b546-86b102cc0770 ### 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/src/platform/packages/shared/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] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This PR has minimal risk, since it is primarily style changes. --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 5ee4297) # Conflicts: # src/platform/packages/private/kbn-grid-layout/grid/drag_preview.tsx # src/platform/packages/private/kbn-grid-layout/grid/grid_panel/resize_handle.tsx # src/platform/packages/private/kbn-grid-layout/grid/grid_row/grid_row.tsx
viduni94
pushed a commit
to viduni94/kibana
that referenced
this issue
Jan 23, 2025
Closes elastic#204060 ## Summary This PR updates the styles used for `kbn-grid-layout` in Dashboard as shown below. - **Dragging** | Before | After | |--------|--------| |  |  | |  |  | - **Resizing** | Before | After | |--------|--------| |  |  | |  |  | As part of this work, I moved all aesthetic style logic out of the `kbn-grid-layout` package and added support for Emotion to the `GridLayout` component instead - this means that the consumer is responsible for applying styles based on given classes, and `kbn-grid-layout` is now less opinionated. The only styling kept in the `kbn-grid-layout` package are those that handle layout-engine specific functionality (positioning of panels, hiding edit actions in view mode, etc). In addition, I also updated the styles used in the grid example app and added settings for dynamically changing the grid gutter size + row height: https://github.com/user-attachments/assets/c2f06db1-7041-412e-b546-86b102cc0770 ### 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/src/platform/packages/shared/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] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks This PR has minimal risk, since it is primarily style changes. --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature:
Before we can resolve #190446, we need a final design review of the layout engine styles - for example, changing the linear grid that shows up on hover to a dot grid, maybe changing the style of the resize handle, etc.
The text was updated successfully, but these errors were encountered: