Skip to content
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.

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

fix(snaps): Adjust alignment of custom UI links #27957

Merged
merged 8 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
1 change: 1 addition & 0 deletions ui/components/app/app-components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
@import 'snaps/snap-ui-input/index';
@import 'snaps/snap-ui-file-input/index';
@import 'snaps/snap-ui-selector/index';
@import 'snaps/snap-ui-link/index';
@import 'snaps/snap-delineator/index';
@import 'snaps/snap-home-menu/index';
@import 'snaps/snap-list-item/index';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`SnapUIAddress renders Bitcoin address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -56,7 +56,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -77,7 +77,7 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
exports[`SnapUIAddress renders Cosmos address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -130,7 +130,7 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `
exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -151,7 +151,7 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
exports[`SnapUIAddress renders Ethereum address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -204,7 +204,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -225,7 +225,7 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
exports[`SnapUIAddress renders Hedera address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -278,7 +278,7 @@ exports[`SnapUIAddress renders Hedera address 1`] = `
exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -299,7 +299,7 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
exports[`SnapUIAddress renders Polkadot address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -352,7 +352,7 @@ exports[`SnapUIAddress renders Polkadot address 1`] = `
exports[`SnapUIAddress renders Polkadot address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -373,7 +373,7 @@ exports[`SnapUIAddress renders Polkadot address with blockie 1`] = `
exports[`SnapUIAddress renders Starknet address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down Expand Up @@ -426,7 +426,7 @@ exports[`SnapUIAddress renders Starknet address 1`] = `
exports[`SnapUIAddress renders Starknet address with blockie 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<img
alt=""
Expand All @@ -447,7 +447,7 @@ exports[`SnapUIAddress renders Starknet address with blockie 1`] = `
exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
<div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
>
<div
style="display: flex;"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
const shortenedAddress = shortenAddress(transformedAddress);

return (
<Box display={Display.Flex} alignItems={AlignItems.center} gap={2}>
<Box
className="snap-ui-renderer__address"
display={Display.Flex}
alignItems={AlignItems.center}
gap={2}
>
<SnapUIAvatar address={caipIdentifier} size={avatarSize} />
<Text color={TextColor.inherit}>{shortenedAddress}</Text>
</Box>
Expand Down
11 changes: 11 additions & 0 deletions ui/components/app/snaps/snap-ui-link/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.snap-ui-renderer__link {
& .snap-ui-renderer__address {
// Fixes an issue where the link end icon would wrap
display: inline-flex;
}

.snap-ui-renderer__address + .mm-icon {
// This fixes an issue where the icon would be misaligned with the Address component
top: 0;
}
}
11 changes: 9 additions & 2 deletions ui/components/app/snaps/snap-ui-link/snap-ui-link.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const SnapUILink = ({ href, children }) => {
<ButtonLink
as="a"
size={ButtonLinkSize.Inherit}
className="snap-ui-link"
className="snap-ui-renderer__link"
onClick={handleLinkClick}
>
{children}
Expand All @@ -51,7 +51,14 @@ export const SnapUILink = ({ href, children }) => {
externalLink
size={ButtonLinkSize.Inherit}
display={Display.Inline}
className="snap-ui-link"
className="snap-ui-renderer__link"
style={{
// Prevents the link from taking up the full width of the parent.
width: 'fit-content',
}}
textProps={{
display: Display.Inline,
}}
>
{children}
<Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />
Expand Down
4 changes: 0 additions & 4 deletions ui/components/app/snaps/snap-ui-renderer/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,6 @@

&__panel {
gap: 8px;

.mm-icon--size-inherit {
GuillaumeRx marked this conversation as resolved.
Show resolved Hide resolved
top: 0;
}
}

&__text {
Expand Down