test(#3609): add modal actions padding playground pages and test - #4147
Open
Spark450 wants to merge 3 commits into
Open
test(#3609): add modal actions padding playground pages and test#4147Spark450 wants to merge 3 commits into
Spark450 wants to merge 3 commits into
Conversation
|
Preview links
Built from commit 8987cd6. Previews are removed automatically when this PR closes. |
Spark450
force-pushed
the
mark/3609-modal-scroll-padding
branch
from
July 17, 2026 22:04
dbf3f85 to
9a55826
Compare
The actual fix for the cramped modal footer actions is a design token change (modal-actions-padding to a symmetric 24px desktop / 16px mobile) in GovAlta/design-tokens#168. This adds the React and Angular playground pages so reviewers can verify the spacing once ui-components bumps to the new design-tokens release, plus a browser regression test that asserts the footer actions top padding. The test is skipped until that version bump, since the currently installed token still yields 8px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Spark450
force-pushed
the
mark/3609-modal-scroll-padding
branch
from
July 20, 2026 23:12
9a55826 to
2c31ef0
Compare
Spark450
changed the title
twjeffery
marked this pull request as ready for review
August 5, 2026 18:01
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
2 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.
Before
The modal footer actions had uneven padding, 8px at the top against 32px at the bottom on desktop, so the Cancel and Save buttons looked cramped against the divider above them.
After
The fix is a design token change rather than a component change.
modal-actions-paddingbecomes an even 24px on all sides on desktop, and 16px on mobile. That's in GovAlta/design-tokens#168.That fix is already live. It's in design-tokens 2.12.0, and this repo has been on 2.12.0 since #4184 merged on July 31.
This PR is now just the playground pages so the spacing can be checked by eye:
bugs/3609bugs/3609Why there is no browser test
This originally included a browser test, skipped until the design tokens version bump.
Picking it back up, the test can't really see the fix. Our browser tests only load the V1 tokens, and this fix is a V2 token, so in that environment the modal falls back to its hardcoded values and the test ends up checking numbers that never reach anyone.
Getting it working means loading the V2 tokens in the browser test setup. That does work, but it also turns up a few other tests that look like they're checking fallback values, so it's better as its own change than folded in here.
Steps to test
npm run serve:prs:react, then openbugs/3609.npm run serve:prs:angular, then openbugs/3609.