Skip to content

[WOOMOB-3477] Migrate dashboard content to Store Design System#16248

Open
hichamboushaba wants to merge 6 commits into
issue/woomob-3561-collapsible-page-headerfrom
issue/woomob-3477-dashboard-design-system
Open

[WOOMOB-3477] Migrate dashboard content to Store Design System#16248
hichamboushaba wants to merge 6 commits into
issue/woomob-3561-collapsible-page-headerfrom
issue/woomob-3477-dashboard-design-system

Conversation

@hichamboushaba

@hichamboushaba hichamboushaba commented Jul 13, 2026

Copy link
Copy Markdown
Member

Description

Part of WOOMOB-3477 — does not close the ticket.

Note

This is a stacked PR targeting issue/woomob-3561-collapsible-page-header. It depends on
#16257, which must land before
this PR can be retargeted to trunk and merged.

This PR migrates the My Store dashboard content area and cards to the Store Design System while preserving the existing Fragment-hosted top app bar.

It:

  • opts the dashboard into the Store Design System theme and section background;
  • migrates card surfaces, spacing, typography, colors, buttons, dividers, menus, loading skeletons, and error states;
  • replaces the legacy pull-to-refresh implementation with Material 3;
  • updates the existing cards across Performance, Orders, Reviews, Inbox, Stock, Coupons, Blaze, Google Ads, onboarding, push notifications, top performers, and the AI assistant;
  • adds design-system preview coverage for light and dark themes, large fonts, and RTL layouts;
  • improves accessibility descriptions for review ratings and the share-store toolbar action.

Remaining work for WOOMOB-3477: migrate the top app bar, then move the Customize action from the toolbar to the bottom position shown in Figma.

Test Steps

  1. Open the My Store dashboard for a store with several dashboard cards enabled.
  2. In light mode, verify the section background, rounded borderless card surfaces, gutters, headers, typography, dividers, menus, buttons, and data presentation.
  3. Open the toolbar Customize action, hide and restore cards, and confirm their visibility and ordering update correctly.
  4. Exercise the Performance date range, metric selector, card overflow menus, filters, and available card actions.
  5. Pull down on the dashboard and confirm the refresh indicator appears and the dashboard refresh completes.
  6. Verify available loading, empty, error, retry, and populated card states.
  7. Repeat the visual checks in dark mode, paying particular attention to text, icon, divider, button, and card contrast.
  8. On a tablet or landscape device, confirm cards flow into multiple columns with consistent spacing and without clipping.
  9. Increase the system font size and enable an RTL locale; confirm card content remains readable and usable.

Images/gif

Theme Before After
Light Dashboard before the Store Design System migration in light mode Dashboard after the Store Design System migration in light mode
Dark Dashboard before the Store Design System migration in dark mode Dashboard after the Store Design System migration in dark mode
  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

@hichamboushaba hichamboushaba added type: task An internally driven task. category: design Layout and style elements in the UI or user interface, including color and animations. feature: dashboard Related to home screen project labels Jul 13, 2026
@hichamboushaba hichamboushaba added this to the 25.3 milestone Jul 13, 2026
@dangermattic

dangermattic commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator
1 Error
🚫 This PR is tagged with status: do not merge label(s).
1 Warning
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

@wpmobilebot

wpmobilebot commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator

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

App NameWooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Build Number772
Version25.2-rc-1
Application IDcom.woocommerce.android.prealpha
Commit6a818ed
Installation URL3f5mohhje06o8
Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="@color/color_surface"
android:background="@color/woo_ds_color_background_section"

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

The Dashboard root already painted a background before this PR; this change only updates it to the DS section color. The background is intentionally retained for the hybrid XML/Compose shell and exposed JITM margins. Removing the Activity window background safely would require broader MainActivity-level work, so we are retaining this behavior here.

@hichamboushaba hichamboushaba added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Jul 13, 2026
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3477-dashboard-design-system branch 2 times, most recently from c5bb05e to 6860232 Compare July 13, 2026 14:08
@hichamboushaba
hichamboushaba changed the base branch from components-figma-audit to issue/WOOMOB-3515-mixed-theme-import-detekt July 13, 2026 14:09
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3477-dashboard-design-system branch from 6860232 to 2447c7d Compare July 13, 2026 23:08
@codecov-commenter

codecov-commenter commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 1352 lines in your changes missing coverage. Please review.
✅ Project coverage is 40.94%. Comparing base (c797d14) to head (6d9c166).

Files with missing lines Patch % Lines
...ommerce/android/ui/dashboard/DashboardContainer.kt 0.00% 223 Missing ⚠️
...e/android/ui/dashboard/inbox/DashboardInboxCard.kt 0.00% 133 Missing ⚠️
...android/ui/orders/compose/LegacyOrderSummaryRow.kt 0.00% 111 Missing ⚠️
...mmerce/android/ui/dashboard/DashboardPrimitives.kt 0.00% 83 Missing ⚠️
...droid/ui/dashboard/reviews/DashboardReviewsCard.kt 0.00% 81 Missing ⚠️
...ui/dashboard/onboarding/DashboardOnboardingCard.kt 0.00% 74 Missing ⚠️
...oid/ui/products/compose/LegacyProductSummaryRow.kt 0.00% 71 Missing ⚠️
...droid/ui/blaze/campaigs/LegacyBlazeCampaignItem.kt 0.00% 69 Missing ⚠️
...merce/android/ui/orders/compose/OrderSummaryRow.kt 0.00% 53 Missing ⚠️
...roid/ui/dashboard/google/DashboardGoogleAdsCard.kt 0.00% 46 Missing ⚠️
... and 19 more
Additional details and impacted files
@@             Coverage Diff              @@
##              trunk   #16248      +/-   ##
============================================
- Coverage     41.15%   40.94%   -0.21%     
  Complexity    13498    13498              
============================================
  Files          2503     2507       +4     
  Lines        146462   147198     +736     
  Branches      21761    21916     +155     
============================================
  Hits          60275    60275              
- Misses        80089    80825     +736     
  Partials       6098     6098              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Base automatically changed from issue/WOOMOB-3515-mixed-theme-import-detekt to trunk July 14, 2026 18:31
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3477-dashboard-design-system branch from 2447c7d to 6d9c166 Compare July 14, 2026 19:30
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3477-dashboard-design-system branch from 6d9c166 to 5d0e6cd Compare July 14, 2026 21:12
@hichamboushaba
hichamboushaba changed the base branch from trunk to issue/woomob-3561-collapsible-page-header July 15, 2026 15:04
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3477-dashboard-design-system branch from 5d0e6cd to 6a818ed Compare July 15, 2026 15:06
@hichamboushaba
hichamboushaba marked this pull request as ready for review July 15, 2026 15:21
@hichamboushaba
hichamboushaba requested a review from a team as a code owner July 15, 2026 15:21

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

AI Code Review - No issues found. The changes look good.

This is a clean, largely mechanical migration of the My Store dashboard from Material to Material3 / the Woo Design System. I verified the theme boundaries: the new Material3 OrderSummaryRow/ProductSummaryRow (which now read WooTheme.* composition locals) are only used from WooDesignSystemTheme-rooted screens (the dashboard), while the AI Assistant renderers were correctly moved to the new LegacyOrderSummaryRow/LegacyProductSummaryRow variants and POS uses its own local OrderSummaryRow — so there is no risk of a missing-CompositionLocal crash. Public composable signatures are preserved.

The two bot-flagged Lint items (root-background overdraw on fragment_dashboard.xml, and material/material3 mixing inside the new Legacy* files) were already reviewed and explicitly accepted by a repo maintainer as intentional legacy behavior, so I have not re-raised them.

PR housekeeping
  • Applied repo AGENTS.md/CLAUDE.md guidance (store vs. POS architecture boundaries) when verifying theme usage.

Automatic review · claude-opus-4-8 · Workflow run

How to reply to a finding

Reply on this review (or inline at the line the finding refers to) with one of:

  • @claude addressed - I made the change. Bot verifies against the next diff before marking resolved.
  • @claude rejected: <reason> - Will not fix; reason gets quoted on the next review.
  • @claude not-applicable - Finding does not apply (wrong file, already covered elsewhere, etc.).

The bot honours these on the next review pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

category: design Layout and style elements in the UI or user interface, including color and animations. feature: dashboard Related to home screen project status: do not merge Dependent on another PR, ready for review but not ready for merge. type: task An internally driven task.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants