mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Replacing Deprecated Constants (#19333)
This commit is contained in:
parent
33cd2c7c18
commit
ee9f7949f9
@ -87,7 +87,7 @@ An example of a form using the `FormTextField` component.
|
||||
```jsx
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
DISPLAY,
|
||||
Display,
|
||||
TextColor,
|
||||
AlignItems,
|
||||
TextVariant,
|
||||
@ -225,7 +225,7 @@ return (
|
||||
error={Boolean(submitted === FORM_STATE.ERROR && errors.chainId)}
|
||||
helpText={submitted === FORM_STATE.ERROR ? errors.chainId : null}
|
||||
/>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center} gap={1}>
|
||||
<Box display={Display.Flex} alignItems={AlignItems.center} gap={1}>
|
||||
<ButtonPrimary type="submit">Submit</ButtonPrimary>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -256,7 +256,7 @@ There will be times when you will want to use a custom `Label` or `HelpText`. Th
|
||||
```jsx
|
||||
import {
|
||||
Size,
|
||||
DISPLAY,
|
||||
Display,
|
||||
IconColor,
|
||||
AlignItems,
|
||||
JustifyContent,
|
||||
@ -279,11 +279,11 @@ import {
|
||||
FormTextField component
|
||||
</Text>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
alignItems={AlignItems.flexEnd}
|
||||
>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
|
||||
<Box display={Display.Flex} alignItems={AlignItems.center}>
|
||||
{/**
|
||||
* If you need a custom label
|
||||
* or require adding some form of customization
|
||||
@ -314,7 +314,7 @@ import {
|
||||
type={TEXT_FIELD_TYPES.NUMBER}
|
||||
/>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.flexStart}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
marginTop={1}
|
||||
|
@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
SEVERITIES,
|
||||
Display,
|
||||
FlexDirection,
|
||||
Severity,
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
@ -52,8 +52,8 @@ export const FormTextField = ({
|
||||
{ 'mm-form-text-field--disabled': disabled },
|
||||
className,
|
||||
)}
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
{...props}
|
||||
>
|
||||
{label && (
|
||||
@ -102,7 +102,7 @@ export const FormTextField = ({
|
||||
/>
|
||||
{helpText && (
|
||||
<HelpText
|
||||
severity={error && SEVERITIES.DANGER}
|
||||
severity={error && Severity.Danger}
|
||||
marginTop={1}
|
||||
{...helpTextProps}
|
||||
className={classnames(
|
||||
|
@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
|
||||
import {
|
||||
DISPLAY,
|
||||
Display,
|
||||
AlignItems,
|
||||
TextVariant,
|
||||
JustifyContent,
|
||||
@ -369,7 +369,7 @@ export const FormExample = () => {
|
||||
error={Boolean(submitted === FORM_STATE.ERROR && errors.chainId)}
|
||||
helpText={submitted === FORM_STATE.ERROR ? errors.chainId : null}
|
||||
/>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center} gap={1}>
|
||||
<Box display={Display.Flex} alignItems={AlignItems.center} gap={1}>
|
||||
<ButtonPrimary type="submit">Submit</ButtonPrimary>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -396,11 +396,11 @@ export const CustomLabelOrHelpText = () => (
|
||||
FormTextField component
|
||||
</Text>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
alignItems={AlignItems.flexEnd}
|
||||
>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
|
||||
<Box display={Display.Flex} alignItems={AlignItems.center}>
|
||||
{/* If you need a custom label
|
||||
or require adding some form of customization
|
||||
import the Label component separately */}
|
||||
@ -427,7 +427,7 @@ export const CustomLabelOrHelpText = () => (
|
||||
type={TEXT_FIELD_TYPES.NUMBER}
|
||||
/>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.flexStart}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user