# Backport
This will backport the following commits from `main` to `8.x`:
- [[Dashboard][`kbn-grid-layout`] Update styles
(#206503)](https://github.com/elastic/kibana/pull/206503)
<!--- Backport version: 9.6.4 -->
### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)
<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-01-21T19:52:39Z","message":"[Dashboard][`kbn-grid-layout`]
Update styles (#206503)\n\nCloses
https://github.com/elastic/kibana/issues/204060\r\n\r\n##
Summary\r\n\r\nThis PR updates the styles used for `kbn-grid-layout` in
Dashboard as\r\nshown below.\r\n\r\n- **Dragging**\r\n\r\n | Before |
After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\n-
**Resizing**\r\n\r\n | Before | After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\nAs
part of this work, I moved all aesthetic style logic out of
the\r\n`kbn-grid-layout` package and added support for Emotion to
the\r\n`GridLayout` component instead - this means that the consumer
is\r\nresponsible for applying styles based on given classes,
and\r\n`kbn-grid-layout` is now less opinionated. The only styling kept
in the\r\n`kbn-grid-layout` package are those that handle layout-engine
specific\r\nfunctionality (positioning of panels, hiding edit actions in
view mode,\r\netc).\r\n\r\nIn addition, I also updated the styles used
in the grid example app and\r\nadded settings for dynamically changing
the grid gutter size +
row\r\nheight:\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c2f06db1-7041-412e-b546-86b102cc0770\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThis PR has minimal risk, since it is primarily
style changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5ee429799449f1ce2874392bbbd0e752f42c4d50","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Team:Presentation","loe:medium","release_note:skip","impact:high","v9.0.0","backport:prev-minor","Project:Collapsable
Panels"],"title":"[Dashboard][`kbn-grid-layout`] Update
styles","number":206503,"url":"https://github.com/elastic/kibana/pull/206503","mergeCommit":{"message":"[Dashboard][`kbn-grid-layout`]
Update styles (#206503)\n\nCloses
https://github.com/elastic/kibana/issues/204060\r\n\r\n##
Summary\r\n\r\nThis PR updates the styles used for `kbn-grid-layout` in
Dashboard as\r\nshown below.\r\n\r\n- **Dragging**\r\n\r\n | Before |
After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\n-
**Resizing**\r\n\r\n | Before | After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\nAs
part of this work, I moved all aesthetic style logic out of
the\r\n`kbn-grid-layout` package and added support for Emotion to
the\r\n`GridLayout` component instead - this means that the consumer
is\r\nresponsible for applying styles based on given classes,
and\r\n`kbn-grid-layout` is now less opinionated. The only styling kept
in the\r\n`kbn-grid-layout` package are those that handle layout-engine
specific\r\nfunctionality (positioning of panels, hiding edit actions in
view mode,\r\netc).\r\n\r\nIn addition, I also updated the styles used
in the grid example app and\r\nadded settings for dynamically changing
the grid gutter size +
row\r\nheight:\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c2f06db1-7041-412e-b546-86b102cc0770\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThis PR has minimal risk, since it is primarily
style changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5ee429799449f1ce2874392bbbd0e752f42c4d50"}},"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/206503","number":206503,"mergeCommit":{"message":"[Dashboard][`kbn-grid-layout`]
Update styles (#206503)\n\nCloses
https://github.com/elastic/kibana/issues/204060\r\n\r\n##
Summary\r\n\r\nThis PR updates the styles used for `kbn-grid-layout` in
Dashboard as\r\nshown below.\r\n\r\n- **Dragging**\r\n\r\n | Before |
After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\n-
**Resizing**\r\n\r\n | Before | After |\r\n
|--------|--------|\r\n|\r\n\r\n|\r\n\r\nAs
part of this work, I moved all aesthetic style logic out of
the\r\n`kbn-grid-layout` package and added support for Emotion to
the\r\n`GridLayout` component instead - this means that the consumer
is\r\nresponsible for applying styles based on given classes,
and\r\n`kbn-grid-layout` is now less opinionated. The only styling kept
in the\r\n`kbn-grid-layout` package are those that handle layout-engine
specific\r\nfunctionality (positioning of panels, hiding edit actions in
view mode,\r\netc).\r\n\r\nIn addition, I also updated the styles used
in the grid example app and\r\nadded settings for dynamically changing
the grid gutter size +
row\r\nheight:\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c2f06db1-7041-412e-b546-86b102cc0770\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThis PR has minimal risk, since it is primarily
style changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5ee429799449f1ce2874392bbbd0e752f42c4d50"}}]}]
BACKPORT-->
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
[[example-plugins]]
== Example plugins
This folder contains example plugins. To run the plugins in this folder, use the `--run-examples` flag (without a basepath), via
[source,bash]
----
yarn start --run-examples
----
b060301d45