From 56a4c4794872bc084adc1019e16951e4b0ed792e Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Tue, 7 Jan 2020 13:27:49 +0100
Subject: [PATCH] Form widgets size

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/bootstrap/Button.js                       | 13 +++++------
 src/bootstrap/CheckBox.js                     |  9 ++------
 src/bootstrap/Input.js                        |  4 +---
 src/bootstrap/RadioSet.js                     |  4 +---
 src/bootstrap/Select.js                       |  2 +-
 .../__snapshots__/CheckBox.test.js.snap       |  4 ++--
 .../__snapshots__/NumberInput.test.js.snap    |  2 +-
 .../__snapshots__/PasswordInput.test.js.snap  |  2 +-
 .../__snapshots__/RadioSet.test.js.snap       |  2 +-
 .../__snapshots__/Select.test.js.snap         |  2 +-
 .../__snapshots__/TextInput.test.js.snap      |  2 +-
 src/bootstrap/constants.js                    |  2 +-
 .../__snapshots__/SubmitButton.test.js.snap   |  6 ++---
 src/form/__tests__/hooks.test.js              |  2 +-
 src/form/components/ForisForm.js              | 22 +++++++++++--------
 17 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0d02039..67f423e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index aa33863..9cd078b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
diff --git a/src/bootstrap/Button.js b/src/bootstrap/Button.js
index 887e05e..afa5e84 100644
--- a/src/bootstrap/Button.js
+++ b/src/bootstrap/Button.js
@@ -8,11 +8,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const OFFSET = 8;
-const SIZE = 3;
-const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
-const SIZE_CLASS_SM = " col-sm-12";
-
 Button.propTypes = {
     /** Additional class name. */
     className: PropTypes.string,
@@ -32,14 +27,16 @@ Button.propTypes = {
 export function Button({
     className, loading, forisFormSize, children, ...props
 }) {
-    className = className ? `btn ${className}` : "btn btn-primary ";
-    if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    if (forisFormSize) {
+        buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
+    }
 
     const span = loading
         ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
 
     return (
-        <button type="button" className={className} {...props}>
+        <button type="button" className={buttonClass} {...props}>
             {span}
             {" "}
             {span ? " " : null}
diff --git a/src/bootstrap/CheckBox.js b/src/bootstrap/CheckBox.js
index 5983da1..d6dbce8 100644
--- a/src/bootstrap/CheckBox.js
+++ b/src/bootstrap/CheckBox.js
@@ -9,30 +9,25 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 CheckBox.propTypes = {
     /** Label message */
     label: PropTypes.string.isRequired,
     /** Help text message */
     helpText: PropTypes.string,
-    /** Apply default size (full-width) */
-    useDefaultSize: PropTypes.bool,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
 };
 
 CheckBox.defaultProps = {
-    useDefaultSize: true,
     disabled: false,
 };
 
 export function CheckBox({
-    label, helpText, useDefaultSize, disabled, ...props
+    label, helpText, disabled, ...props
 }) {
     const uid = useUID();
     return (
-        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
+        <div className="form-group">
             <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"
diff --git a/src/bootstrap/Input.js b/src/bootstrap/Input.js
index d5715ba..ea9c301 100644
--- a/src/bootstrap/Input.js
+++ b/src/bootstrap/Input.js
@@ -9,8 +9,6 @@ import React from "react";
 import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
-import { formFieldsSize } from "./constants";
-
 Input.propTypes = {
     type: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -32,7 +30,7 @@ export function Input({
     const uid = useUID();
     const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
     return (
-        <div className={`form-group ${formFieldsSize}`}>
+        <div className="form-group">
             <label className={labelClassName} htmlFor={uid}>{label}</label>
             <div className={`input-group ${groupClassName || ""}`.trim()}>
                 <input
diff --git a/src/bootstrap/RadioSet.js b/src/bootstrap/RadioSet.js
index 41f85de..f0e9b5f 100644
--- a/src/bootstrap/RadioSet.js
+++ b/src/bootstrap/RadioSet.js
@@ -9,8 +9,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 RadioSet.propTypes = {
     /** Name attribute of the input HTML tag. */
     name: PropTypes.string.isRequired,
@@ -51,7 +49,7 @@ export function RadioSet({
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`}>
+        <div className="form-group">
             {label && <label htmlFor={uid} className="d-block">{label}</label>}
             {radios}
             {helpText && <small className="form-text text-muted">{helpText}</small>}
diff --git a/src/bootstrap/Select.js b/src/bootstrap/Select.js
index 0d90752..002f7de 100644
--- a/src/bootstrap/Select.js
+++ b/src/bootstrap/Select.js
@@ -33,7 +33,7 @@ export function Select({
     );
 
     return (
-        <div className="form-group col-sm-12 offset-lg-1 col-lg-10">
+        <div className="form-group">
             <label htmlFor={uid}>{label}</label>
             <select
                 className="custom-select"
diff --git a/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap b/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
index ac39900..89be1f4 100644
--- a/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "
@@ -30,7 +30,7 @@ exports[`<Checkbox/> Render checkbox 1`] = `
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "
diff --git a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
index 9729a53..2ac7802 100644
--- a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"
diff --git a/src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap b/src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap
index 3e1f0b7..5022b37 100644
--- a/src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"
diff --git a/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap b/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
index ffec0b5..7539dd2 100644
--- a/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     class="d-block"
diff --git a/src/bootstrap/__tests__/__snapshots__/Select.test.js.snap b/src/bootstrap/__tests__/__snapshots__/Select.test.js.snap
index 5f39373..d907571 100644
--- a/src/bootstrap/__tests__/__snapshots__/Select.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/Select.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="form-group col-sm-12 offset-lg-1 col-lg-10"
+    class="form-group"
   >
     <label
       for="1"
diff --git a/src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap b/src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap
index e77509f..3dd5c56 100644
--- a/src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"
diff --git a/src/bootstrap/constants.js b/src/bootstrap/constants.js
index 1a7d8ce..209eb09 100644
--- a/src/bootstrap/constants.js
+++ b/src/bootstrap/constants.js
@@ -7,4 +7,4 @@
 
 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10";
+export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";
diff --git a/src/form/__tests__/__snapshots__/SubmitButton.test.js.snap b/src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
index e3fb21d..548b66e 100644
--- a/src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
+++ b/src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     disabled=""
     type="submit"
   >
@@ -23,7 +23,7 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     type="submit"
   >
      
@@ -36,7 +36,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     disabled=""
     type="submit"
   >
diff --git a/src/form/__tests__/hooks.test.js b/src/form/__tests__/hooks.test.js
index 52516ac..0c535a6 100644
--- a/src/form/__tests__/hooks.test.js
+++ b/src/form/__tests__/hooks.test.js
@@ -59,7 +59,7 @@ describe('useForm hook.', () => {
         input = await waitForElement(() =>
             getByTestId('test-input')
         );
-        form = container.firstChild
+        form = container.firstChild.firstChild;
     });
 
     it('Validation on changing.', () => {
diff --git a/src/form/components/ForisForm.js b/src/form/components/ForisForm.js
index 77e4055..c09edc5 100644
--- a/src/form/components/ForisForm.js
+++ b/src/form/components/ForisForm.js
@@ -9,12 +9,14 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { Prompt } from "react-router";
 
-import { useAPIPost } from "../../api/hooks";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { API_STATE } from "../../api/utils";
 import { ErrorMessage } from "../../utils/ErrorMessage";
-import { useAlert } from "../../alertContext/AlertContext";
+import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
-import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { useAlert } from "../../alertContext/AlertContext";
+import { useAPIPost } from "../../api/hooks";
+
 import { useForisModule, useForm } from "../hooks";
 import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
 
@@ -153,15 +155,17 @@ export function ForisForm({
     }
 
     return (
-        <>
+        <div className={formFieldsSize}>
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit}>
                 {childrenWithFormProps}
-                <SubmitButton
-                    state={getSubmitButtonState()}
-                    disabled={submitButtonIsDisabled}
-                />
+                <div className="text-right">
+                    <SubmitButton
+                        state={getSubmitButtonState()}
+                        disabled={submitButtonIsDisabled}
+                    />
+                </div>
             </form>
-        </>
+        </div>
     );
 }