fix: invalid checkbox markup again :(

oikeuttaelaimille · Nov 30, 2019 · ddec943 · ddec943
1 parent 43455cd
commit ddec943
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/__tests__/__snapshots__/form-elements.test.jsx.snap b/src/__tests__/__snapshots__/form-elements.test.jsx.snap
@@ -22,6 +22,7 @@ exports[`Webform checkboxes 1`] = `
       type="checkbox"
     />
     <label
+      className="form-check-label"
       htmlFor="form-tos"
     >
       Agree terms of service

diff --git a/src/components/WebformCheckbox.tsx b/src/components/WebformCheckbox.tsx
@@ -22,7 +22,13 @@ export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
 	settings.attributes.title_display = 'after'
 
 	return (
-		<WebformElementWrapper className="form-group form-check" settings={settings} error={error} labelFor={id}>
+		<WebformElementWrapper
+			settings={settings}
+			error={error}
+			className="form-group 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
@@ -5,6 +5,7 @@ import { WebformSettings } from '../Webform'
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	settings: WebformSettings
 	labelFor?: string
+	labelClassName?: string
 	error?: string
 }
 
@@ -38,15 +39,15 @@ export function isElementHidden(states: WebformSettings['states']): boolean {
 	return states.hidden === true || states.visible === false
 }
 
-const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor, ...props }) => {
+const ElementWrapper: React.FC<Props> = ({ children, settings, error, labelFor, labelClassName, ...props }) => {
 	const { states, attributes } = settings
 
 	if (states && isElementHidden(states)) {
 		return <></>
 	}
 
 	const label = (
-		<label style={getTileStyle(attributes)} htmlFor={labelFor}>
+		<label style={getTileStyle(attributes)} className={labelClassName} htmlFor={labelFor}>
 			{attributes.title}
 		</label>
 	)