Radio checkbox whitespace

src/bootstrap/CheckBox.js

@@ -32,8 +32,8 @@ export function CheckBox({
 }) {
     const uid = useUID();
     return (
-        <div className={useDefaultSize ? formFieldsSize : ""} style={{ marginBottom: "1rem" }}>
-            <div className="custom-control custom-checkbox" style={{ marginBottom: "0" }}>
+        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
+            <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"
                     type="checkbox"
@@ -42,9 +42,9 @@ export function CheckBox({
 
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={uid} style={helpText ? { marginBottom: "0" } : null}>{label}</label>
+                <label className="custom-control-label" htmlFor={uid}>{label}</label>
+                {helpText && <small className="form-text text-muted">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </div>
     );
 }

src/bootstrap/RadioSet.js

@@ -52,16 +52,10 @@ export function RadioSet({
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`} style={{ marginBottom: "1rem" }}>
-            {label
-                ? (
-                    <label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
-                        {label}
-                    </label>
-                )
-                : null}
+        <div className={`form-group ${formFieldsSize}`}>
+            {label && <label htmlFor={uid} className="d-block">{label}</label>}
             {radios}
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText && <small className="form-text text-muted">{helpText}</small>}
         </div>
     );
 }
@@ -77,7 +71,7 @@ function Radio({
 }) {
     return (
         <>
-            <div className="custom-control custom-radio custom-control-inline">
+            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
                 <input
                     id={id}
                     className="custom-control-input"
@@ -86,8 +80,8 @@ function Radio({
                     {...props}
                 />
                 <label className="custom-control-label" htmlFor={id}>{label}</label>
+                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </>
     );
 }

src/bootstrap/RadioSet.md

@@ -2,6 +2,8 @@ Set of radio Bootstrap component input with label and predefined sizes and struc
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
+Unless `helpText` is set for one of the options they are displayed inline.
+
 ```js
 import {useState} from 'react';
 const CHOICES=[

src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap

@@ -2,12 +2,10 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <div
-    class="custom-control custom-checkbox"
-    style="margin-bottom: 0px;"
+    class="custom-control custom-checkbox "
   >
     <input
       checked=""
@@ -18,27 +16,24 @@ exports[`<Checkbox/> Render checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <small
+      class="form-text text-muted"
+    >
+      Some help text
+    </small>
   </div>
-  <small
-    class="form-text text-muted"
-  >
-    Some help text
-  </small>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <div
-    class="custom-control custom-checkbox"
-    style="margin-bottom: 0px;"
+    class="custom-control custom-checkbox "
   >
     <input
       class="custom-control-input"
@@ -48,15 +43,14 @@ exports[`<Checkbox/> Render uncheked checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <small
+      class="form-text text-muted"
+    >
+      Some help text
+    </small>
   </div>
-  <small
-    class="form-text text-muted"
-  >
-    Some help text
-  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap

@@ -3,12 +3,10 @@
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
   class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <label
-    class="col-12"
+    class="d-block"
     for="1"
-    style="padding-left: 0px;"
   >
     Radios set label
   </label>