Skip to content

chore(button): update snapshots for the migration - #31630

Draft
thetaPC wants to merge 18 commits into
FW-6838from
FW-6838-snapshots
Draft

thetaPC wants to merge 18 commits into
FW-6838from
FW-6838-snapshots

Conversation

@thetaPC

@thetaPC thetaPC commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Issue number: resolves internal


What is the current behavior?

The button migration (#31628) changes how buttons render, but its reference snapshots haven't been updated.

What is the new behavior?

Only reference snapshots, regenerated on top of #31628 and kept here so the migration diff stays readable. The intended changes:

  • iOS buttons are shorter at every size
  • Icon-only buttons are squares as tall as a text button of the same size
  • ionic outline buttons have a darker label and a page-colored background
  • ionic toolbar buttons are 40px tall
  • ionic disabled buttons are fainter, matching the design
  • The spinner in large ionic buttons is bigger
  • Pressed ionic buttons show the ripple in ios mode too, as they already did in md mode

Any other difference is a regression. The descriptions of #31628 and its breaking changes are in that PR.

Does this introduce a breaking change?

  • Yes
  • No

Other information

ionic's dark snapshots show a white background on outline buttons because the test pages pin --ion-background-color to white. In an app, it follows the page.

Toggle's ionic snapshots also catch up on #31457, which changed the track's gray without regenerating them.

@vercel

vercel Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Oct 28, 2026 3:04am UTC

Request Review

# Conflicts:
#	core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ionic-md-ltr-light-Mobile-Safari-linux.png
# Conflicts:
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
#	core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
#	core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
#	core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
# Conflicts:
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png
#	core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png

This branch was successfully deployed

1 active deployment
Preview — 4ab20bc1 Deployed Oct 28, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants