From 6a03eaeb27ea9a73401c99a4176680c866a93745 Mon Sep 17 00:00:00 2001
From: Mungo Dewar <mungodewar@skyscanner.net>
Date: Tue, 12 Mar 2024 10:56:18 +0000
Subject: [PATCH 1/2] add refactor bpk-component-loading-button styles

---
 .../src/BpkLoadingButton.js                   |  7 +---
 .../src/BpkLoadingButton.module.scss          | 41 ++++---------------
 2 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.js b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
index 91edae0115..66ec572a31 100644
--- a/packages/bpk-component-loading-button/src/BpkLoadingButton.js
+++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
@@ -121,10 +121,6 @@ const BpkLoadingButton = (props: LoadingProps) => {
   const iconClassNames = getClassName(
     'bpk-loading-button__icon',
     large && 'bpk-loading-button__icon--large',
-    iconOnly &&
-      (large
-        ? 'bpk-loading-button__icon--large-icon-only'
-        : 'bpk-loading-button__icon--icon-only'),
     (link || linkOnDark) && 'bpk-loading-button__icon--link',
   );
 
@@ -134,15 +130,16 @@ const BpkLoadingButton = (props: LoadingProps) => {
       iconOnly={iconOnly}
       disabled={showBtnDisabled}
       large={large}
-      className={classNames}
       link={link}
       linkOnDark={linkOnDark}
       {...rest}
     >
       {loading && <span className={iconClassNames}>{loadingIcon}</span>}
+      <span className={loading && STYLES["content-invisible"]}>
       {child0}
       {child1}
       {child2}
+      </span>
     </BpkButton>
   );
 };
diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss
index de2e63d9e4..ae09a0ac1e 100644
--- a/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss
+++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.module.scss
@@ -17,46 +17,15 @@
  */
 
 @use '../../unstable__bpk-mixins/tokens';
+@use '../../unstable__bpk-mixins/utils';
 
 .bpk-loading-button {
-  $button-padding-x: tokens.bpk-spacing-base() * 2;
-  $button-padding-y: tokens.bpk-spacing-lg() * 0.5;
-  $button-large-padding-y: tokens.bpk-spacing-lg();
-  $button-icon-only-padding-x: tokens.$bpk-button-height -
-    tokens.$bpk-icon-size-sm; // this is in order to ensure icons are centred in icon-only buttons
-  /* stylelint-disable-next-line scss/operator-no-newline-after */
-  $button-large-icon-only-padding-x: tokens.$bpk-button-large-height -
-    tokens.$bpk-icon-size-lg; // this is in order to ensure icons are centred in icon-only buttons
-
-  position: relative;
-  overflow: hidden;
-
-  &--link {
-    visibility: hidden;
-  }
 
   &__icon {
-    position: absolute;
-    display: inline-flex;
+    display: flex;
     visibility: visible;
-    z-index: 1;
-    width: calc(100% - #{$button-padding-x});
-    height: calc(100% - #{$button-padding-y});
     justify-content: center;
     align-items: center;
-    background-color: inherit;
-
-    &--large {
-      height: calc(100% - #{$button-large-padding-y});
-    }
-
-    &--icon-only {
-      width: calc(100% - #{$button-icon-only-padding-x});
-    }
-
-    &--large-icon-only {
-      width: calc(100% - #{$button-large-icon-only-padding-x});
-    }
 
     &--link {
       width: 100%;
@@ -64,3 +33,9 @@
     }
   }
 }
+
+.content-invisible {
+  @include utils.bpk-invisible();
+  height: 0px;
+  display: block;
+}

From a1b60e03aad5a2969d613d39527453cea1ab3efc Mon Sep 17 00:00:00 2001
From: Mungo Dewar <mungodewar@skyscanner.net>
Date: Tue, 12 Mar 2024 11:06:52 +0000
Subject: [PATCH 2/2] more removal

---
 packages/bpk-component-loading-button/src/BpkLoadingButton.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.js b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
index 66ec572a31..fc269bb008 100644
--- a/packages/bpk-component-loading-button/src/BpkLoadingButton.js
+++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
@@ -113,20 +113,18 @@ const BpkLoadingButton = (props: LoadingProps) => {
   const loadingIcon = getLoadingIcon(props);
 
   const classNames = getClassName(
-    loading && 'bpk-loading-button',
-    loading && (link || linkOnDark) && 'bpk-loading-button--link',
     className,
   );
 
   const iconClassNames = getClassName(
     'bpk-loading-button__icon',
-    large && 'bpk-loading-button__icon--large',
     (link || linkOnDark) && 'bpk-loading-button__icon--link',
   );
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
     <BpkButton
+      className={classNames}
       iconOnly={iconOnly}
       disabled={showBtnDisabled}
       large={large}