mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Migrate Label component to TS (#19146)
* Migrating Label component to TS * label TS updates --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net> Co-authored-by: garrettbear <gwhisten@gmail.com>
This commit is contained in:
parent
23c30d9ae1
commit
9b0f8d457b
@ -1 +0,0 @@
|
||||
export { Label } from './label';
|
2
ui/components/component-library/label/index.ts
Normal file
2
ui/components/component-library/label/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { Label } from './label';
|
||||
export type { LabelComponent, LabelProps } from './label.types';
|
@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
FontWeight,
|
||||
TextVariant,
|
||||
Display,
|
||||
AlignItems,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { Text } from '..';
|
||||
|
||||
export const Label = ({ htmlFor, className, children, ...props }) => (
|
||||
<Text
|
||||
className={classnames(
|
||||
'mm-label',
|
||||
{ 'mm-label--html-for': htmlFor },
|
||||
className,
|
||||
)}
|
||||
as="label"
|
||||
htmlFor={htmlFor}
|
||||
variant={TextVariant.bodyMd}
|
||||
fontWeight={FontWeight.Medium}
|
||||
display={Display.InlineFlex}
|
||||
alignItems={AlignItems.center}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
|
||||
Label.propTypes = {
|
||||
/**
|
||||
* The content of the label
|
||||
*/
|
||||
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||
/**
|
||||
* The id of the input associated with the label
|
||||
*/
|
||||
htmlFor: PropTypes.string,
|
||||
/**
|
||||
* Additional classNames to be added to the label component
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
};
|
@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Display,
|
||||
FlexDirection,
|
||||
AlignItems,
|
||||
IconColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -37,21 +38,21 @@ export default {
|
||||
args: {
|
||||
children: 'Label',
|
||||
},
|
||||
};
|
||||
} as ComponentMeta<typeof Label>;
|
||||
|
||||
const Template = (args) => <Label {...args} />;
|
||||
const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
|
||||
|
||||
export const DefaultStory = Template.bind({});
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Children = (args) => (
|
||||
export const Children: ComponentStory<typeof Label> = (args) => (
|
||||
<Box
|
||||
display={DISPLAY.INLINE_FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.InlineFlex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
gap={2}
|
||||
>
|
||||
<Label {...args}>Plain text</Label>
|
||||
<Label {...args} display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
|
||||
<Label {...args} display={Display.Flex} alignItems={AlignItems.flexStart}>
|
||||
Text and icon
|
||||
<Icon
|
||||
color={IconColor.iconAlternative}
|
||||
@ -61,8 +62,8 @@ export const Children = (args) => (
|
||||
</Label>
|
||||
<Label
|
||||
{...args}
|
||||
display={DISPLAY.INLINE_FLEX}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
display={Display.InlineFlex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
alignItems={AlignItems.flexStart}
|
||||
>
|
||||
Label that wraps an input
|
||||
@ -71,13 +72,13 @@ export const Children = (args) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const HtmlFor = (args) => {
|
||||
export const HtmlFor: ComponentStory<typeof Label> = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
const handleOnChange = (e) => {
|
||||
setValue(e.target.value);
|
||||
};
|
||||
return (
|
||||
<Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
|
||||
<Box display={Display.InlineFlex} flexDirection={FlexDirection.Column}>
|
||||
<Label {...args} />
|
||||
<TextField
|
||||
id="add-network"
|
39
ui/components/component-library/label/label.tsx
Normal file
39
ui/components/component-library/label/label.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Text } from '../text';
|
||||
import type { TextProps } from '../text';
|
||||
import {
|
||||
FontWeight,
|
||||
TextVariant,
|
||||
Display,
|
||||
AlignItems,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import type { PolymorphicRef } from '../box';
|
||||
import { LabelProps, LabelComponent } from './label.types';
|
||||
|
||||
export const Label: LabelComponent = React.forwardRef(
|
||||
<C extends React.ElementType = 'label'>(
|
||||
{ htmlFor, className, children, ...props }: LabelProps<C>,
|
||||
ref?: PolymorphicRef<C>,
|
||||
) => {
|
||||
return (
|
||||
<Text
|
||||
className={classnames(
|
||||
'mm-label',
|
||||
{ 'mm-label--html-for': Boolean(htmlFor) },
|
||||
className ?? '',
|
||||
)}
|
||||
as="label"
|
||||
htmlFor={htmlFor}
|
||||
variant={TextVariant.bodyMd}
|
||||
fontWeight={FontWeight.Medium}
|
||||
display={Display.InlineFlex}
|
||||
alignItems={AlignItems.center}
|
||||
ref={ref}
|
||||
{...(props as TextProps<C>)}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
},
|
||||
);
|
24
ui/components/component-library/label/label.types.ts
Normal file
24
ui/components/component-library/label/label.types.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import type { PolymorphicComponentPropWithRef } from '../box';
|
||||
import type { TextStyleUtilityProps } from '../text';
|
||||
|
||||
export interface LabelStyleUtilityProps extends TextStyleUtilityProps {
|
||||
/**
|
||||
* The id of the input associated with the label
|
||||
*/
|
||||
htmlFor?: string;
|
||||
/**
|
||||
* Additional classNames to assign to the Label component
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The content of the Label component
|
||||
*/
|
||||
children: string | React.ReactNode;
|
||||
}
|
||||
|
||||
export type LabelProps<C extends React.ElementType> =
|
||||
PolymorphicComponentPropWithRef<C, LabelStyleUtilityProps>;
|
||||
|
||||
export type LabelComponent = <C extends React.ElementType = 'label'>(
|
||||
props: LabelProps<C>,
|
||||
) => React.ReactElement | null;
|
Loading…
Reference in New Issue
Block a user