feat/add props form control (#45706)
* feat: add textarea variation to formControl * feat/add-storybook-argtypespull/45723/head
parent
58235a42c6
commit
3c4f671629
|
@ -4,7 +4,33 @@ import { FormControl, FormControlProps, FormControlVariationProps } from '.';
|
|||
|
||||
const story = {
|
||||
title: 'Example/FormControl',
|
||||
component: FormControl
|
||||
component: FormControl,
|
||||
parameters: {
|
||||
controls: {
|
||||
include: [
|
||||
'className',
|
||||
'id',
|
||||
'onChange',
|
||||
'value',
|
||||
'componentClass',
|
||||
'placeholder',
|
||||
'required',
|
||||
'type'
|
||||
]
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: { type: 'text' } },
|
||||
id: { control: { type: 'text' } },
|
||||
onChange: { action: 'changed' },
|
||||
value: { control: { type: 'text' } },
|
||||
componentClass: {
|
||||
options: ['input', 'textarea']
|
||||
},
|
||||
placeholder: { control: { type: 'text' } },
|
||||
required: { control: 'boolean' },
|
||||
type: { options: ['text', 'email', 'url'] }
|
||||
}
|
||||
};
|
||||
|
||||
const DefaultTemplate: Story<FormControlProps> = args => {
|
||||
|
|
|
@ -2,18 +2,55 @@ import React from 'react';
|
|||
|
||||
import { FormControlFeedback as Feedback } from './form-control-feedback';
|
||||
import { FormControlStatic as Static } from './form-control-static';
|
||||
import { FormControlProps } from './types';
|
||||
import { FormControlProps, FormControlElement } from './types';
|
||||
|
||||
const FormControl = React.forwardRef<HTMLInputElement, FormControlProps>(
|
||||
({ className, id, testId }, ref): JSX.Element => {
|
||||
const defaultClasses =
|
||||
'outline-0 block w-full h-8 py-1.5 px-2.5 text-md text-default-foreground-primary ' +
|
||||
// Uses controlId from <FormGroup> if not explicitly specified.
|
||||
// type Only relevant if componentClass is 'input'.
|
||||
|
||||
const FormControl = React.forwardRef<FormControlElement, FormControlProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
id,
|
||||
testId,
|
||||
onChange,
|
||||
value,
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
componentClass: Component = 'input',
|
||||
placeholder,
|
||||
name,
|
||||
required,
|
||||
type
|
||||
},
|
||||
ref
|
||||
): JSX.Element => {
|
||||
let defaultClasses =
|
||||
'outline-0 block w-full py-1.5 px-2.5 text-md text-default-foreground-primary ' +
|
||||
'bg-default-background-primary bg-none rounded-none border-1 border-solid ' +
|
||||
'border-default-background-quaternary shadow-none ' +
|
||||
'transition ease-in-out duration-150 focus:border-default-foreground-tertiary';
|
||||
|
||||
const classes = [defaultClasses, className].join(' ');
|
||||
return <input ref={ref} id={id} data-testid={testId} className={classes} />;
|
||||
let variantClass;
|
||||
if (Component === 'textarea') variantClass = 'h-auto';
|
||||
else defaultClasses += 'h-8';
|
||||
|
||||
//row and componentClass
|
||||
const classes = [defaultClasses, variantClass, className].join(' ');
|
||||
|
||||
return (
|
||||
<Component
|
||||
ref={ref}
|
||||
id={id}
|
||||
data-testid={testId}
|
||||
className={classes}
|
||||
value={value}
|
||||
required={required}
|
||||
onChange={onChange}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
type={type}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
const MainFormControl = Object.assign(FormControl, { Feedback, Static });
|
||||
|
|
|
@ -1,7 +1,20 @@
|
|||
export interface FormControlProps {
|
||||
import React from 'react';
|
||||
|
||||
export type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
|
||||
|
||||
export interface FormControlProps
|
||||
extends React.HTMLAttributes<FormControlElement> {
|
||||
className?: string;
|
||||
id?: string;
|
||||
testId?: string;
|
||||
onChange?: React.ChangeEventHandler<FormControlElement>;
|
||||
value?: string;
|
||||
componentClass?: typeof React.Component;
|
||||
placeholder?: string;
|
||||
name?: string;
|
||||
required?: boolean;
|
||||
rows?: number;
|
||||
type?: 'text' | 'email' | 'url';
|
||||
}
|
||||
|
||||
export interface FormControlVariationProps {
|
||||
|
|
Loading…
Reference in New Issue