From d49ff0150cbf90b86d55559eff32cfdf9f4400c2 Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Wed, 18 Jan 2023 14:04:28 +0100
Subject: [PATCH] Button: Fix loading state & button's layout

---
 src/bootstrap/Button.js   | 29 +++++++++++++++--------------
 src/bootstrap/Spinner.css |  4 ++++
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/bootstrap/Button.js b/src/bootstrap/Button.js
index 84ad558..84895f5 100644
--- a/src/bootstrap/Button.js
+++ b/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}>
-            {span}
-            {span ? " " : null}
-            {children}
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm mr-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </button>
     );
 }
diff --git a/src/bootstrap/Spinner.css b/src/bootstrap/Spinner.css
index 59fece3..2e68e26 100644
--- a/src/bootstrap/Spinner.css
+++ b/src/bootstrap/Spinner.css
@@ -31,3 +31,7 @@
 .spinner-fs-wrapper .spinner-text {
     margin: 1rem;
 }
+
+.spinner-border-sm {
+    min-width: 16px;
+}