Skip to content

revert(snaps): Revert breaking changes from #31058 #31391

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
merged 1 commit into from
Mar 28, 2025
Merged

revert(snaps): Revert breaking changes from #31058 #31391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions .storybook/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
margin-top: auto !important;
}

.snap-ui-renderer__content {
margin-bottom: 0 !important;
.snap-ui-renderer__container {
padding-bottom: 0 !important;
}

.snap-ui-renderer__panel {
Expand Down
12 changes: 0 additions & 12 deletions test/e2e/snaps/test-snap-dialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,6 @@ describe('Test Snap Dialog', function () {
tag: 'button',
});

// click and dismiss possible scroll element
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');

// wait for and click confirm
await driver.waitForSelector({ text: 'Confirm' });
await driver.clickElement({
Expand Down Expand Up @@ -151,9 +148,6 @@ describe('Test Snap Dialog', function () {
// switch to dialog popup
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);

// click and dismiss possible scroll element
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');

// click cancel button and wait for window to close
await driver.clickElementAndWaitForWindowToClose({
text: 'Cancel',
Expand Down Expand Up @@ -200,9 +194,6 @@ describe('Test Snap Dialog', function () {
// switch to dialog popup
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);

// click and dismiss possible scroll element
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');

// click cancel button and wait for window to close
await driver.clickElementAndWaitForWindowToClose({
text: 'Cancel',
Expand All @@ -227,9 +218,6 @@ describe('Test Snap Dialog', function () {
// fill '2323' in form field
await driver.pasteIntoField('#custom-input', '2323');

// click and dismiss possible scroll element
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');

// click confirm button and wait for window to close
await driver.clickElementAndWaitForWindowToClose({
text: 'Confirm',
Expand Down
2 changes: 1 addition & 1 deletion ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`NFT Details should match minimal props and state snapshot 1`] = `
<div>
<div
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
data-testid="multichain-page"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`NFT full image should match snapshot 1`] = `
class="mm-box main-container asset__container"
>
<div
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
data-testid="multichain-page"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
<div>
<div
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
>
<button
Expand All @@ -45,7 +45,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
/>
</button>
<div
class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center"
Expand Down
7 changes: 1 addition & 6 deletions ui/components/app/confirm/info/row/row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
TextColor,
TextVariant,
} from '../../../../../helpers/constants/design-system';
import { SizeNumber } from '../../../../ui/box/box';
import { CopyIcon } from './copy-icon';

export enum ConfirmInfoRowVariant {
Expand Down Expand Up @@ -91,9 +90,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({

const isCollapsible = collapsed !== undefined;

const contentPaddingRight = ((copyEnabled ? 6 : 0) +
(isCollapsible ? 6 : 0)) as SizeNumber;

return (
<ConfirmInfoRowContext.Provider value={{ variant }}>
<Box
Expand All @@ -109,7 +105,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
marginTop={2}
marginBottom={2}
paddingLeft={2}
paddingRight={2}
paddingRight={copyEnabled ? 5 : 2}
color={TEXT_COLORS[variant] as TextColor}
style={{
overflowWrap: OverflowWrap.Anywhere,
Expand Down Expand Up @@ -146,7 +142,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
justifyContent={JustifyContent.center}
alignItems={AlignItems.flexStart}
color={color}
paddingRight={contentPaddingRight || null}
>
<Box display={Display.Flex} alignItems={AlignItems.center}>
<Text variant={TextVariant.bodyMdMedium} color={TextColor.inherit}>
Expand Down
4 changes: 0 additions & 4 deletions ui/components/app/permission-page-container/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.permission-page-container-content {
flex: '1 0 auto';
}

.permission-page-container-footer {
border-top: none !important;
}
1 change: 0 additions & 1 deletion ...ontainer/permission-page-container-content/permission-page-container-content.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export default class PermissionPageContainerContent extends PureComponent {
subjectType === SubjectType.Website ? getURLHost(origin) : origin;
return (
<Box
className="permission-page-container-content"
display={Display.Flex}
flexDirection={FlexDirection.Column}
justifyContent={JustifyContent.flexStart}
Expand Down
48 changes: 24 additions & 24 deletions ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -42,7 +42,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -96,7 +96,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -150,7 +150,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -204,7 +204,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand All @@ -231,7 +231,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 80px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand All @@ -247,7 +247,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
</div>
<div
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
Expand Down Expand Up @@ -302,7 +302,7 @@ exports[`SnapUIRenderer supports address inputs 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -340,7 +340,7 @@ exports[`SnapUIRenderer supports address inputs with a disabled prop 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -379,7 +379,7 @@ exports[`SnapUIRenderer supports address inputs with a placeholder 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -418,7 +418,7 @@ exports[`SnapUIRenderer supports address inputs with existing state 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -499,7 +499,7 @@ exports[`SnapUIRenderer supports address inputs within a field 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -543,7 +543,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 80px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand All @@ -559,7 +559,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
</div>
<div
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
Expand Down Expand Up @@ -591,7 +591,7 @@ exports[`SnapUIRenderer supports file inputs 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -654,7 +654,7 @@ exports[`SnapUIRenderer supports forms 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -704,7 +704,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -786,7 +786,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -824,7 +824,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 80px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand All @@ -840,7 +840,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
</div>
<div
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
Expand Down Expand Up @@ -872,7 +872,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 80px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand All @@ -888,7 +888,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
</div>
<div
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
Expand Down Expand Up @@ -929,7 +929,7 @@ exports[`SnapUIRenderer will render a matched address name 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down Expand Up @@ -1023,7 +1023,7 @@ exports[`SnapUIRenderer will render avatar when displayAvatar is true 1`] = `
<div>
<div
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
style="overflow-y: auto;"
style="overflow-y: auto; margin-bottom: 0px;"
>
<div
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
Expand Down
2 changes: 2 additions & 0 deletions ui/components/app/snaps/snap-ui-renderer/components/footer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export const DEFAULT_FOOTER = {
style: {
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
height: '80px',
position: 'fixed',
bottom: 0,
},
},
};
Expand Down
2 changes: 0 additions & 2 deletions ui/components/app/snaps/snap-ui-renderer/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
$width-screen-lg-min: 62vw;

&__container {
height: 100%;

& > *:first-child {
gap: 16px;
margin: 16px;
Expand Down
5 changes: 5 additions & 0 deletions ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,10 @@ const SnapUIRendererComponent = ({

const { state: initialState, context } = interfaceState;

// The renderer should only have a footer if there is a default cancel action
// or if the footer component has been used.
const hasFooter = onCancel || content?.props?.children?.[1] !== undefined;

return (
<SnapInterfaceContextProvider
snapId={snapId}
Expand All @@ -119,6 +123,7 @@ const SnapUIRendererComponent = ({
backgroundColor={backgroundColor}
style={{
overflowY: 'auto',
marginBottom: useFooter && hasFooter ? '80px' : '0',
}}
>
<MetaMaskTemplateRenderer sections={sections} />
Expand Down
Loading
Loading