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

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/components/ui/callout/callout.js
View File

@ -2,10 +2,18 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import InfoIconInverted from '../icon/info-icon-inverted.component'; 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 { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography'; import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
import { ButtonIcon, IconName, IconSize } 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({ export default function Callout({
severity, severity,
@ -38,9 +46,9 @@ export default function Callout({
return ( return (
<div className={calloutClassName}> <div className={calloutClassName}>
<InfoIconInverted severity={severity} /> <InfoIconInverted severity={severity} />
<Typography color={Color.textDefault} className="callout__content"> <Text color={TextColor.textDefault} className="callout__content">
{children} {children}
</Typography> </Text>
{dismiss && ( {dismiss && (
<ButtonIcon <ButtonIcon
iconName={IconName.Close} iconName={IconName.Close}
@ -61,7 +69,7 @@ export default function Callout({
} }
Callout.propTypes = { Callout.propTypes = {
severity: PropTypes.oneOf(Object.values(SEVERITIES)).isRequired, severity: PropTypes.oneOf(Object.values(Severity)).isRequired,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
dismiss: PropTypes.func, dismiss: PropTypes.func,
isFirst: PropTypes.bool, isFirst: PropTypes.bool,

4
ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
View File

@ -407,7 +407,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
/> />
</svg> </svg>
<p <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>
This custom network is not recognized This custom network is not recognized
@ -438,7 +438,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
/> />
</svg> </svg>
<p <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>
<span> <span>

2
ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
View File

@ -241,7 +241,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
/> />
</svg> </svg>
<p <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>
Switching networks will cancel all pending confirmations Switching networks will cancel all pending confirmations