Merge branch 'fix-button-spinner' into 'dev'

Button: Fix loading state & button's layout

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

src/bootstrap/Button.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -31,24 +31,25 @@ export function Button({
     children,
     ...props
 }) {
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
         buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading ? (
-        <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-        />
-    ) : null;
-
     return (
-        <button type="button" className={buttonClass} {...props}>
+        <button
-            {span}
+            type="button"
-            {span ? " " : null}
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
-            {children}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm mr-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </button>
     );
 }

src/bootstrap/Spinner.css

@@ -31,3 +31,7 @@
 .spinner-fs-wrapper .spinner-text {
     margin: 1rem;
 }
+
+.spinner-border-sm {
+    min-width: 16px;
+}

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

@@ -2,33 +2,38 @@
 
 exports[`<Button /> Render button correctly 1`] = `
 <button
-  class="btn btn-primary "
+  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
   type="button"
 >
-  Test Button
+  <span>
+    Test Button
+  </span>
 </button>
 `;
 
 exports[`<Button /> Render button with custom classes 1`] = `
 <button
-  class="btn one two three"
+  class="btn one two three d-inline-flex justify-content-center align-items-center"
   type="button"
 >
-  Test Button
+  <span>
+    Test Button
+  </span>
 </button>
 `;
 
 exports[`<Button /> Render button with spinner 1`] = `
 <button
-  class="btn btn-primary "
+  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
   type="button"
 >
   <span
     aria-hidden="true"
-    class="spinner-border spinner-border-sm"
+    class="spinner-border spinner-border-sm mr-1"
     role="status"
   />
-   
+  <span>
-  Test Button
+    Test Button
+  </span>
 </button>
 `;

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -301,10 +301,12 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
         class="text-right"
       >
         <button
-          class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+          class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
           type="submit"
         >
-          Save
+          <span>
+            Save
+          </span>
         </button>
       </div>
     </form>
@@ -322,10 +324,12 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
       class="text-right"
     >
       <button
-        class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
+        class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
         type="button"
       >
-        Reset Wi-Fi Settings
+        <span>
+          Reset Wi-Fi Settings
+        </span>
       </button>
     </div>
   </div>
@@ -435,13 +439,13 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
           class=\\"text-right\\"
         >
           <button
-            class=\\"btn btn-primary  col-sm-12 col-md-3 col-lg-2\\"
+            class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
 +           disabled=\\"\\"
             type=\\"submit\\"
           >
-            Save
+            <span>
-          </button>
+              Save
-        </div>"
+            </span>"
 `;
 
 exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -46,16 +46,20 @@ exports[`<RebootButton/> Render modal. 1`] = `
             class="modal-footer"
           >
             <button
-              class="btn btn-primary "
+              class="btn btn-primary d-inline-flex justify-content-center align-items-center"
               type="button"
             >
-              Cancel
+              <span>
+                Cancel
+              </span>
             </button>
             <button
-              class="btn btn-danger"
+              class="btn btn-danger d-inline-flex justify-content-center align-items-center"
               type="button"
             >
-              Confirm reboot
+              <span>
+                Confirm reboot
+              </span>
             </button>
           </div>
         </div>
@@ -63,10 +67,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
     </div>
   </div>
   <button
-    class="btn btn-danger"
+    class="btn btn-danger d-inline-flex justify-content-center align-items-center"
     type="button"
   >
-    Reboot
+    <span>
+      Reboot
+    </span>
   </button>
 </div>
 `;
@@ -77,10 +83,12 @@ exports[`<RebootButton/> Render. 1`] = `
     id="modal-container"
   />
   <button
-    class="btn btn-danger"
+    class="btn btn-danger d-inline-flex justify-content-center align-items-center"
     type="button"
   >
-    Reboot
+    <span>
+      Reboot
+    </span>
   </button>
 </div>
 `;

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -3,17 +3,18 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
-     
+    <span>
-    Load settings
+      Load settings
+    </span>
   </button>
 </div>
 `;
@@ -21,10 +22,12 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     type="submit"
   >
-    Save
+    <span>
+      Save
+    </span>
   </button>
 </div>
 `;
@@ -32,17 +35,18 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
-     
+    <span>
-    Updating
+      Updating
+    </span>
   </button>
 </div>
 `;