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

Update HelpText component (#17705)

Browse Source 
* Updating HelpText component

* Updating logic for html element depending on children

* Adding span to story to reflect docs

* Updating reveal seed instance
This commit is contained in:
George Marshall 2023-02-16 12:42:15 -08:00 committed by GitHub
parent 33cc8d587a
commit cf487b8f97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 147 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/form-text-field/form-text-field.js
View File

@ -5,6 +5,7 @@ import classnames from 'classnames';
import { import {
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
SEVERITIES,
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -103,6 +104,7 @@ export const FormTextField = ({
{helpText && ( {helpText && (
<HelpText <HelpText
error={error} error={error}
severity={error && SEVERITIES.DANGER}
marginTop={1} marginTop={1}
{...helpTextProps} {...helpTextProps}
className={classnames( className={classnames(

70
ui/components/component-library/help-text/README.mdx
View File

@ -6,7 +6,7 @@ import { HelpText } from './help-text';
# HelpText # HelpText
The `HelpText` is intended to be used as the help or error text under a form element The `HelpText` is used as feedback text under a form field including error, success, warning or info messages
<Canvas> <Canvas>
<Story id="components-componentlibrary-helptext--default-story" /> <Story id="components-componentlibrary-helptext--default-story" />
@ -24,40 +24,49 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
### Children ### Children
The `children` of the `HelpText` can be plain text or react nodes `HelpText` renders as a `<p>` tag if the child is a `string` or a `<div>` if the child is an `object`.
<Canvas>
<Story id="components-componentlibrary-helptext--children" />
</Canvas>
```jsx ```jsx
import { Size, IconColor } from '../../../helpers/constants/design-system'; import { Size, IconColor } from '../../../helpers/constants/design-system';
import { HelpText, Icon, ICON_NAMES } from '../../component-library'; import { HelpText, Icon, ICON_NAMES } from '../../component-library';
<HelpText>Plain text</HelpText> <HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
<HelpText> <HelpText>
Text and icon <span>Text and icon</span>
<Icon <Icon
marginLeft={1} marginLeft={1}
color={IconColor.inherit} color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING} name={ICON_NAMES.WARNING}
size={Size.inherit} size={Size.inherit}
/> />
</HelpText> </HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
``` ```
### Error ### Severity
Use the `error` prop to show the `HelpText` in error state Use the `severity` prop and `SEVERITIES` object to change the severity of the `HelpText`
<Canvas> <Canvas>
<Story id="components-componentlibrary-helptext--error-story" /> <Story id="components-componentlibrary-helptext--severity-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { HelpText } from '../../component-library'; import { HelpText } from '../../component-library';
<HelpText error>This HelpText in error state</HelpText>; <HelpText>HelpText without severity prop</HelpText>
<HelpText severity={SEVERITIES.DANGER}>
HelpText with severity: SEVERITY.DANGER
</HelpText>
<HelpText severity={SEVERITIES.SUCCESS}>
HelpText with severity: SEVERITY.SUCCESS
</HelpText>
<HelpText severity={SEVERITIES.WARNING}>
HelpText with severity: SEVERITY.WARNING
</HelpText>
<HelpText severity={SEVERITIES.INFO}>
HelpText with severity: SEVERITY.INFO
</HelpText>
``` ```
### Color ### Color
@ -72,18 +81,13 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
import { Color } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
import { HelpText } from '../../component-library'; import { HelpText } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}> <HelpText color={TextColor.textDefault}>
<HelpText color={Color.textDefault} {...args}> This HelpText default color is TextColor.textDefault
This HelpText default color is Color.textDefault </HelpText>
</HelpText> <HelpText color={TextColor.textAlternative}>
<HelpText color={Color.infoDefault} {...args}> This HelpText color is TextColor.textAlternative
This HelpText color is Color.infoDefault </HelpText>
</HelpText> <HelpText color={TextColor.textMuted}>
<HelpText color={Color.warningDefault} {...args}> This HelpText color is TextColor.textMuted
This HelpText color is Color.warningDefault </HelpText>
</HelpText>
<HelpText color={Color.successDefault} {...args}>
This HelpText color is Color.successDefault
</HelpText>
</Box>;
``` ```

6
ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
View File

@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HelpText should render with text inside the HelpText 1`] = ` exports[`HelpText should match snapshot 1`] = `
<div> <div>
<span <p
class="box mm-text mm-help-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row" class="box mm-text mm-help-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row"
> >
help text help text
</span> </p>
</div> </div>
`; `;

48
ui/components/component-library/help-text/help-text.js
View File

@ -6,34 +6,46 @@ import {
Color, Color,
TextVariant, TextVariant,
TextColor, TextColor,
SEVERITIES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Text } from '../text'; import { Text } from '../text';
export const HelpText = ({ export const HelpText = ({
error, severity,
color = Color.textDefault, color = Color.textDefault,
className, className,
children, children,
...props ...props
}) => ( }) => {
<Text const severityColor = () => {
className={classnames('mm-help-text', className)} switch (severity) {
as="span" case SEVERITIES.DANGER:
variant={TextVariant.bodyXs} return TextColor.errorDefault;
color={error ? Color.errorDefault : color} case SEVERITIES.WARNING:
{...props} return TextColor.warningDefault;
> case SEVERITIES.SUCCESS:
{children} return TextColor.successDefault;
</Text> case SEVERITIES.INFO:
); return TextColor.infoDefault;
// Defaults to SEVERITIES.INFO
default:
return TextColor.textDefault;
}
};
return (
<Text
className={classnames('mm-help-text', className)}
as={children && typeof children === 'object' ? 'div' : 'p'}
variant={TextVariant.bodyXs}
color={severity ? severityColor() : color}
{...props}
>
{children}
</Text>
);
};
HelpText.propTypes = { HelpText.propTypes = {
/**
* If the HelperText should display in error state
* Will override the color prop if true
*/
error: PropTypes.bool,
/** /**
* The color of the HelpText will be overridden if error is true * The color of the HelpText will be overridden if error is true
* Defaults to Color.textDefault * Defaults to Color.textDefault

53
ui/components/component-library/help-text/help-text.stories.js
View File

@ -2,9 +2,10 @@ import React from 'react';
import { import {
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
Color, IconColor,
TextColor, TextColor,
Size, Size,
SEVERITIES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
@ -31,8 +32,9 @@ export default {
className: { className: {
control: 'text', control: 'text',
}, },
error: { severity: {
control: 'boolean', control: 'select',
options: Object.values(SEVERITIES),
}, },
color: { color: {
control: 'select', control: 'select',
@ -52,38 +54,49 @@ DefaultStory.storyName = 'Default';
export const Children = (args) => ( export const Children = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}> <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText {...args}>Plain text</HelpText> <HelpText {...args}>Plain text</HelpText>
<HelpText {...args}> <HelpText>
Text and icon <span>Text and icon</span>
<Icon <Icon
marginLeft={1} marginLeft={1}
color={Color.inherit} color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING} name={ICON_NAMES.WARNING}
size={Size.inherit} size={Size.inherit}
as="span"
/> />
</HelpText> </HelpText>
</Box> </Box>
); );
export const ErrorStory = (args) => ( export const SeverityStory = (args) => (
<HelpText error {...args}> <>
This HelpText in error state <HelpText {...args}>HelpText without severity prop</HelpText>
</HelpText> <HelpText {...args} severity={SEVERITIES.DANGER}>
HelpText with severity: SEVERITY.DANGER
</HelpText>
<HelpText {...args} severity={SEVERITIES.SUCCESS}>
HelpText with severity: SEVERITY.SUCCESS
</HelpText>
<HelpText {...args} severity={SEVERITIES.WARNING}>
HelpText with severity: SEVERITY.WARNING
</HelpText>
<HelpText {...args} severity={SEVERITIES.INFO}>
HelpText with severity: SEVERITY.INFO
</HelpText>
</>
); );
ErrorStory.storyName = 'Error';
SeverityStory.storyName = 'Severity';
export const ColorStory = (args) => ( export const ColorStory = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}> <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={Color.textDefault} {...args}> <HelpText color={TextColor.textDefault} {...args}>
This HelpText default color is Color.textDefault This HelpText default color is TextColor.textDefault
</HelpText> </HelpText>
<HelpText color={Color.infoDefault} {...args}> <HelpText color={TextColor.textAlternative} {...args}>
This HelpText color is Color.infoDefault This HelpText color is TextColor.textAlternative
</HelpText> </HelpText>
<HelpText color={Color.warningDefault} {...args}> <HelpText color={TextColor.textMuted} {...args}>
This HelpText color is Color.warningDefault This HelpText color is TextColor.textMuted
</HelpText>
<HelpText color={Color.successDefault} {...args}>
This HelpText color is Color.successDefault
</HelpText> </HelpText>
</Box> </Box>
); );

51
ui/components/component-library/help-text/help-text.test.js
View File

@ -1,16 +1,19 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { Color } from '../../../helpers/constants/design-system'; import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../icon'; import { Icon, ICON_NAMES } from '../icon';
import { HelpText } from './help-text'; import { HelpText } from './help-text';
describe('HelpText', () => { describe('HelpText', () => {
it('should render with text inside the HelpText', () => { it('should render with text inside the HelpText', () => {
const { getByText, container } = render(<HelpText>help text</HelpText>); const { getByText } = render(<HelpText>help text</HelpText>);
expect(getByText('help text')).toBeDefined(); expect(getByText('help text')).toBeDefined();
expect(getByText('help text')).toHaveClass('mm-help-text'); expect(getByText('help text')).toHaveClass('mm-help-text');
});
it('should match snapshot', () => {
const { container } = render(<HelpText>help text</HelpText>);
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });
it('should render with and additional className', () => { it('should render with and additional className', () => {
@ -29,22 +32,50 @@ describe('HelpText', () => {
expect(getByText('help text')).toBeDefined(); expect(getByText('help text')).toBeDefined();
expect(getByTestId('icon')).toBeDefined(); expect(getByTestId('icon')).toBeDefined();
}); });
it('should render with error state', () => { it('should render with severities', () => {
const { getByText } = render(<HelpText error>error</HelpText>); const { getByText } = render(
<>
<HelpText severity={SEVERITIES.DANGER}>error</HelpText>
<HelpText severity={SEVERITIES.SUCCESS}>success</HelpText>
<HelpText severity={SEVERITIES.WARNING}>warning</HelpText>
<HelpText severity={SEVERITIES.INFO}>info</HelpText>
</>,
);
expect(getByText('error')).toHaveClass('mm-text--color-error-default'); expect(getByText('error')).toHaveClass('mm-text--color-error-default');
expect(getByText('success')).toHaveClass('mm-text--color-success-default');
expect(getByText('warning')).toHaveClass('mm-text--color-warning-default');
expect(getByText('info')).toHaveClass('mm-text--color-info-default');
}); });
it('should render with different colors', () => { it('should render with different colors', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<HelpText>default</HelpText> <HelpText>default</HelpText>
<HelpText color={Color.warningDefault}>warning</HelpText> <HelpText color={Color.textDefault}>text default</HelpText>
<HelpText color={Color.successDefault}>success</HelpText> <HelpText color={Color.textAlternative}>text alternative</HelpText>
<HelpText color={Color.infoDefault}>info</HelpText> <HelpText color={Color.textMuted}>text muted</HelpText>
</>, </>,
); );
expect(getByText('default')).toHaveClass('mm-text--color-text-default'); expect(getByText('default')).toHaveClass('mm-text--color-text-default');
expect(getByText('warning')).toHaveClass('mm-text--color-warning-default'); expect(getByText('text default')).toHaveClass(
expect(getByText('success')).toHaveClass('mm-text--color-success-default'); 'mm-text--color-text-default',
expect(getByText('info')).toHaveClass('mm-text--color-info-default'); );
expect(getByText('text alternative')).toHaveClass(
'mm-text--color-text-alternative',
);
expect(getByText('text muted')).toHaveClass('mm-text--color-text-muted');
});
it('should render with a different html element if children is an object', () => {
const { getByText, getByTestId } = render(
<>
<HelpText>help text as p</HelpText>
<HelpText data-testid="help-text-div">
<span>help text as div</span> <Icon name={ICON_NAMES.WARNING} />
</HelpText>
</>,
);
expect(getByText('help text as p')).toBeDefined();
expect(getByText('help text as p').tagName).toBe('P');
expect(getByText('help text as div')).toBeDefined();
expect(getByTestId('help-text-div').tagName).toBe('DIV');
}); });
}); });

2
ui/pages/keychains/reveal-seed.js
View File

@ -138,7 +138,7 @@ const RevealSeedPage = () => {
error={error} error={error}
width={BLOCK_SIZES.FULL} width={BLOCK_SIZES.FULL}
/> />
{error && <HelpText error>{error}</HelpText>} {error && <HelpText severity={SEVERITIES.DANGER}>{error}</HelpText>}
</form> </form>
); );
}; };