m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Deprecating Typography component (#17672)

Browse Source 
* Deprecating Typography component

* Fixing lint issue
This commit is contained in:
George Marshall 2023-02-09 12:17:25 -08:00 committed by GitHub
parent 7aad1c9650
commit a5b908ccf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 154 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/components/ui/typography/README.mdx
View File

@ -1,6 +1,19 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import ActionableMessage from '../actionable-message';
import Typography from '.';
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { BannerAlert } from '../../component-library/banner-alert';
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
# Typography

8
ui/components/ui/typography/typography.js
View File

@ -53,6 +53,14 @@ export const ValidTags = [
'label',
];
/**
* @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
*
* See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
*
* Help to replace `Typography` with `Text` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/17670
*/
export default function Typography({
variant = TypographyVariant.paragraph,
color = Color.textDefault,

8
ui/components/ui/typography/typography.scss
View File

@ -1,3 +1,11 @@
/**
* @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
*
* See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
*
* Help to replace `Typography` with `Text` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/17670
*/
@use "design-system";
@use "sass:map";

149
ui/components/ui/typography/typography.stories.js
View File

@ -10,9 +10,12 @@ import {
Color as ColorEnum,
TextColor,
BorderColor,
SEVERITIES,
} from '../../../helpers/constants/design-system';
import Box from '../box';
import { BannerAlert } from '../../component-library/banner-alert';
import { ValidColors, ValidTags } from './typography';
import README from './README.mdx';
@ -104,12 +107,23 @@ function renderBackgroundColor(color) {
}
export const DefaultStory = (args) => (
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
{...args}
>
{args.children}
</Typography>
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
{...args}
>
{args.children}
</Typography>
</>
);
DefaultStory.storyName = 'Default';
@ -120,6 +134,15 @@ DefaultStory.args = {
export const Variant = (args) => (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
{Object.values(TypographyVariant).map((variant) => (
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@ -138,6 +161,15 @@ export const Color = (args) => {
const LAST_VALID_COLORS_ARRAY_INDEX = 16;
return (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
{Object.values(ValidColors).map((color, index) => {
if (index === LAST_VALID_COLORS_ARRAY_INDEX) {
return (
@ -191,6 +223,15 @@ export const Color = (args) => {
export const FontWeight = (args) => (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
{Object.values(FONT_WEIGHT).map((weight) => (
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@ -206,6 +247,15 @@ export const FontWeight = (args) => (
export const FontStyle = (args) => (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
{Object.values(FONT_STYLE).map((style) => (
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@ -221,6 +271,15 @@ export const FontStyle = (args) => (
export const Align = (args) => (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
{Object.values(TEXT_ALIGN).map((align) => (
<Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@ -235,24 +294,44 @@ export const Align = (args) => (
);
export const OverflowWrap = (args) => (
<div
style={{
width: 250,
border: '1px solid var(--color-error-default)',
display: 'block',
}}
>
<Typography {...args} overflowWrap={OVERFLOW_WRAP.NORMAL}>
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Typography>
<Typography {...args} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Typography>
</div>
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
<div
style={{
width: 250,
border: '1px solid var(--color-error-default)',
display: 'block',
}}
>
<Typography {...args} overflowWrap={OVERFLOW_WRAP.NORMAL}>
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Typography>
<Typography {...args} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Typography>
</div>
</>
);
export const As = (args) => (
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
<Typography boxProps={{ display: DISPLAY.BLOCK }} marginBottom={4}>
You can change the root element of the Typography component using the as
prop. Inspect the below elements to see the underlying HTML elements
@ -276,9 +355,20 @@ export const As = (args) => (
);
export const Margin = (args) => (
<Typography {...args}>
This Typography component has a margin of {args.margin * 4}px
</Typography>
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
<Typography {...args}>
This Typography component has a margin of {args.margin * 4}px
</Typography>
</>
);
Margin.args = {
@ -286,7 +376,18 @@ Margin.args = {
};
export const BoxProps = (args) => (
<Typography {...args}>This uses the boxProps prop</Typography>
<>
<BannerAlert
severity={SEVERITIES.WARNING}
title="Deprecated"
description="<Typography/> has been deprecated in favour of the <Text /> component"
actionButtonLabel="See details"
actionButtonProps={{
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}}
/>
<Typography {...args}>This uses the boxProps prop</Typography>
</>
);
BoxProps.args = {