jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-05 00:00:18 -04:00
Code Issues Projects Releases Wiki Activity

fix(tools): sort small issues in formControl (#49872)

Browse Source
This commit is contained in:
Muhammed Mustafa
2023-04-18 16:31:36 +02:00
committed by GitHub
parent 0dd8282cf8
commit 27c75679cd
2 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
tools/ui-components/src/form-control/form-control.tsx
View File

@@ -1,12 +1,18 @@
import React, { useContext } from 'react';
import { FormContext } from '../form-group/form-group';
import { FormControlFeedback as Feedback } from './form-control-feedback';
import { FormControlStatic as Static } from './form-control-static';
import { FormControlFeedback } from './form-control-feedback';
import { FormControlStatic } from './form-control-static';
import { FormControlProps } from './types';
// Uses controlId from <FormGroup> if not explicitly specified.
// type Only relevant if componentClass is 'input'.
let variantClass: string;
const defaultClasses =
'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
'bg-background-primary bg-none rounded-none border-1 border-solid ' +
'border-background-quaternary shadow-none ' +
'transition ease-in-out duration-150 focus:border-foreground-tertiary';
const FormControl = ({
id,
@@ -23,13 +29,7 @@ const FormControl = ({
}: FormControlProps): JSX.Element => {
const { controlId } = useContext(FormContext);
const defaultClasses =
'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
'bg-background-primary bg-none rounded-none border-1 border-solid ' +
'border-background-quaternary shadow-none ' +
'transition ease-in-out duration-150 focus:border-foreground-tertiary';
const Component = componentClass || 'input';
let variantClass;
if (Component !== 'textarea') variantClass = ' h-8';
//row and componentClass
@@ -51,6 +51,7 @@ const FormControl = ({
);
};
const MainFormControl = Object.assign(FormControl, { Feedback, Static });
FormControl.Feedback = FormControlFeedback;
FormControl.Static = FormControlStatic;
export { MainFormControl as FormControl };
export { FormControl };

17
tools/ui-components/src/form-control/types.ts
View File

@@ -9,31 +9,26 @@ type ChangibleValues =
readonly?: never;
}
| {
value: string;
value?: string;
onChange?: never;
readonly: boolean;
}
| {
value: string;
value?: string;
onChange: (event: React.ChangeEvent<FormControlElement>) => void;
readonly?: never;
};
export type FormControlProps = React.HTMLAttributes<FormControlElement> & {
id?: string;
className?: string;
testId?: string;
componentClass?: 'textarea' | 'input';
placeholder?: string;
name?: string;
required?: boolean;
rows?: number;
type?: 'text' | 'email' | 'url';
} & ChangibleValues;
export interface FormControlVariationProps {
className?: string;
children?: React.ReactNode;
id?: string;
testId?: string;
}
export type FormControlVariationProps = Pick<
FormControlProps,
'className' | 'children' | 'id' | 'testId'
>;