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

fix: change asset picker button to buttonbase to fix text theming #27127

Merged
merged 7 commits into from
Sep 16, 2024
Merged

fix: change asset picker button to buttonbase to fix text theming #27127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6a7c5f2
fix: change asset picker button to buttonbase to fix text theming
jclancy93 Sep 13, 2024
7e89392
fix: asset picker snapshots
jclancy93 Sep 13, 2024
addc91a
fix: lint issue
jclancy93 Sep 13, 2024
6f410c4
Merge branch 'develop' into fix/27046-asset-picker-symbol-theme
jclancy93 Sep 13, 2024
bc8604e
fix: re-add css class name to fix e2e test failures
jclancy93 Sep 16, 2024
b47d025
fix: update snapshots again
jclancy93 Sep 16, 2024
bf7e8ab
Merge branch 'develop' into fix/27046-asset-picker-symbol-theme
jclancy93 Sep 16, 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
18 changes: 10 additions & 8 deletions ...ents/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
exports[`AssetPicker matches snapshot 1`] = `
<DocumentFragment>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md asset-picker mm-button-primary mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
Copy link
Contributor Author

@jclancy93 jclancy93 Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

All changes in this file are from running yarn test:unit --updateSnapshot

data-testid="asset-picker-button"
data-theme="light"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-inverse"
class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
Expand Down Expand Up @@ -43,7 +42,9 @@ exports[`AssetPicker matches snapshot 1`] = `
</div>
</div>
</div>
<div>
<div
class="mm-box"
>
<div
aria-describedby="tippy-tooltip-1"
class=""
Expand Down Expand Up @@ -72,14 +73,13 @@ exports[`AssetPicker matches snapshot 1`] = `
exports[`AssetPicker render if disabled 1`] = `
<div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled asset-picker mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
data-testid="asset-picker-button"
data-theme="light"
disabled=""
title="[swapTokenNotAvailable]"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-inverse"
class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
Expand All @@ -106,7 +106,9 @@ exports[`AssetPicker render if disabled 1`] = `
</div>
</div>
</div>
<div>
<div
class="mm-box"
>
<div
class=""
style="display: inline;"
Expand Down
19 changes: 14 additions & 5 deletions ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
AvatarToken,
Text,
Box,
Button,
ButtonBase,
AvatarNetworkSize,
BadgeWrapper,
AvatarNetwork,
Expand Down Expand Up @@ -130,7 +130,7 @@ export function AssetPicker({
}
/>

<Button
<ButtonBase
data-testid="asset-picker-button"
className="asset-picker"
disabled={isDisabled}
Expand Down Expand Up @@ -181,8 +181,17 @@ export function AssetPicker({
</BadgeWrapper>
</Box>

<Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
<Text className="asset-picker__symbol" variant={TextVariant.bodyMd}>
<Tooltip
disabled={!isSymbolLong}
title={symbol}
position="bottom"
wrapperClassName="mm-box"
>
<Text
className="asset-picker__symbol"
variant={TextVariant.bodyMd}
color={TextColor.textDefault}
>
{formattedSymbol}
</Text>
{isNFT && asset?.tokenId && (
Expand All @@ -198,7 +207,7 @@ export function AssetPicker({
)}
</Tooltip>
</Box>
</Button>
</ButtonBase>
</>
);
}