1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

Part of #17670: Replace Typography with Text component in: callout.js (#18912)

* Part of #17670: Replace Typography with Text component in: callout.js

* Update ui/components/ui/callout/callout.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update callout.js

* Updating snapshot and deprecating component

* Updating snapshot and deprecating component

---------

Co-authored-by: Danica Shen <zhaodanica@gmail.com>
Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
Harsh Shukla 2023-06-27 08:06:01 +05:30 committed by GitHub
parent deabc3ed5f
commit ec4c4050e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 9 deletions

View File

@ -2,10 +2,18 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import InfoIconInverted from '../icon/info-icon-inverted.component';
import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
import { Severity, TextColor } from '../../../helpers/constants/design-system';
import { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography';
import { ButtonIcon, IconName, IconSize } from '../../component-library';
import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
/**
* @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`
* component in ./ui/components/component-library/banner-alert/banner-alert.js.
* See storybook documentation for BannerAlert here:
* {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--default-story#banneralert}}
*
* Help to replace `Callout` with `BannerAlert` by submitting a PR
*/
export default function Callout({
severity,
@ -38,9 +46,9 @@ export default function Callout({
return (
<div className={calloutClassName}>
<InfoIconInverted severity={severity} />
<Typography color={Color.textDefault} className="callout__content">
<Text color={TextColor.textDefault} className="callout__content">
{children}
</Typography>
</Text>
{dismiss && (
<ButtonIcon
iconName={IconName.Close}
@ -61,7 +69,7 @@ export default function Callout({
}
Callout.propTypes = {
severity: PropTypes.oneOf(Object.values(SEVERITIES)).isRequired,
severity: PropTypes.oneOf(Object.values(Severity)).isRequired,
children: PropTypes.node.isRequired,
dismiss: PropTypes.func,
isFirst: PropTypes.bool,

View File

@ -407,7 +407,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
/>
</svg>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
This custom network is not recognized
@ -438,7 +438,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
/>
</svg>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
<span>

View File

@ -241,7 +241,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
/>
</svg>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
Switching networks will cancel all pending confirmations