LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: readd classname to formgroup (#1215)

Browse Source
This commit is contained in:
Matthew Russell 2022-08-31 16:13:17 -07:00 committed by GitHub
parent 64817aa43e
commit 8e70f5face
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
libs/ui-toolkit/src/components/form-group/form-group.tsx
View File

@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
export interface FormGroupProps { export interface FormGroupProps {
children: ReactNode; children: ReactNode;
className?: string;
label: string; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then add labelClassName="sr-only" label: string; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then add labelClassName="sr-only"
labelFor: string; // Same as above labelFor: string; // Same as above
hideLabel?: boolean; hideLabel?: boolean;
@ -11,17 +12,19 @@ export interface FormGroupProps {
export const FormGroup = ({ export const FormGroup = ({
children, children,
className,
label, label,
labelFor, labelFor,
labelAlign = 'left', labelAlign = 'left',
hideLabel = false, hideLabel = false,
}: FormGroupProps) => { }: FormGroupProps) => {
const wrapperClasses = classNames('relative mb-6', className);
const labelClasses = classNames('block mb-2 text-sm', { const labelClasses = classNames('block mb-2 text-sm', {
'text-right': labelAlign === 'right', 'text-right': labelAlign === 'right',
'sr-only': hideLabel, 'sr-only': hideLabel,
}); });
return ( return (
<div data-testid="form-group" className="relative mb-6"> <div data-testid="form-group" className={wrapperClasses}>
{label && ( {label && (
<label htmlFor={labelFor} className={labelClasses}> <label htmlFor={labelFor} className={labelClasses}>
{label} {label}