src/bootstrap/Button.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -31,25 +31,24 @@ 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`;
     }
 
-    return (
+    const span = loading ? (
-        <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"
+            className="spinner-border spinner-border-sm"
             role="status"
             aria-hidden="true"
         />
-            )}
+    ) : null;
-            <span>{children}</span>
+
+    return (
+        <button type="button" className={buttonClass} {...props}>
+            {span}
+            {span ? " " : null}
+            {children}
         </button>
     );
 }

src/bootstrap/Spinner.css

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

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

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

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

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

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

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

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

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