From 520f97cd962ebe560a8b6214af3b16e2c32a9cdb Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 18 Oct 2024 14:17:28 +0200 Subject: [PATCH 1/8] fix link --- ui/components/app/snaps/snap-ui-link/snap-ui-link.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index a1289543fd45..e49f07a80a11 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -1,6 +1,10 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Display } from '../../../../helpers/constants/design-system'; +import { + AlignItems, + Display, + FlexDirection, +} from '../../../../helpers/constants/design-system'; import { ButtonLink, ButtonLinkSize, @@ -52,6 +56,11 @@ export const SnapUILink = ({ href, children }) => { size={ButtonLinkSize.Inherit} display={Display.Inline} className="snap-ui-link" + textProps={{ + display: Display.InlineFlex, + flexDirection: FlexDirection.Row, + alignItems: AlignItems.center, + }} > {children} From b1bb81aed9f08760c586283df7894554344dd166 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 18 Oct 2024 16:34:10 +0200 Subject: [PATCH 2/8] prevent link from taking all the parent space --- ui/components/app/snaps/snap-ui-link/snap-ui-link.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index e49f07a80a11..6f3b50b695ee 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { AlignItems, + BlockSize, Display, FlexDirection, } from '../../../../helpers/constants/design-system'; @@ -54,8 +55,12 @@ export const SnapUILink = ({ href, children }) => { onClick={handleLinkClick} externalLink size={ButtonLinkSize.Inherit} - display={Display.Inline} + display={Display.InlineBlock} className="snap-ui-link" + style={{ + // Prevents the link from taking up the full width of the parent. + width: 'fit-content', + }} textProps={{ display: Display.InlineFlex, flexDirection: FlexDirection.Row, From 30bb168874ed3c235db76cd5362eacd38198377c Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Fri, 18 Oct 2024 16:41:52 +0200 Subject: [PATCH 3/8] remove unused import --- ui/components/app/snaps/snap-ui-link/snap-ui-link.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index 6f3b50b695ee..925869a350fe 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { AlignItems, - BlockSize, Display, FlexDirection, } from '../../../../helpers/constants/design-system'; From 5bf7ce5ea36fd0b71527a1588cdbf5ace93e3930 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Mon, 21 Oct 2024 12:29:45 +0200 Subject: [PATCH 4/8] fix wrapping issues --- ui/components/app/app-components.scss | 1 + .../snaps/snap-ui-address/snap-ui-address.tsx | 7 ++++++- .../app/snaps/snap-ui-link/index.scss | 6 ++++++ .../app/snaps/snap-ui-link/snap-ui-link.js | 20 ++++++------------- 4 files changed, 19 insertions(+), 15 deletions(-) create mode 100644 ui/components/app/snaps/snap-ui-link/index.scss diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 0995f4b52a4a..9eefd48028ac 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -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'; diff --git a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx b/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx index 539548622135..35f1af2ad414 100644 --- a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx +++ b/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx @@ -48,7 +48,12 @@ export const SnapUIAddress: React.FunctionComponent = ({ const shortenedAddress = shortenAddress(transformedAddress); return ( - + {shortenedAddress} diff --git a/ui/components/app/snaps/snap-ui-link/index.scss b/ui/components/app/snaps/snap-ui-link/index.scss new file mode 100644 index 000000000000..873461c56652 --- /dev/null +++ b/ui/components/app/snaps/snap-ui-link/index.scss @@ -0,0 +1,6 @@ +.snap-ui-renderer__link { + & .snap-ui-renderer__address { + // Fixes an issue where the link end icon would wrap + display: inline-flex; + } +} \ No newline at end of file diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index 925869a350fe..9571d8321bad 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -1,16 +1,10 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { - AlignItems, - Display, - FlexDirection, -} from '../../../../helpers/constants/design-system'; +import { Display } from '../../../../helpers/constants/design-system'; import { ButtonLink, ButtonLinkSize, - Icon, IconName, - IconSize, } from '../../../component-library'; import SnapLinkWarning from '../snap-link-warning'; import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation'; @@ -38,7 +32,7 @@ export const SnapUILink = ({ href, children }) => { {children} @@ -54,20 +48,18 @@ export const SnapUILink = ({ href, children }) => { onClick={handleLinkClick} externalLink size={ButtonLinkSize.Inherit} - display={Display.InlineBlock} - className="snap-ui-link" + display={Display.Inline} + className="snap-ui-renderer__link" style={{ // Prevents the link from taking up the full width of the parent. width: 'fit-content', }} textProps={{ - display: Display.InlineFlex, - flexDirection: FlexDirection.Row, - alignItems: AlignItems.center, + display: Display.Inline, }} + endIconName={IconName.Export} > {children} - ); From b063474bee99c0f62d794c410776f98d14954d8b Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Mon, 21 Oct 2024 12:55:51 +0200 Subject: [PATCH 5/8] lint --- ui/components/app/snaps/snap-ui-link/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/app/snaps/snap-ui-link/index.scss b/ui/components/app/snaps/snap-ui-link/index.scss index 873461c56652..973fad03080c 100644 --- a/ui/components/app/snaps/snap-ui-link/index.scss +++ b/ui/components/app/snaps/snap-ui-link/index.scss @@ -3,4 +3,4 @@ // Fixes an issue where the link end icon would wrap display: inline-flex; } -} \ No newline at end of file +} From 6e1a6357110aeef7d9cbd848b508694e2b699cd0 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Mon, 21 Oct 2024 14:04:55 +0200 Subject: [PATCH 6/8] update snapshot --- .../snap-ui-address.test.tsx.snap | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap index d29236409dbc..7dd3749a6e5f 100644 --- a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap +++ b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap @@ -3,7 +3,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
Date: Mon, 21 Oct 2024 15:05:12 +0200 Subject: [PATCH 7/8] fix all misalignment issues --- ui/components/app/snaps/snap-ui-link/index.scss | 5 +++++ ui/components/app/snaps/snap-ui-link/snap-ui-link.js | 4 +++- ui/components/app/snaps/snap-ui-renderer/index.scss | 4 ---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/ui/components/app/snaps/snap-ui-link/index.scss b/ui/components/app/snaps/snap-ui-link/index.scss index 973fad03080c..7d3f75f0e372 100644 --- a/ui/components/app/snaps/snap-ui-link/index.scss +++ b/ui/components/app/snaps/snap-ui-link/index.scss @@ -3,4 +3,9 @@ // 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; + } } diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index 9571d8321bad..58a22008a52a 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -4,7 +4,9 @@ import { Display } from '../../../../helpers/constants/design-system'; import { ButtonLink, ButtonLinkSize, + Icon, IconName, + IconSize, } from '../../../component-library'; import SnapLinkWarning from '../snap-link-warning'; import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation'; @@ -57,9 +59,9 @@ export const SnapUILink = ({ href, children }) => { textProps={{ display: Display.Inline, }} - endIconName={IconName.Export} > {children} + ); diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss index 7e18e72c917f..20915758ad4b 100644 --- a/ui/components/app/snaps/snap-ui-renderer/index.scss +++ b/ui/components/app/snaps/snap-ui-renderer/index.scss @@ -48,10 +48,6 @@ &__panel { gap: 8px; - - .mm-icon--size-inherit { - top: 0; - } } &__text { From bb3cc6e27be8f70cd0968c536848c0a2a0cab1a0 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Mon, 21 Oct 2024 17:01:17 +0200 Subject: [PATCH 8/8] fix missalignement of icon in inputs --- ui/components/app/snaps/snap-ui-renderer/index.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss index 20915758ad4b..d32edf726479 100644 --- a/ui/components/app/snaps/snap-ui-renderer/index.scss +++ b/ui/components/app/snaps/snap-ui-renderer/index.scss @@ -34,6 +34,10 @@ border-radius: 8px; border-color: var(--color-border-muted); + & .mm-icon { + top: 0; + } + .mm-text--overflow-wrap-anywhere { overflow-wrap: normal; }