Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 35 additions & 27 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,51 @@ Generally, most PRs should have a related issue from the [public EUI repo](https
If this change does *not* have an issue associated with, or it is not clear in the issue, please clearly explain *why* we are making this change. This is valuable context for our changelogs.
-->

## Screenshots <a href="#user-content-screenshots" id="screenshots">#</a>
## Impact to users

<!--
If this change includes changes to UI, it is important to include screenshots or gif. This helps our users understand what changed when reviewing our changelogs.
How will this change impact EUI users? If it's a breaking change, what will they need to do to handle this change when upgrading? Take a moment to look at usage in Kibana and consider how many usages this will impact and note it here.

Even if it is not a breaking change, how significant is the visual change? Is it a large enough visual change that we would want them advise them to test it?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Considering that we would want to be as confident about updates as possible before merging and releasing, do we want to add a note to add links to required changes that are prepared ahead of time?
Or - if we want to highlight it more - do we want it to be a separate section (maybe something like "Release information" 🤔) as it's for the elastic consumers (Kibana/Cloud) we update ourselves specifically?

Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mgadewoll I agree 👍🏻 Instead of creating a separate section, I would rename this one "Release information" and rephrase:

Detail the impact of this change, including whether it's breaking, requires code updates or targeted testing in consumers (e.g. Kibana, Cloud UI), and the significance of any visual changes.

If applicable, please prepare the necessary code changes and link them here.

Wdyt?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weronikaolejniczak Yep agreed, that sounds good 👍

-->

## Impact to users
## Screenshots <a href="#user-content-screenshots" id="screenshots">#</a> (optional)

<!--
How will this change impact EUI users? If it's a breaking change, what will they need to do to handle this change when upgrading? Take a moment to look at usage in Kibana and consider how many usages this will impact and note it here.
If this change includes changes to UI, it is important to include screenshots or gif. This helps our users understand what changed when reviewing our changelogs.
-->

Even if it is not a breaking change, how significant is the visual change? Is it a large enough visual change that we would want them advise them to test it?
### Relevant links (optional)

<!--
If applicable, paste any relevant links: Figma design, documentation website, migration instructions and plan (if a breaking change).
-->

## QA

Remove or strikethrough items that do not apply to your PR.

### General checklist
### Release checklist
- [ ] **[changelog](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/changelogs.md)** added
- [ ] **[documentation](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting)** updated
- [ ] **[EUI Figma](https://www.figma.com/files/776883452119367313/recents-and-sharing?fuid=613449417977720558)** updated
Copy link
Contributor

@JoseLuisGJ JoseLuisGJ Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [ ] **[EUI Figma](https://www.figma.com/files/776883452119367313/recents-and-sharing?fuid=613449417977720558)** updated
- [ ] **[EUI Figma](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/designing)** updated

I added a draft README.md document describing what we can request regarding any Figma or design sync we may need.

- [ ] **if breaking changes**
- [ ] **`breaking change`** - label added
- [ ] **migration instructions** - exist
- [ ] **migration plan** - plan to update in Kibana and Cloud UI documented

- Browser QA
- [ ] Checked in both **light and dark** modes
- [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes**
### QA checklist
- **Browser**
- [ ] **light and dark** modes
- [ ] **high contrast modes** on [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025)
- (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.)
- [ ] Checked in **mobile**
- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
- [ ] Checked for **accessibility** including keyboard-only and screenreader modes
- Docs site QA
- [ ] Added **[documentation](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting)**
- [ ] Props have proper **autodocs** (using `@default` if default values are missing) and **[playground toggles](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/playgrounds.md)**
- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for any docs examples
- Code quality checklist
- [ ] Added or updated **[jest](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/unit-testing.md) and [cypress](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/cypress-testing.md) tests**
- [ ] Updated **[visual regression tests](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/visual-regression-testing.md)**
- Release checklist
- [ ] A **[changelog](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/changelogs.md)** entry exists and is marked appropriately
- [ ] If applicable, added the **breaking change** issue label (and filled out the breaking change checklist)
- [ ] If the changes unblock an issue in a different repo, smoke tested carefully (see [Testing EUI features in Kibana ahead of time](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/testing-in-kibana.md))
- Designer checklist
- [ ] If applicable, [file an issue](https://github.com/elastic/platform-ux-team/issues/new/choose) to update [EUI's Figma library](https://www.figma.com/community/file/964536385682658129) with any corresponding UI changes. _(This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)_
- [ ] **mobile**
- [ ] **Chrome**, **Safari**, **Edge**, and **Firefox**
- [ ] **accessibility** - including keyboard-only and screen reader modes
- **Docs site**
- [ ] **documentation** - added or updated
- [ ] **props** - props have proper **autodocs** (using `@default` if default values are missing)
- [ ] **[Code Sandbox](https://codesandbox.io/)** - works in docs examples
- [ ] **Tested in Kibana (or elsewhere)** - if the changes unblock an issue in a different repo, smoke tested carefully (see [Testing EUI features in Kibana ahead of time](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/testing-in-kibana.md))

### Code quality checklist
- [ ] **[Jest](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/unit-testing.md) and [Cypress](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/cypress-testing.md) tests** - added or updated
- [ ] **[visual regression tests](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/visual-regression-testing.md)** - added or updated
18 changes: 18 additions & 0 deletions wiki/contributing-to-eui/designing/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Design System Synchronization Guidelines
When submitting code changes that affect the visual design, behavior, or properties of EUI components or tokens, it's critical to ensure the [Elastic UI Borealis](https://www.figma.com/design/FHys7gLzyvD1gc9DrJM6D8/Elastic-UI--Borealis-?m=auto) Figma library remains synchronized with the codebase. This maintains design-development consistency across the entire Elastic ecosystem.

## When Figma Updates Are Required
Code changes that impact design and require Figma library updates include:

- *Component visual changes:* Styling modifications, color updates, spacing adjustments, typography changes
- *New component creation:* Following the four-step component creation process
- *Props modifications:* Adding, removing, or changing component properties that affect visual output
- *Icon additions/changes:* New icons or modifications to existing ones per icon creation guidelines
- *Design token updates:* Changes to colors, spacing, typography, or other design tokens
*Behavioral changes:* Interactions, states, or animations that alter user experience

## Design Review Process

1. Contact the design colleague in your team who can support you throughout the process, if needed.
2. Create a new Figma branch in the [Elastic UI Borealis](https://www.figma.com/design/FHys7gLzyvD1gc9DrJM6D8/Elastic-UI--Borealis-?m=auto) library that includes the proposed changes and links to the related PR.
3. Request a design review in Figma using the built-in workflow, or share the branch in the #eui-figma Slack channel.