Skip to content

Standardize FAB colors and icon to M3 defaults#22654

Merged
nbradbury merged 5 commits intotrunkfrom
issue/CMM-1301-fab-mismatch
Mar 5, 2026
Merged

Standardize FAB colors and icon to M3 defaults#22654
nbradbury merged 5 commits intotrunkfrom
issue/CMM-1301-fab-mismatch

Conversation

@nbradbury
Copy link
Copy Markdown
Contributor

@nbradbury nbradbury commented Mar 4, 2026

Summary

Closes CMM-1301

Various screens throughout the app use different colors for FABs. The difference is especially noticeable between Compose and XML screens. This PR resolves this by:

  • Update all Compose FABs to use M3 default colors (primaryContainer/onPrimaryContainer) by removing explicit color overrides
  • Update WordPress.FloatingActionButton XML theme style (light + dark) to use colorPrimaryContainer/colorOnPrimaryContainer, making all XML FABs consistent
  • Standardize all "create" FABs to use Icons.Default.Add
  • Remove dark mode conditional hack from CampaignListingFragment FAB
  • Remove explicit backgroundTint override from media_settings_activity.xml
  • Add Compose preview for CampaignListingSuccess with FAB

Test plan

Verify the FABs on the following screens are consistent:

  • My Site screen
  • Pages screen
  • Old post list screen
  • New RS post list screen
  • Nav Menus screen
  • Media Settings screen

These two have also changed, but they can be hard to get to. I recommend relying on the previews to verify them.

  • Campaign Listing screen
  • Log Detail screen

Jetpack

combined_grid

WordPress

FAB_screens_grid

nbradbury and others added 3 commits March 4, 2026 08:51
Use consistent containerColor (onSurface) and contentColor (surface) for
all Compose FABs, remove dark mode conditional in CampaignListingFragment,
remove explicit backgroundTint override in media_settings_activity.xml,
and add CampaignListingSuccess preview with FAB.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove explicit containerColor/contentColor overrides from all Compose
FABs so they use the M3 defaults (primaryContainer/onPrimaryContainer).
Standardize all create FABs to use Icons.Default.Add instead of mixing
Icons.Rounded.Add. Clean up unused imports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Change WordPress.FloatingActionButton style in both light and dark
themes to use colorPrimaryContainer/colorOnPrimaryContainer, matching
the M3 defaults used by all Compose FABs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dangermattic
Copy link
Copy Markdown
Collaborator

dangermattic commented Mar 4, 2026

1 Warning
⚠️ PR is not assigned to a milestone.

Generated by 🚫 Danger

The colorPrimaryContainer/colorOnPrimaryContainer attributes are not
available in Theme.MaterialComponents.DayNight, causing a crash at
startup. Revert to the original theme colors for XML FABs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@wpmobilebot
Copy link
Copy Markdown
Contributor

wpmobilebot commented Mar 4, 2026

App Icon📲 You can test the changes from this Pull Request in WordPress Android by scanning the QR code below to install the corresponding build.

App NameWordPress Android
FlavorJalapeno
Build TypeDebug
Versionpr22654-058922d
Build Number1486
Application IDorg.wordpress.android.prealpha
Commit058922d
Installation URL37pn9461mrjb0
Note: Google Login is not supported on these builds.

@wpmobilebot
Copy link
Copy Markdown
Contributor

wpmobilebot commented Mar 4, 2026

App Icon📲 You can test the changes from this Pull Request in Jetpack Android by scanning the QR code below to install the corresponding build.

App NameJetpack Android
FlavorJalapeno
Build TypeDebug
Versionpr22654-058922d
Build Number1486
Application IDcom.jetpack.android.prealpha
Commit058922d
Installation URL0nk9jb3d5l69o
Note: Google Login is not supported on these builds.

@nbradbury nbradbury marked this pull request as ready for review March 4, 2026 15:20
@nbradbury nbradbury marked this pull request as draft March 4, 2026 15:27
WordPress FABs now use Automattic blue tones instead of M3 default
purple. Jetpack retains the purple M3 defaults via flavor overrides.
Updates both XML styles and Compose color schemes so all FAB rendering
paths are consistent.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Mar 4, 2026

@nbradbury nbradbury marked this pull request as ready for review March 4, 2026 16:46
@nbradbury nbradbury requested a review from adalpari March 4, 2026 16:46
@adalpari
Copy link
Copy Markdown
Contributor

adalpari commented Mar 5, 2026

Not sure if it0s a real bug, but Claude flagged this:

  1. Missing blue_5 and blue_80 color definitions for XML

  The WordPress flavor references @color/blue_5 and @color/blue_80 in colors_base.xml, but I only see Blue5 and Blue80 added to the
  Compose AppColor.kt. Are blue_5 and blue_80 defined in a shared XML color resource file (e.g., colors.xml)? If not, this will cause a
  build failure.

Copy link
Copy Markdown
Contributor

@adalpari adalpari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Just left a minor comment

@nbradbury
Copy link
Copy Markdown
Contributor Author

  1. Missing blue_5 and blue_80 color definitions for XML

These are both defined in colors_studio_palette.xml so we're fine here.

@nbradbury nbradbury merged commit f46a937 into trunk Mar 5, 2026
33 of 35 checks passed
@nbradbury nbradbury deleted the issue/CMM-1301-fab-mismatch branch March 5, 2026 11:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants