[WOOMOB-3761] Add Store design system segment control and modal sheet by hichamboushaba · Pull Request #16373 · woocommerce/woocommerce-android

hichamboushaba · 2026-08-05T19:02:16Z

Description

Promotes Segment Control and Modal Bottom Sheet from preview-only Store design-system examples into production Woo* components, then migrates both Dashboard-owned sheet flows to consume them.

WooSegmentControl keeps caller-owned selection and localization, exposes radio/selectable semantics, preserves the 36dp track and 32dp pill, and provides a 48dp interaction target without clipping large text. WooModalBottomSheet keeps experimental Material types internal while delegating gestures, scrim, back handling, focus, semantics, system insets, IME behavior, and width to Material. Its Store styling supplies the Surface Bright container, rounded top corners, and drag handle defined by the canonical Figma component.

The Performance card now uses these components for revenue segments and order-date selection. The Analytics updates sheet also moves from its legacy WCBottomSheetDialogFragment and navigation destination into the Dashboard's design-system composition, keeping the Dashboard visible behind the scrim while Material owns Back, scrim, and swipe dismissal.

The scheduled-import feature retains its existing copy, repository calls, Learn more behavior, success/failure handling, and Dashboard analytics. Sheet visibility and the last server-confirmed option survive recreation, while optimistic, loading, and error state remain transient. Manual dismissal cancels in-flight UI work; if the server has already applied a change, the Dashboard's existing repository observer converges to that stored value and reseeds the sheet the next time it opens.

Focused component and ViewModel tests, catalog previews, and design-system documentation are included.

Note

Known dark-theme limitation: The modal sheet currently has limited contrast against the surrounding surface. We will address this in a separate PR once Design provides the intended treatment. p1786013954706019/1785758642.339779-slack-C03L1NF1EA3

Test Steps

Install this branch's Wasabi debug build and open My Store with the Performance card visible.
Select Total, Gross, and Net; confirm the selected pill moves correctly, labels remain readable, and the displayed statistics update.
Tap the Paid orders selector; confirm the order-date sheet opens at the bottom with a bright surface, rounded top corners, no outlined boundary, and a drag handle.
Drag the sheet slightly and let it settle, then dismiss it with Back or the scrim; confirm only the sheet closes.
Reopen the order-date sheet and select Placed orders or Completed orders; confirm it closes after the update succeeds and the Performance card reflects the selected type.
Tap the Last update row or its Analytics update settings info icon; confirm the Analytics updates sheet opens over the still-visible Dashboard and shows Scheduled, Immediately, the current selection, and Learn more.
Dismiss the Analytics updates sheet with Back, the scrim, and a downward swipe, reopening it between methods; confirm each action closes only the sheet.
Reopen it and tap the already-selected update option; confirm the sheet closes without changing the store-wide setting.

Images/gif

Segment Control

Light	Dark

Modal Bottom Sheet

Light	Dark

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.

dangermattic · 2026-08-05T19:03:22Z

	2 Warnings
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	Class `WooModalBottomSheetState` is missing tests, but `unit-tests-exemption` label was set to ignore this.

Generated by 🚫 Danger

wpmobilebot · 2026-08-05T19:22:12Z

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

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Build Number	`776`
	Version	`25.3-rc-1`
	Application ID	`com.woocommerce.android.prealpha`
	Commit	`7fdf0db`
	Installation URL	1vgeicsur6d78

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

claude

AI Code Review - Found 1 potential issue

This is a clean design-system migration: the scheduled-import bottom sheet moves off a WCBottomSheetDialogFragment onto the new WooModalBottomSheet, and WooSegmentControl / WooModalBottomSheet are promoted to production APIs. A few things I verified positively:

The removed ScheduledImportInfoBottomSheetFragment, its nav-graph <dialog> entry, and the action_dashboard_to_scheduledImportInfoBottomSheet action are fully cleaned up — no dangling references remain in the codebase.
The ViewModel's move from nav-args to a hosted show()/onDismissed() model correctly persists isVisible/confirmedIsEnabled in SavedStateHandle while keeping isUpdating/hasError transient, and ensureActive() after setEnabled() properly guards against writing state on a dismissed/cancelled update. Restoration and cancellation paths are well covered by the new tests.
WooSegmentControl exposes correct selectableGroup/Role.RadioButton semantics and a 48dp interaction target, and stays fully controlled (index in, index out).

One minor UX note is inline.

PR housekeeping

Applied repo AGENTS.md/CLAUDE.md guidance: verified store-app MVVM patterns (ScopedViewModel, triggerEvent, StateFlow for new state) and that no Android framework types leak into the ViewModel.

_{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.

claude · 2026-08-06T12:30:45Z

+    onOptionSelected: (Boolean) -> Unit,
+    onLearnMoreClick: () -> Unit,
+) {
+    if (!state.isVisible) return


AI Code Review [nit]

Issue: Visibility is driven purely by removing the composable from composition (if (!state.isVisible) return, with the parent onDismissed() flipping isVisible to false). When the sheet auto-closes after a successful save (SettingUpdated -> onDismissed()), the ModalBottomSheet is dropped from composition immediately, so Material's slide-down exit animation is skipped. The old WCBottomSheetDialogFragment.dismiss() animated on close, so this is a subtle regression on the programmatic-dismiss path (user-initiated swipe/scrim dismissals still animate). Same pattern applies to OrderDateTypeBottomSheet.

Suggestion: If preserving the exit animation matters, drive dismissal through the state the design system already exposes — e.g. scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) onDismissed() } — instead of removing the composable outright. Otherwise it's fine to accept the tradeoff as the standard conditional-composition idiom.

Fixed in 01c8737c59d. Both Dashboard sheets now animate through WooModalBottomSheetState.hide() and leave composition only after reaching Hidden; I also verified the programmatic dismissal path on a Pixel 8a running API 36.

AdamGrzybkowski · 2026-08-07T07:18:42Z

Hey @hichamboushaba, the diff here is massive - is there a problem with the branch not being updated, or is that expected?

wpmobilebot · 2026-08-07T07:49:04Z

Version 25.4 has now entered code-freeze, so the milestone of this PR has been updated to 25.5.

AdamGrzybkowski

Looks good in general, left two comments/suggestions.

One weird thing that needs to be looked at (or at least confirmed it's real) is this weird slow animation that expand the bottom sheet to full screen height in landscape mode.

I've tried on two emulators and got the same result, but a physical devices works fine.

Screen_recording_20260810_125719.mp4

AdamGrzybkowski · 2026-08-10T10:47:09Z

+    val dismissOrderDateTypeBottomSheetWithAnimation: () -> Unit = {
+        if (!isOrderDateTypeBottomSheetDismissing) {
+            isOrderDateTypeBottomSheetDismissing = true
+            coroutineScope.launch {
+                try {
+                    orderDateTypeBottomSheetState.hide()
+                    if (!orderDateTypeBottomSheetState.isVisible) {
+                        showOrderDateTypeBottomSheet = false
+                    }
+                } finally {
+                    isOrderDateTypeBottomSheetDismissing = false
+                }
+            }
+        }
+    }


❓ We will need this logic every time we use the bottom sheet (two places already) - would it make sense to extract that to a helper funciton?

I had the same question, and thought about adding a helper, but then later I decided to defer that. This logic is also needed for the M3 bottom sheet (https://developer.android.com/develop/ui/compose/components/bottom-sheets#control-sheet-state), our implementation is just a thin wrapper.

I will still think more about it, and reply later.

I added a helper in 7fdf0db, please let me know what you think.

hichamboushaba · 2026-08-10T18:08:04Z

Scrim update: WooTheme.colors.overlay.overlay50 now resolves to Gray 80 (#2C3338) at 50% in both light and dark themes, replacing the previous black 50% light / 75% dark values. This matches the current Figma variable export and the guidance we received. WooModalBottomSheet passes that semantic token to Material as scrimColor, while Material continues to own scrim rendering and behavior. We kept the existing overlay50 naming and limited the implementation to the token value and component usage. The light/dark treatment is still subject to final confirmation from Design, and we will adjust the token if the designer confirms a different mode-specific value.

Light	Dark

hichamboushaba · 2026-08-10T18:49:34Z

Ready for another round @AdamGrzybkowski

AdamGrzybkowski

Thanks for the changes!

hichamboushaba added 2 commits August 5, 2026 18:49

Add Store segment control and modal sheet

7ae77f0

Fix modal sheet boundary placement

678238c

hichamboushaba added this to the 25.4 milestone Aug 5, 2026

Simplify design system component tests

cb2b0cd

Match modal sheet to Figma

31dca48

hichamboushaba marked this pull request as ready for review August 6, 2026 12:26

hichamboushaba added 3 commits August 6, 2026 13:30

Rename scheduled import sheet file

b2c9275

Migrate Dashboard scheduled import sheet

4fc3c64

Cover scheduled import confirmation restore

9316e6e

claude Bot reviewed Aug 6, 2026

View reviewed changes

hichamboushaba force-pushed the issue/woomob-3761-implementation branch from 6edd7ea to 9316e6e Compare August 6, 2026 12:32

Animate Dashboard sheet dismissal

01c8737

hichamboushaba requested review from AdamGrzybkowski, JorgeMucientes and irfano August 6, 2026 14:46

hichamboushaba force-pushed the feature/store-design-system-migration branch from 217d5bd to 62e0338 Compare August 6, 2026 21:12

hichamboushaba requested review from a team as code owners August 6, 2026 21:12

wpmobilebot modified the milestones: 25.4, 25.5 Aug 7, 2026

hichamboushaba force-pushed the feature/store-design-system-migration branch from 62e0338 to e903c9f Compare August 9, 2026 12:43

AdamGrzybkowski self-assigned this Aug 10, 2026

AdamGrzybkowski reviewed Aug 10, 2026

View reviewed changes

hichamboushaba added 2 commits August 10, 2026 18:42

Update modal sheet scrim color

0b507c5

Use design system padding for revenue selector

e27f973

Extract modal bottom sheet dismissal helper

7fdf0db

hichamboushaba requested review from AdamGrzybkowski and removed request for a team August 10, 2026 18:49

AdamGrzybkowski approved these changes Aug 11, 2026

View reviewed changes

hichamboushaba added the unit-tests-exemption label Aug 13, 2026

hichamboushaba merged commit 1e46b55 into feature/store-design-system-migration Aug 13, 2026
14 of 17 checks passed

hichamboushaba deleted the issue/woomob-3761-implementation branch August 13, 2026 22:21

Conversation

hichamboushaba commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test Steps

Images/gif

Segment Control

Modal Bottom Sheet

Uh oh!

dangermattic commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

hichamboushaba Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

AdamGrzybkowski commented Aug 7, 2026

Uh oh!

wpmobilebot commented Aug 7, 2026

Uh oh!

AdamGrzybkowski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AdamGrzybkowski Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

hichamboushaba Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

hichamboushaba Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

hichamboushaba commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hichamboushaba commented Aug 10, 2026

Uh oh!

AdamGrzybkowski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hichamboushaba commented Aug 5, 2026 •

edited

Loading

dangermattic commented Aug 5, 2026 •

edited

Loading

wpmobilebot commented Aug 5, 2026 •

edited

Loading

hichamboushaba commented Aug 10, 2026 •

edited

Loading