Add className to SpinnerElement.

src/bootstrap/Spinner.js

@@ -46,6 +46,8 @@ export function Spinner({
 SpinnerElement.propTypes = {
     /** Spinner's size */
     small: PropTypes.bool,
+    /** Additional className */
+    className: PropTypes.string,
     /** Children components */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -53,13 +55,16 @@ SpinnerElement.propTypes = {
     ]),
 };
 
-export function SpinnerElement({ small, children }) {
+export function SpinnerElement({ small, className, children }) {
     return (
         <>
-            <div className={`spinner-border ${small ? "spinner-border-sm" : ""}`} role="status">
+            <div
+                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
+                role="status"
+            >
                 <span className="sr-only" />
             </div>
-            <div className="spinner-text">{children}</div>
+            {children && <div className="spinner-text">{children}</div>}
         </>
     );
 }

src/utils/__tests__/__snapshots__/conditionalHOCs.test.js.snap

@@ -26,16 +26,13 @@ exports[`conditional HOCs withSpinner should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;
@@ -46,16 +43,13 @@ exports[`conditional HOCs withSpinnerOnSending should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;