Merge branch 'form-widgets-size' into 'dev'

Form widgets size

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

package-lock.json

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

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": {

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 ";
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
-    if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
+    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}

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"

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

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>}

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"

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 "

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"

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"

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"

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"

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"

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";

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"
   >

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.', () => {

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}
+                <div className="text-right">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}
                     />
+                </div>
             </form>
-        </>
+        </div>
     );
 }