Adding bottom In/out panel transition icons by l-suarez · Pull Request #9528 · elastic/eui

l-suarez · 2026-03-24T15:09:11Z

Made-with: Cursor

Summary

Added two new glyphicons: transitionBottomIn and transitionBottomOut, complementing the existing transitionLeftIn, transitionLeftOut, transitionTopIn, and transitionTopOut icon set.
SVGs added to packages/eui/src/components/icon/svgs/
Icon map entries added in alphabetical order in icon_map.ts
Icons registered in the website docs (icon_types.ts) for display on the icons page

QA

Ran yarn compile-icons to generate TSX assets from SVGs
Ran yarn run test-unit icon -u — all 769 tests passed, 2 snapshots written
Pre-push hook passed — 5,073 tests passed across 367 test suites

Screenshot

New icons

Icon library in my local

Impact Assessment

🔴 Breaking changes — None. This is a purely additive change — two new icons (transitionBottomIn, transitionBottomOut) are added to the icon map. No existing icons or APIs are modified or removed. Zero existing usages in Kibana/Cloud UI are impacted.
💅 Visual changes — None to existing components. The new icons follow the same 16x16 SVG grid and styling conventions as the existing transitionLeftIn/Out and transitionTopIn/Out icons. No style overrides are affected.
🧪 Test impact — Minimal. Two new snapshots were added for the new icons in icon.test.tsx.snap. No existing snapshots or tests were modified or broken.
🔧 Hard to integrate — No. The new icons are opt-in — they are only rendered when explicitly referenced by name. No Kibana/Cloud UI branches are needed.

Impact level: 🟢 Low

Release Readiness

QA instructions for reviewer

1. Visual verification

Run yarn workspace @elastic/eui-website build:workspaces && yarn workspace @elastic/eui-website start
Open http://localhost:3000/docs/components/display/icons/
Search for transitionBottom — both transitionBottomIn and transitionBottomOut should appear in the icons grid
Verify the icons render correctly at the default size (16x16)
Switch to dark mode and confirm both icons are fully visible (paths should fill with the inverse color)

2. Icon consistency

Compare transitionBottomIn / transitionBottomOut against transitionTopIn / transitionTopOut and transitionLeftIn / transitionLeftOut — they should follow the same visual language (arrow direction + hatched panel pattern)
- transitionBottomIn: arrow pointing up (into the panel), hatched area at the bottom
- transitionBottomOut: arrow pointing down (out of the panel), hatched area at the bottom

3. Code review checklist

packages/eui/src/components/icon/svgs/ — two new SVG files (transition_bottom_in.svg, transition_bottom_out.svg) with viewBox="0 0 16 16"
packages/eui/src/components/icon/assets/ — two generated TSX files (transition_bottom_in.tsx, transition_bottom_out.tsx) with // THIS IS A GENERATED FILE header
packages/eui/src/components/icon/icon_map.ts — transitionBottomIn and transitionBottomOut entries placed alphabetically before transitionLeftIn
packages/website/docs/components/display/icons/icon_types.ts — both icon names added alphabetically before transitionLeftIn
packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap — two new snapshots added

4. Tests

Run yarn run test-unit icon -u from packages/eui — all tests should pass with no unexpected snapshot changes

- [x] Filled out all sections above

QA: Tested light/dark modes ~~, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader~~ — Icons are purely visual SVGs with no interactive behavior; tested light and dark mode rendering
QA: Tested in CodeSandbox and Kibana — New icons are additive and not yet consumed in Kibana
QA: Tested docs changes — Verified icons appear on the icons documentation page
Tests: Added/updated Jest ~~, Cypress, and VRT~~ — Jest snapshots updated; no interactive behavior requiring Cypress; VRT will be captured automatically
Changelog: Not added changelog entry
Breaking changes: Added breaking change label — Not applicable; purely additive change

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

Made-with: Cursor

weronikaolejniczak · 2026-03-25T09:05:39Z

Hey, @l-suarez 👋🏻 thanks for contributing, so exciting! We're missing one thing:

Please add an .md file named 9528.md to the changelogs/upcoming/ directory of the respective packages.
Example: packages/eui/changelogs/upcoming/9528.md
You can read more about changelogs here: https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/documenting/changelogs.md

Made-with: Cursor

l-suarez · 2026-03-25T10:19:38Z

Thanks @weronikaolejniczak, yes! it's my first PR :) so excited, I hope I did it right, I had help from an amazing engineer.

weronikaolejniczak · 2026-03-25T10:24:40Z

@l-suarez AFAIK we'd also need to add these SVGs to EUI Borealis library. We need to ensure parity between Figma and code.

Icons LGTM but pinging @MichaelMarcialis just in case (sorry, Jose is on PTO 🙏🏻)

l-suarez · 2026-03-25T10:29:49Z

Cool, both added to the Figma library

elasticmachine · 2026-03-25T10:49:40Z

💚 Build Succeeded

History

💚 Build #3061 succeeded be7ec6f

weronikaolejniczak

Yay! 🎉 First PR done 🥳

I see that Michael is also off, but I checked both SVGs and they look good 👌🏻 thank you for adding them to Figma lib. Let's merge this! 🟢

elasticmachine · 2026-03-25T11:44:14Z

💚 Build Succeeded

Buildkite Build
Commit: 460c77d

History

💚 Build #6112 succeeded be7ec6f

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

## Dependency updates - `@elastic/eui` - v114.0.0 ⏩ v114.1.0 - `@elastic/eslint-plugin-eui` - v2.11.0 ⏩ v2.11.1 --- ## Package updates ### @elastic/eui [`v114.1.0`](https://github.com/elastic/eui/releases/v114.1.0) - Added an optional `tooltipProps` prop to `EuiMarkdownEditorHelpButton` ([#9546](elastic/eui#9546)) - Added a warning when non-recommended units are used in `width`, `minWidth` or `maxWidth` props on `<EuiTableFooterCell>`, `<EuiTableHeaderCell>`, `<EuiTableHeaderCellCheckbox>` as well as the `columns` configuration on `<EuiBasicTable>` and `<EuiInMemoryTable>` ([#9540](elastic/eui#9540)) - Added `transitionBottomIn` and `transitionBottomOut` icons to `EuiIcon` ([#9528](elastic/eui#9528)) **Bug fixes** - Fixed `EuiFlyoutManager` animation flickering when switching between flyout sessions by removing intermediate transition stages (backgrounding, returning, closing) and limiting opening animations to the initial flyout and first child only ([#9514](elastic/eui#9514)) - Fixed rendering of `EuiTableHeaderMobile` when `responsiveBreakpoint=false` prop is set ([#9531](elastic/eui#9531)) ### @elastic/eslint-plugin-eui v2.11.1 **Bug fixes** - Fixed `no-css-color` ESLint rule crash when analyzing functions that return `undefined` or non-object values ([#9368](elastic/eui#9368)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Dependency updates - `@elastic/eui` - v114.0.0 ⏩ v114.1.0 - `@elastic/eslint-plugin-eui` - v2.11.0 ⏩ v2.11.1 --- ## Package updates ### @elastic/eui [`v114.1.0`](https://github.com/elastic/eui/releases/v114.1.0) - Added an optional `tooltipProps` prop to `EuiMarkdownEditorHelpButton` ([elastic#9546](elastic/eui#9546)) - Added a warning when non-recommended units are used in `width`, `minWidth` or `maxWidth` props on `<EuiTableFooterCell>`, `<EuiTableHeaderCell>`, `<EuiTableHeaderCellCheckbox>` as well as the `columns` configuration on `<EuiBasicTable>` and `<EuiInMemoryTable>` ([elastic#9540](elastic/eui#9540)) - Added `transitionBottomIn` and `transitionBottomOut` icons to `EuiIcon` ([elastic#9528](elastic/eui#9528)) **Bug fixes** - Fixed `EuiFlyoutManager` animation flickering when switching between flyout sessions by removing intermediate transition stages (backgrounding, returning, closing) and limiting opening animations to the initial flyout and first child only ([elastic#9514](elastic/eui#9514)) - Fixed rendering of `EuiTableHeaderMobile` when `responsiveBreakpoint=false` prop is set ([elastic#9531](elastic/eui#9531)) ### @elastic/eslint-plugin-eui v2.11.1 **Bug fixes** - Fixed `no-css-color` ESLint rule crash when analyzing functions that return `undefined` or non-object values ([elastic#9368](elastic/eui#9368)) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Add transitionBottomIn and transitionBottomOut icons

8d5df3d

Made-with: Cursor

l-suarez requested a review from a team as a code owner March 24, 2026 15:09

weronikaolejniczak self-requested a review March 24, 2026 15:28

Replace transitionBottomIn/Out icons with compressed snake_case versions

be7ec6f

Made-with: Cursor

Add changelog entry for transitionBottomIn/Out icons

45b2614

Made-with: Cursor

Merge branch 'main' into feat/add-transition-bottom-icons

460c77d

weronikaolejniczak approved these changes Mar 25, 2026

View reviewed changes

weronikaolejniczak merged commit 54d6026 into elastic:main Mar 25, 2026
5 checks passed

mgadewoll mentioned this pull request Apr 7, 2026

Update EUI to v114.1.0 elastic/kibana#261539

Merged

weronikaolejniczak added a commit to weronikaolejniczak/eui that referenced this pull request Apr 7, 2026

Adding bottom In/out panel transition icons (elastic#9528)

fbcd8a0

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

akowalska622 mentioned this pull request Apr 8, 2026

[Discover] Add EUI icons for panel toggle controls in Discover elastic/kibana#257879

Closed

florent-leborgne mentioned this pull request Apr 17, 2026

Add 3 new icons from EUI: add_to_dashboard, transition_bottom_in/out elastic/docs-builder#3142

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding bottom In/out panel transition icons#9528

Adding bottom In/out panel transition icons#9528
weronikaolejniczak merged 4 commits intoelastic:mainfrom
l-suarez:feat/add-transition-bottom-icons

l-suarez commented Mar 24, 2026 •

edited

Loading

Uh oh!

weronikaolejniczak commented Mar 25, 2026

Uh oh!

l-suarez commented Mar 25, 2026

Uh oh!

weronikaolejniczak commented Mar 25, 2026

Uh oh!

l-suarez commented Mar 25, 2026

Uh oh!

elasticmachine commented Mar 25, 2026

Uh oh!

weronikaolejniczak left a comment

Uh oh!

elasticmachine commented Mar 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

l-suarez commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Screenshot

New icons

Icon library in my local

Impact Assessment

Release Readiness

QA instructions for reviewer

1. Visual verification

2. Icon consistency

3. Code review checklist

4. Tests

- [x] Filled out all sections above

Reviewer checklist

Uh oh!

weronikaolejniczak commented Mar 25, 2026

Uh oh!

l-suarez commented Mar 25, 2026

Uh oh!

weronikaolejniczak commented Mar 25, 2026

Uh oh!

l-suarez commented Mar 25, 2026

Uh oh!

elasticmachine commented Mar 25, 2026

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 25, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

l-suarez commented Mar 24, 2026 •

edited

Loading