diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c1dab06389d..843c860dd20 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -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 # +## Impact to users -## Impact to users +## Screenshots # (optional) -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) + + ## 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 +- [ ] **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 diff --git a/wiki/contributing-to-eui/designing/README.md b/wiki/contributing-to-eui/designing/README.md new file mode 100644 index 00000000000..8a0d1462e84 --- /dev/null +++ b/wiki/contributing-to-eui/designing/README.md @@ -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.