Skip to content

ActionList trailingAction fills full height for items with block description #7114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
liuliu-dev merged 8 commits into from
Nov 4, 2025
Merged

ActionList trailingAction fills full height for items with block description #7114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
29ca317
remove border-radius:0
liuliu-dev Oct 31, 2025
c6c0be9
changeset
liuliu-dev Oct 31, 2025
2c023d4
Merge branch 'main' into liuliu/rounded-corner-in-trailing-action
liuliu-dev Nov 3, 2025
ce1c83f
full height approach
liuliu-dev Nov 3, 2025
a5d92fe
full height on trailing action loading button
liuliu-dev Nov 4, 2025
d2354d1
Merge branch 'main' into liuliu/rounded-corner-in-trailing-action
liuliu-dev Nov 4, 2025
76316a9
update changeset
liuliu-dev Nov 4, 2025
5e12942
Merge branch 'liuliu/rounded-corner-in-trailing-action' of https://gi…
liuliu-dev Nov 4, 2025
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
5 changes: 5 additions & 0 deletions .changeset/chilly-cloths-heal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

ActionList: Fix trailing action button to take full height.
6 changes: 6 additions & 0 deletions packages/react/src/ActionList/ActionList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -588,6 +588,11 @@

.TrailingAction {
grid-area: trailingAction;

/* if child is loading button */
& > *[data-loading-wrapper] {
height: 100%;
}
}

/* wrapper span
Expand Down Expand Up @@ -689,6 +694,7 @@ span wrapping svg or text */
.TrailingActionButton {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 100%;

/* Preserve width consistency when loading state is active for text buttons only */
&[data-loading='true']:has([data-component='buttonContent']) {
Expand Down
Loading