m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Deprecating FormField and fixing console error (#19739)

Browse Source 
* Deprecating FormField and fixing console error

* Updating snapshots
This commit is contained in:
George Marshall 2023-06-26 09:29:33 -07:00 committed by GitHub
parent e37e570b2e
commit 48f61dcf61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
View File

@ -15,13 +15,13 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
class="form-field"
>
<div
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -52,7 +52,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</div>
</div>
<div
class="box form-field__heading-detail box--margin-bottom-2 box--flex-direction-row box--text-align-end"
class="mm-box form-field__heading-detail mm-box--margin-right-0 mm-box--margin-bottom-2 mm-box--text-align-end"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"

15
ui/components/ui/form-field/README.mdx
View File

@ -1,5 +1,20 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Severity } from '../../../helpers/constants/design-system';
import { BannerAlert } from '../../component-library/banner-alert';
<BannerAlert
severity={Severity.Warning}
title="Deprecated"
description="FormField has been deprecated in favor of FormTextField"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/19737',
}}
marginBottom={4}
/>
import FormField from '.';
# Form Field

21
ui/components/ui/form-field/form-field.js
View File

@ -2,10 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Box from '../box/box';
import {
TextAlign,
DISPLAY,
Display,
TextVariant,
AlignItems,
TextColor,
@ -13,7 +12,16 @@ import {
import NumericInput from '../numeric-input/numeric-input.component';
import InfoTooltip from '../info-tooltip/info-tooltip';
import { Text } from '../../component-library';
import { Text, Box } from '../../component-library';
/**
* @deprecated The `<FormField />` component has been deprecated in favor of the new `<FormTextField>` component from the component-library.
* Please update your code to use the new `<FormTextField>` component instead, which can be found at ui/components/component-library/form-text-field/form-text-field.js.
* You can find documentation for the new FormTextField component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-formtextfield--docs}
* If you would like to help with the replacement of the old FormField component, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19737}
*/
export default function FormField({
dataTestId,
@ -54,7 +62,7 @@ export default function FormField({
<div className="form-field__heading">
<Box
className="form-field__heading-title"
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.baseline}
{...titleHeadingWrapperProps}
>
@ -63,10 +71,9 @@ export default function FormField({
<Text
tag="label"
htmlFor={id}
html
variant={TextVariant.bodySmBold}
as="h6"
display={DISPLAY.INLINE_BLOCK}
display={Display.InlineBlock}
>
{titleText}
</Text>
@ -78,7 +85,7 @@ export default function FormField({
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
display={DISPLAY.INLINE_BLOCK}
display={Display.InlineBlock}
>
{titleUnit}
</Text>

1
ui/components/ui/form-field/form-field.stories.js
View File

@ -10,7 +10,6 @@ import FormField from '.';
export default {
title: 'Components/UI/FormField',
component: FormField,
parameters: {
docs: {

20
ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
View File

@ -40,13 +40,13 @@ exports[`Add Network Modal should render 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -71,13 +71,13 @@ exports[`Add Network Modal should render 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -102,13 +102,13 @@ exports[`Add Network Modal should render 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -158,13 +158,13 @@ exports[`Add Network Modal should render 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -189,13 +189,13 @@ exports[`Add Network Modal should render 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"

10
ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap
View File

@ -49,13 +49,13 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
@ -67,7 +67,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
</div>
<div
class="box form-field__heading-detail box--margin-right-2 box--flex-direction-row box--text-align-end"
class="mm-box form-field__heading-detail mm-box--margin-right-2 mm-box--text-align-end"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-default"
@ -96,13 +96,13 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
class="form-field"
>
<label
class="box box--flex-direction-row"
class="mm-box"
>
<div
class="form-field__heading"
>
<div
class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
>
<h6
class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"