fix(ActionList/Menu): vertically center trailing slot of items - #3887
Open
saurav12 wants to merge 3 commits into
Open
fix(ActionList/Menu): vertically center trailing slot of items#3887saurav12 wants to merge 3 commits into
saurav12 wants to merge 3 commits into
Conversation
The trailing slot was rendered without a wrapper of its own, so with the row's flex-start alignment it stuck to the top of the item's first row instead of sitting on the same optical center as the title and the leading slot (a 2px offset for a medium icon). Co-authored-by: Cursor <cursoragent@cursor.com>
saurav12
requested review from
anuraghazra,
kamleshchandnani,
ravikumar-rajagopalan,
rohankokane-dev,
saurabhdaware and
swapnil-kr1
as code owners
August 17, 2026 05:27
🦋 Changeset detectedLatest commit: 3888287 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
(Review Cancelled - Superseded by a new run) |
Collaborator
🛡️ Coverage ReportSummaryFull Coverage Details |
kamaleshs-bridge4
approved these changes
Aug 17, 2026
kamaleshs-bridge4
left a comment
kamaleshs-bridge4
left a comment
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
⏭️ 4 skipped
Usage
import { ActionList, ActionListSection, ActionListItem, ActionListItemIcon } from '@razorpay/blade/components';
import { ArrowRightIcon, DownloadIcon } from '@razorpay/blade/icons';
<ActionList>
<ActionListSection>
<ActionListItem
title="Create a Payout"
description="Pay a single beneficiary"
value="create_payout"
leading={<ActionListItemIcon icon={DownloadIcon} />}
trailing={<ActionListItemIcon icon={ArrowRightIcon} />}
/>
</ActionListSection>
</ActionList>
kamaleshs-bridge4
added
the
rcore:eligible-for-auto-approval
Contributor
|
(Review Cancelled - Superseded by a new run) |
![rzp-slash[bot]](https://avatars.githubusercontent.com/u/7713209?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 4 passed
Passing checks (4)
| Check | Screenshot |
|---|---|
| ✅ ActionList with trailing components |  |
| ✅ Menu Default |  |
| ✅ Dropdown with Select |  |
| ✅ ActionList Custom Items |  |
Usage
import { ActionListItem, ActionListItemIcon, ArrowRightIcon } from '@razorpay/blade/components';
<ActionListItem
title="Create a Payout"
description="Pay a single beneficiary"
value="create_payout"
leading={<ActionListItemIcon icon={DownloadIcon} />}
trailing={<ActionListItemIcon icon={ArrowRightIcon} />}
/>
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
kamaleshs-bridge4
approved these changes
Aug 18, 2026
kamaleshs-bridge4
left a comment
kamaleshs-bridge4
left a comment
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 7 passed
Passing checks (7)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The
trailingslot of dropdown / menu items was top-pinned instead of being vertically centered, so a trailing icon did not line up with the item'stitleandleadingslot.Measured on
ActionListin Storybook (medium trailing icon, 20px first row):Changes
BaseMenuItemnow wrapstrailingin a centered box that is one "first row" tall, mirroring whatleadingalready does.minHeightis used instead of a fixedheightso taller trailing content (aBadge, or anything custom passed to aMenuItem) keeps growing naturally instead of overflowing a 20px box.ActionListstory item with adescriptionplus a trailing icon, so the reported case is covered by the KitchenSink Chromatic snapshot.Since
BaseMenuItembacksActionListItem,MenuItemand the dropdown input triggers, this corrects trailing alignment for trailing icons, shortcut text like⌘ + H, badges and counters everywhere at once.Additional Information
Where to review visually:
Components/Dropdown/ActionList/Stories→ Trailing icons/texts on Items (includes the new item with a description)Components/Dropdown/With Select→ With Header Footer Scrollbar (first option has leading icon, description and a trailing arrow)Local verification:
yarn typecheckpasses, full native suite passes, and the full web suite passes except a pre-existingSankeyChartsnapshot that fails on a cleanmastertoo (font-metric dependent SVG text widths, unrelated to this change).Component Checklist
Made with Cursor