Merge branch 'radio-checkbox-whitespace' into 'dev'

Radio checkbox whitespace

See merge request turris/reforis/foris-js!25

[skip ci]

Makefile

@@ -35,6 +35,8 @@ lint:
 
 test:
 	npm test
+test-js-update-snapshots:
+	npm test -- -u
 
 create-messages:
 	pybabel extract -F babel.cfg -o ./translations/forisjs.pot .

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
@@ -73,7 +73,6 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --colors",
-    "test:update-snapshots": "jest -u",
     "docs": "npx styleguidist build ",
     "docs:watch": "styleguidist server"
   },

src/bootstrap/CheckBox.js

@@ -32,8 +32,8 @@ export function CheckBox({
 }) {
     const uid = useUID();
     return (
-        <div className={useDefaultSize ? formFieldsSize : ""} style={{ marginBottom: "1rem" }}>
+        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
-            <div className="custom-control custom-checkbox" style={{ marginBottom: "0" }}>
+            <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" }}>
+        <div className={`form-group ${formFieldsSize}`}>
-            {label
+            {label && <label htmlFor={uid} className="d-block">{label}</label>}
-                ? (
-                    <label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
-                        {label}
-                    </label>
-                )
-                : null}
             {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"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <div
     class="custom-control custom-checkbox "
-    style="margin-bottom: 0px;"
   >
     <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>
-  </div>
     <small
       class="form-text text-muted"
     >
       Some help text
     </small>
   </div>
+</div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <div
     class="custom-control custom-checkbox "
-    style="margin-bottom: 0px;"
   >
     <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>
-  </div>
     <small
       class="form-text text-muted"
     >
       Some help text
     </small>
   </div>
+</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>