[BpkSwapButton] LUNA-1234: iOS BpkSwapButton fix (#3232)

Skyscanner · Feb 13, 2024 · 6a86cbd · 6a86cbd
1 parent f421de9
commit 6a86cbd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/examples/bpk-component-swap-button/examples.js b/examples/bpk-component-swap-button/examples.js
@@ -18,24 +18,29 @@
 /* @flow strict */
 
 import BpkSwapButton, { SWAPBUTTON_STYLES } from '../../packages/bpk-component-swap-button';
-import { action, BpkDarkExampleWrapper} from '../bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
-const DefaultExample = () => (
+const wrapperStyles = {
+  height: '100px',
+  width: '100px',
+  padding: '2rem'
+}
 
-  <div style={{ marginTop:'25px', marginLeft:'25px' }}>
+const DefaultExample = () => (
+  <div style={wrapperStyles}>
   <BpkSwapButton ariaLabel='Swap origin and destination' onClick={action('Button clicked')}/>
   </div>
 );
 
 const CanvasDefaultExample = () => (
 
-  <BpkDarkExampleWrapper padded style={{padding:'2rem'}} >
+  <BpkDarkExampleWrapper padded style={wrapperStyles} >
   <BpkSwapButton ariaLabel='Swap origin and destination' swapButtonStyle={SWAPBUTTON_STYLES.canvasDefault} onClick={action('Button clicked')}/>
   </BpkDarkExampleWrapper>
 );
 const CanvasContrastExample = () => (
   <div>
-  <BpkDarkExampleWrapper padded style={{padding:'2rem'}}>
+  <BpkDarkExampleWrapper padded style={wrapperStyles}>
     <BpkSwapButton ariaLabel='Swap origin and destination' swapButtonStyle={SWAPBUTTON_STYLES.canvasContrast} onClick={action('Button clicked')}/>
   </BpkDarkExampleWrapper>
   </div>

diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.module.css b/packages/bpk-component-swap-button/src/BpkSwapButton.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-swap-button{width:2.5rem;height:2.5rem;transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:100%;height:100%;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}.bpk-swap-button__icon{max-width:1rem;max-height:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-swap-button{transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}
diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss b/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss
@@ -19,8 +19,6 @@
 @import '../../bpk-mixins/index.scss';
 
 .bpk-swap-button {
-  width: bpk-spacing-xxl();
-  height: bpk-spacing-xxl();
   transform: translateY(-50%) rotate(90deg);
 
   @include bpk-breakpoint-small-tablet {
@@ -35,8 +33,8 @@
 
   &__button {
     display: flex;
-    width: 100%;
-    height: 100%;
+    width: bpk-spacing-xxl();
+    height: bpk-spacing-xxl();
     justify-content: center;
     align-items: center;
     transition: transform $bpk-duration-base;
@@ -52,6 +50,11 @@
       background-color: $bpk-surface-highlight-day;
     }
 
+    span {
+      display: inline-flex;
+      line-height: $bpk-line-height-xs;
+    }
+
     &--canvas-default {
       border: $bpk-border-size-xl solid $bpk-canvas-day;
       background-color: $bpk-canvas-contrast-day;
@@ -61,9 +64,4 @@
       border: $bpk-border-size-xl solid $bpk-canvas-contrast-day;
     }
   }
-
-  &__icon {
-    max-width: bpk-spacing-base();
-    max-height: bpk-spacing-base();
-  }
 }
diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx
@@ -63,10 +63,11 @@ const BpkSwapButton = ( props: Props ) => {
           handleRotation();
         }}
       >
-        <SwapVertical className={getClassName('bpk-swap-button__icon')} />
+        <span>
+          <SwapVertical />
+        </span>
       </button>
     </div>
   );
 };
 export default BpkSwapButton;
-
diff --git a/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap b/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap
@@ -11,17 +11,18 @@ exports[`BpkSwapButton should render correctly 1`] = `
       style="transform: rotate(0deg);"
       type="button"
     >
-      <svg
-        aria-hidden="true"
-        class="bpk-swap-button__icon"
-        style="width: 1rem; height: 1rem;"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M.44 8.56a1.5 1.5 0 010-2.12l4.5-4.5a1.5 1.5 0 012.12 0l4.5 4.5a1.5 1.5 0 01-2.12 2.12L7.5 6.622V19.5a1.5 1.5 0 01-3 0V6.621l-1.94 1.94a1.5 1.5 0 01-2.12 0zm12 6.88a1.5 1.5 0 000 2.12l4.5 4.5a1.5 1.5 0 002.12 0l4.5-4.5a1.5 1.5 0 00-2.12-2.12l-1.94 1.939V4.5a1.5 1.5 0 00-3 0v12.879l-1.94-1.94a1.5 1.5 0 00-2.12 0z"
-        />
-      </svg>
+      <span>
+        <svg
+          aria-hidden="true"
+          style="width: 1rem; height: 1rem;"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M.44 8.56a1.5 1.5 0 010-2.12l4.5-4.5a1.5 1.5 0 012.12 0l4.5 4.5a1.5 1.5 0 01-2.12 2.12L7.5 6.622V19.5a1.5 1.5 0 01-3 0V6.621l-1.94 1.94a1.5 1.5 0 01-2.12 0zm12 6.88a1.5 1.5 0 000 2.12l4.5 4.5a1.5 1.5 0 002.12 0l4.5-4.5a1.5 1.5 0 00-2.12-2.12l-1.94 1.939V4.5a1.5 1.5 0 00-3 0v12.879l-1.94-1.94a1.5 1.5 0 00-2.12 0z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </DocumentFragment>