feat: add is-invalid class to WebformElementWrapper has error

oikeuttaelaimille · Nov 30, 2019 · ef33a36 · ef33a36
1 parent 6aad5b4
commit ef33a36
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/components/WebformCheckbox.tsx b/src/components/WebformCheckbox.tsx
@@ -22,13 +22,7 @@ export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
 	settings.attributes.title_display = 'after'
 
 	return (
-		<WebformElementWrapper
-			settings={settings}
-			error={error}
-			className="form-group form-check"
-			labelClassName="form-check-label"
-			labelFor={id}
-		>
+		<WebformElementWrapper settings={settings} error={error} className="form-check" labelClassName="form-check-label" labelFor={id}>
 			<input defaultChecked={!!defaultValue} {...inputProps} />
 		</WebformElementWrapper>
 	)

diff --git a/src/components/WebformElementWrapper.tsx b/src/components/WebformElementWrapper.tsx
@@ -52,8 +52,10 @@ const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor,
 		</label>
 	)
 
+	const classNames = ['form-group', error != null && 'is-invalid', props.className].filter(item => typeof item === 'string').join(' ')
+
 	return (
-		<div className="form-group" {...props}>
+		<div {...props} className={classNames}>
 			{getTitleDisplay(attributes) === 'before' && label}
 
 			{children}