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.

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

Jump to bottom

chore: Using button icon component for clikable icons #28082

Open
wants to merge 23 commits into
base: develop
Choose a base branch
from
+445 −179
Open

chore: Using button icon component for clikable icons #28082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8a24413
Design changes in signature paged message section
jpuri Oct 23, 2024
c68d6fb
merge
jpuri Oct 23, 2024
1181b8d
update
jpuri Oct 23, 2024
a699c9e
update
jpuri Oct 23, 2024
73f7b71
update
jpuri Oct 23, 2024
7a59656
update
jpuri Oct 23, 2024
94000e3
update
jpuri Oct 23, 2024
f2ed1c6
update
jpuri Oct 23, 2024
4af935c
update
jpuri Oct 23, 2024
b834e33
update
jpuri Oct 23, 2024
a9f7d46
update
jpuri Oct 24, 2024
440a8d3
update
jpuri Oct 24, 2024
c95f82d
update
jpuri Oct 24, 2024
c2aef7b
update
jpuri Oct 24, 2024
b6b4d59
update
jpuri Oct 24, 2024
8d31dad
update
jpuri Oct 24, 2024
f389d57
update
jpuri Oct 24, 2024
cd2c82f
update
jpuri Oct 24, 2024
ac11fc3
update
jpuri Oct 24, 2024
1420f9a
Use button icon for clickable icons
jpuri Oct 24, 2024
f4eecf8
update
jpuri Oct 25, 2024
f0124ee
update
jpuri Oct 25, 2024
3c18efa
update
jpuri Oct 25, 2024
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
14 changes: 10 additions & 4 deletions ui/components/app/confirm/info/row/__snapshots__/copy-icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@

exports[`CopyIcon should match snapshot 1`] = `
<div>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 0px; top: 2px;"
/>
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 0px; top: 2px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
</div>
`;
14 changes: 10 additions & 4 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 @@ -34,10 +34,16 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
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-center mm-box--color-text-default mm-box--rounded-lg"
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 0px; top: 4px;"
/>
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 0px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
Expand Down
13 changes: 9 additions & 4 deletions ui/components/app/confirm/info/row/copy-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React, { CSSProperties, useCallback } from 'react';

import { useCopyToClipboard } from '../../../../../hooks/useCopyToClipboard';
import { IconColor } from '../../../../../helpers/constants/design-system';
import { Icon, IconName, IconSize } from '../../../../component-library';
import {
ButtonIcon,
ButtonIconSize,
IconName,
} from '../../../../component-library';

type CopyCallback = (text: string) => void;

Expand All @@ -18,10 +22,10 @@ export const CopyIcon: React.FC<{
}, [copyText]);

return (
<Icon
<ButtonIcon
color={color ?? IconColor.iconAlternative}
name={copied ? IconName.CopySuccess : IconName.Copy}
size={IconSize.Sm}
iconName={copied ? IconName.CopySuccess : IconName.Copy}
size={ButtonIconSize.Sm}
style={{
cursor: 'pointer',
position: 'absolute',
Expand All @@ -30,6 +34,7 @@ export const CopyIcon: React.FC<{
...style,
}}
onClick={handleClick}
ariaLabel="copy-button"
/>
);
};
9 changes: 6 additions & 3 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 @@ -2,6 +2,8 @@ import React, { createContext, useState } from 'react';
import Tooltip from '../../../../ui/tooltip/tooltip';
import {
Box,
ButtonIcon,
ButtonIconSize,
Icon,
IconName,
IconSize,
Expand Down Expand Up @@ -120,10 +122,10 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
/>
)}
{isCollapsible && (
<Icon
<ButtonIcon
color={IconColor.iconMuted}
name={expanded ? IconName.Collapse : IconName.Expand}
size={IconSize.Sm}
iconName={expanded ? IconName.Collapse : IconName.Expand}
size={ButtonIconSize.Sm}
style={{
cursor: 'pointer',
position: 'absolute',
Expand All @@ -132,6 +134,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
}}
onClick={() => setExpanded(!expanded)}
data-testid="sectionCollapseButton"
ariaLabel="collapse-button"
/>
)}
<Box
Expand Down
56 changes: 40 additions & 16 deletions ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,15 +557,27 @@ exports[`Info renders info section for personal sign request 1`] = `
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-column 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; background: transparent;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/collapse.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/collapse.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
>
Expand Down Expand Up @@ -991,15 +1003,27 @@ exports[`Info renders info section for typed sign request 1`] = `
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-column 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;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/collapse.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/collapse.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
Expand Down
14 changes: 10 additions & 4 deletions ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,10 +649,16 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
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-center mm-box--color-text-default mm-box--rounded-lg"
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 0px; top: 4px;"
/>
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 0px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
Expand Down
56 changes: 40 additions & 16 deletions ...irmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,27 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
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-column 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; background: transparent;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/collapse.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/collapse.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
>
Expand Down Expand Up @@ -147,15 +159,27 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
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-column 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; background: transparent;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/collapse.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/collapse.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
>
Expand Down
56 changes: 40 additions & 16 deletions ...ons/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,27 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
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-column 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;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/expand.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/expand.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
Expand All @@ -38,15 +50,27 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
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-column 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;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 32px; top: 4px;"
/>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-muted"
<button
aria-label="copy-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<button
aria-label="collapse-button"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="sectionCollapseButton"
style="mask-image: url('./images/icons/expand.svg'); cursor: pointer; position: absolute; right: 8px; top: 4px;"
/>
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/expand.svg');"
/>
</button>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
>
Expand Down
Loading