Skip to content

feat(ConfirmationDialog): Stack footer buttons responsively on small … #6408

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(ConfirmationDialog): Stack footer buttons responsively on small … #6408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions packages/react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6001,3 +6001,5 @@ N/A, re-release of v37.11.1
* [`755a1a5c`](https://github.com/primer/react/commit/755a1a5c19f6d6298f9c6785b50fed71aaea59ad) [#977](https://github.com/primer/react/pull/977) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Pagehead` to TypeScript

- [`34ff4885`](https://github.com/primer/react/commit/34ff4885311686699fbb6d2e3fab0337bad3d016) [#989](https://github.com/primer/react/pull/989) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Grid` to TypeScript

~[]
34 changes: 29 additions & 5 deletions packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* ConfirmationDialog.module.css */

.ConfirmationHeader {
display: flex;
padding: var(--base-size-8);
Expand All @@ -22,10 +24,32 @@

.ConfirmationFooter {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-gap: var(--base-size-8);
align-items: end;
justify-content: end;
grid-auto-flow: column; /* Default: arrange items in columns */
grid-auto-columns: max-content; /* Default: size columns to content */
grid-gap: var(--base-size-8); /* Space between grid items */
align-items: end; /* Align items to the end of their grid area vertically */
justify-content: end; /* Align the grid content to the end of the container horizontally */
padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);
}

/* Add this media query block to handle smaller screens */
@media (max-width: 600px) { /* Adjust '600px' to your desired breakpoint */
.ConfirmationFooter {
grid-auto-flow: row; /* NEW: Stack items vertically (each item takes its own row) */
grid-auto-columns: 1fr; /* NEW: Make each implicit column (now a row for the item) take full available width */
justify-content: stretch; /* NEW: Ensures grid items stretch horizontally to fill the container */

/* If you want the "Confirm" (primary) button to appear at the bottom of the stack,
you might need to adjust the order. With `grid-auto-flow: row`, items appear
in the order they are in the HTML. For specific reordering, you'd typically need
Flexbox with `flex-direction: column-reverse` or more complex Grid layouts
with `grid-template-areas` or `order` properties on individual buttons,
which is beyond a simple "fix bug" scope. The default HTML order will be maintained. */
}

/* Target direct children of ConfirmationFooter (which are the buttons)
to ensure they fill their grid cell's width when stacked. */
.ConfirmationFooter > * {
width: 100%; /* NEW: Ensures the button element itself expands to fill its grid area */
}
}
Loading