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

Label house keeping updates (#16680)

Browse Source
This commit is contained in:
George Marshall 2022-11-29 13:01:05 -08:00 committed by GitHub
parent a76c8ecfa1
commit 9a434aed5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/components/component-library/label/README.mdx
View File

@ -1,10 +1,12 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Text } from '..';
import { Label } from './label';
# Label
The `Label` is a component used to label form inputs.
The `Label` is a component used to label form inputs
<Canvas>
<Story id="ui-components-component-library-label-label-stories-js--default-story" />
@ -12,13 +14,17 @@ The `Label` is a component used to label form inputs.
## Props
The `Label` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
The `Label` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
<ArgsTable of={Label} />
`Label` accepts all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) component props
<ArgsTable of={Text} />
### Children
The `children` of the label can be text or a react node.
The `children` of the label can be text or a react node
<Canvas>
<Story id="ui-components-component-library-label-label-stories-js--children" />
@ -26,9 +32,7 @@ The `children` of the label can be text or a react node.
```jsx
import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { Label } from '../../ui/components/component-library';
import { TextFieldBase } from '../../ui/components/component-library';
import { Label, TextField, Icon, ICON_NAMES } from '../../component-library';
<Label>Plain text</Label>
<Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@ -45,25 +49,23 @@ import { TextFieldBase } from '../../ui/components/component-library';
alignItems={ALIGN_ITEMS.FLEX_START}
>
Label that wraps an input
{/* TODO: replace with TextField component */}
<TextFieldBase placeholder="Click label to focus" />
<TextField placeholder="Click label to focus" />
</Label>
```
### Html For
Use the `htmlFor` prop to allow the `Label` to focus on an input with the same id when clicked. The cursor will also change to a `pointer` when the `htmlFor` has a value
Use the `htmlFor` prop to allow the `Label` to focus on an input with the same id when clicked. The cursor will also change to a `pointer` when the `htmlFor` has a value.
<Canvas>
<Story id="ui-components-component-library-label-label-stories-js--html-for" />
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/components/component-library';
import { Label } from '../../ui/components/component-library';
import { Label, TextFieldBase } from '../../component-library';
<Label htmlFor="add-network">Add network</Label>
<TextFieldBase id="add-network" placeholder="Enter network name" />
<TextField id="add-network" placeholder="Enter network name" />
```
### Required
@ -75,7 +77,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
</Canvas>
```jsx
import { Label } from '../../ui/components/component-library';
import { Label } from '../../component-library';
<Label required>Label</Label>;
```
@ -89,7 +91,7 @@ Use the `disabled` prop to set the `Label` in disabled state
</Canvas>
```jsx
import { Label } from '../../ui/components/component-library';
import { Label } from '../../component-library';
<Label disabled>Label</Label>;
```

11
ui/components/component-library/label/__snapshots__/label.test.js.snap Normal file
View File

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`label should render text inside the label 1`] = `
<div>
<label
class="box text mm-label text--body-md text--font-weight-bold text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
>
label
</label>
</div>
`;

6
ui/components/component-library/label/label.js
View File

@ -20,15 +20,15 @@ export const Label = ({
...props
}) => (
<Text
as="label"
disabled={disabled}
htmlFor={htmlFor}
className={classnames(
'mm-label',
{ 'mm-label--disabled': disabled },
{ 'mm-label--html-for': htmlFor && !disabled },
className,
)}
as="label"
disabled={disabled}
htmlFor={htmlFor}
variant={TEXT.BODY_MD}
fontWeight={FONT_WEIGHT.BOLD}
display={DISPLAY.INLINE_FLEX}

9
ui/components/component-library/label/label.stories.js
View File

@ -8,8 +8,8 @@ import {
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon';
import { TextFieldBase } from '../text-field-base';
import { Icon, ICON_NAMES, TextField } from '..';
import { Label } from './label';
@ -73,8 +73,7 @@ export const Children = (args) => (
alignItems={ALIGN_ITEMS.FLEX_START}
>
Label that wraps an input
{/* TODO: replace with TextField component */}
<TextFieldBase placeholder="Click label to focus" />
<TextField placeholder="Click label to focus" />
</Label>
</Box>
);
@ -87,7 +86,7 @@ export const HtmlFor = (args) => {
return (
<Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
<Label {...args} />
<TextFieldBase
<TextField
id="add-network"
value={value}
onChange={handleOnChange}

12
ui/components/component-library/label/label.test.js
View File

@ -8,8 +8,14 @@ import { Label } from './label';
describe('label', () => {
it('should render text inside the label', () => {
const { getByText } = render(<Label>label</Label>);
const { getByText, container } = render(<Label>label</Label>);
expect(getByText('label')).toHaveClass('mm-label');
expect(getByText('label')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render with additional className', () => {
const { getByText } = render(<Label className="test-class">label</Label>);
expect(getByText('label')).toHaveClass('mm-label test-class');
});
it('should render text and react nodes as children', () => {
const { getByText, getByTestId } = render(
@ -60,8 +66,4 @@ describe('label', () => {
const { getByText } = render(<Label disabled>label</Label>);
expect(getByText('label')).toHaveClass('mm-label--disabled');
});
it('should render with additional className', () => {
const { getByText } = render(<Label className="test-class">label</Label>);
expect(getByText('label')).toHaveClass('test-class');
});
});