Skip to content

Commit

Permalink
fix: updated default button label text variant to bodyMDMedium (#12816)
Browse files Browse the repository at this point in the history 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Updated the `<Button/>` label default `TextVariant` to be
`TextVariant.BodyMDMedium` to reflect the current design system version.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

### Design


https://www.figma.com/design/HKpPKij9V3TpsyMV1TpV7C/DS-Components?m=auto&node-id=15196-36818

<img width="968" alt="image"
src="https://github.com/user-attachments/assets/a3bfc17d-a5af-4a05-a5b8-4fe1eb21ed67"
/>


## **Manual testing steps**

Note: This is a change to the component-library Button and should be
visible globally.

Specific Location to Test:
1. From the asset list (home screen), select Ethereum.
2. The "stake" (if you don't have any staked positions) or "unstake" and
"stake more" (if you have staked positions) button labels should be
using `TextVariant.BodyMDMedium`.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
<img width="372" alt="image"
src="https://github.com/user-attachments/assets/41615925-c6b4-43fd-b579-6d7098047af4"
/>

### **After**

<!-- [screenshots/recordings] -->
<img width="372" alt="image"
src="https://github.com/user-attachments/assets/cae8075c-5d62-4cd8-a3af-34c6d5c92ba2"
/>

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
@Matt561
Matt561 authored Jan 7, 2025
1 parent 82d7f87 commit edb523a
Show file tree
Hide file tree
Showing 69 changed files with 329 additions and 797 deletions.
8 changes: 4 additions & 4 deletions ...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,9 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -249,9 +249,9 @@ exports[`CustomSpendCap should match snapshot 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,9 @@ exports[`Banner should render correctly with a close button 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -412,9 +412,9 @@ exports[`Banner should render correctly with an action button 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions ...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@ exports[`BannerAlert should render BannerAlert 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions ...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,9 @@ exports[`BannerTip should render default settings correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions ...y/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -81,9 +81,9 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
2 changes: 1 addition & 1 deletion ...component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const DEFAULT_BUTTONBASE_LABEL_COLOR = TextColor.Default;
export const DEFAULT_BUTTONBASE_SIZE = ButtonSize.Md;
export const DEFAULT_BUTTONBASE_WIDTH = ButtonWidthTypes.Auto;
export const DEFAULT_BUTTONBASE_ICON_SIZE = IconSize.Sm;
export const DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT = TextVariant.BodyMD;
export const DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT = TextVariant.BodyMDMedium;

// Samples
export const SAMPLE_BUTTONBASE_PROPS: ButtonBaseProps = {
Expand Down
4 changes: 2 additions & 2 deletions ...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`ButtonBase should render correctly 1`] = `
"color": "#141618",
}
}
variant="sBodyMD"
variant="sBodyMDMedium"
>
Click me!
</Text>
Expand Down Expand Up @@ -81,7 +81,7 @@ exports[`ButtonBase should render correctly when disabled 1`] = `
"color": "#141618",
}
}
variant="sBodyMD"
variant="sBodyMDMedium"
>
Click me!
</Text>
Expand Down
4 changes: 2 additions & 2 deletions ...rary/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ exports[`ButtonLink should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions ...omponents/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ exports[`ButtonPrimary render matches latest snapshot 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions ...nents/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ exports[`ButtonSecondary should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,9 +232,9 @@ exports[`AddCustomToken render matches previous snapshot 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions ...cFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,9 +266,9 @@ exports[`BasicFunctionalityModal should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -312,9 +312,9 @@ exports[`BasicFunctionalityModal should render correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
4 changes: 2 additions & 2 deletions app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,9 +216,9 @@ exports[`CollectibleModal should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,9 +328,9 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -368,9 +368,9 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions ...tomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,9 +477,9 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -514,9 +514,9 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,9 +537,9 @@ exports[`NetworkDetails renders correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -577,9 +577,9 @@ exports[`NetworkDetails renders correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions ...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,9 +498,9 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -538,9 +538,9 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions .../Notification/ResetNotificationsModal/__snapshots__/ResetNotificationsModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,9 @@ exports[`ProfileSyncingModal should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -261,9 +261,9 @@ exports[`ProfileSyncingModal should render correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
8 changes: 4 additions & 4 deletions app/components/UI/OnboardingWizard/Step1/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,9 +156,9 @@ exports[`Step1 should render correctly 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -197,9 +197,9 @@ exports[`Step1 should render correctly 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
12 changes: 6 additions & 6 deletions app/components/UI/OptinMetrics/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -736,9 +736,9 @@ exports[`OptinMetrics render matches snapshot 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -798,9 +798,9 @@ exports[`OptinMetrics render matches snapshot 1`] = `
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down Expand Up @@ -844,9 +844,9 @@ exports[`OptinMetrics render matches snapshot 1`] = `
style={
{
"color": "#ffffff",
"fontFamily": "EuclidCircularB-Regular",
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 14,
"fontWeight": "400",
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 22,
}
Expand Down
Loading

0 comments on commit edb523a

Please sign in to comment.