Skip to content

fix(pure-black): align Advanced details Expandable sheet with other elevated sheets #33152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
georgewrmarshall merged 3 commits into from
Jul 14, 2026
+13 −2
Merged

fix(pure-black): align Advanced details Expandable sheet with other elevated sheets #33152

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69e5376
fix(pure-black): Use MMDS BottomSheet in confirmations Expandable to …
cursoragent Jul 10, 2026
f35ba6b
revert(confirmations): roll back Expandable to legacy BottomModal imp…
cursoragent Jul 10, 2026
5e13d38
fix(TMCU-1059): add pure-black muted border to Advanced details sheet
georgewrmarshall Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { StyleSheet } from 'react-native';

import { Theme } from '../../../../../../util/theme/models';
import { AppThemeKey, Theme } from '../../../../../../util/theme/models';
import {
getElevatedSurfaceColor,
isPureBlackEnabled,
} from '../../../../../../util/theme/themeUtils';

const styleSheet = (params: {
theme: Theme;
vars: { isCompact: boolean | undefined };
}) => {
const { theme, vars } = params;
const { isCompact } = vars;
const { colors } = theme;
const isPureBlackDark =
isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;

@georgewrmarshall georgewrmarshall Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

isPureBlackDark follows the same gated border pattern as SelectComponent and ModalConfirmation: border.muted only when MM_PURE_BLACK_PREVIEW is on in dark mode. That keeps legacy sheet chrome unchanged outside the preview rollout.


return StyleSheet.create({
container: {
Expand All @@ -20,8 +27,12 @@
padding: isCompact ? 0 : 16,
marginBottom: isCompact ? 0 : 8,
},
// TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.

Check warning on line 30 in app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Complete the task associated to this "TODO" comment. 


See more on https://sonarcloud.io/project/issues?id=MetaMask_metamask-mobile&issues=AZ9dmRjSM2Z0o2L3lEFd&open=AZ9dmRjSM2Z0o2L3lEFd&pullRequest=33152
// Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
modalContent: {

@georgewrmarshall georgewrmarshall Jul 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

modalContent is shared by every Expandable consumer in confirmations (Advanced details, signature Message, and account Details rows), so this style-only change fixes pure black colors on all stacked BottomModal sheets from this component, not just the Advanced details entry point.

backgroundColor: theme.colors.background.section,
backgroundColor: getElevatedSurfaceColor(theme),

@georgewrmarshall georgewrmarshall Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Replaces bg-section on modalContent with getElevatedSurfaceColor so the stacked Advanced details BottomModal reads as an elevated surface on the pure black confirmation backdrop. When MM_PURE_BLACK_PREVIEW is off this still resolves to bg-default, so existing dark and light users should see no surface change.

borderWidth: isPureBlackDark ? 1 : 0,

@georgewrmarshall georgewrmarshall Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Net diff vs main is styles only; expandable.tsx still uses legacy BottomModal for stacking on the confirmation sheet. MMDS BottomSheet migration is deferred per confirmations team direction and issue 12656.

borderColor: isPureBlackDark ? colors.border.muted : undefined,
paddingBottom: 34,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
Expand Down
Loading