@skyscanner/backpack-web 17.0.2 → 17.1.0

package/bpk-component-pagination/src/BpkPaginationList.module.scss

@@ -23,7 +23,7 @@ $bpk-spacing-v2: true;
 .bpk-pagination-page-list {
   display: flex;
   margin: 0;
-  padding: 0;
+  padding: 0 bpk-spacing-md();
   align-items: baseline;
   list-style: none;
 

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -20,17 +20,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
-import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
+import BpkButton from '../../bpk-component-button';
+import { withRtlSupport } from '../../bpk-component-icon';
+import ArrowLeftIcon from '../../bpk-component-icon/sm/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/sm/arrow-right';
 
 import STYLES from './BpkPaginationNudger.module.scss';
 
 const getClassName = cssModules(STYLES);
-const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
-const AlignedArrowRightIcon = withButtonAlignment(
-  withRtlSupport(ArrowRightIcon),
-);
+const AlignedArrowLeftIcon = withRtlSupport(ArrowLeftIcon);
+const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon);
 
 const nudgerIcon = (forward) =>
   forward ? (
@@ -47,19 +46,17 @@ const BpkPaginationNudger = (props) => {
   const { disabled, forward, label, onNudge } = props;
 
   return (
-    <div className={getClassName('bpk-pagination-nudger')}>
-      <button
-        type="button"
-        className={getClassName('bpk-pagination-nudger__button')}
-        onClick={onNudge}
-        disabled={disabled}
-      >
-        {nudgerIcon(forward)}
-        <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
-          {label}
-        </span>
-      </button>
-    </div>
+    <BpkButton
+      link
+      onClick={onNudge}
+      disabled={disabled}
+      className={getClassName('bpk-pagination-nudger')}
+    >
+      {nudgerIcon(forward)}
+      <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
+        {label}
+      </span>
+    </BpkButton>
   );
 };
 

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -21,32 +21,10 @@
 $bpk-spacing-v2: true;
 
 .bpk-pagination-nudger {
-  text-align: center;
-  vertical-align: middle;
-
-  &__button {
-    height: $bpk-button-height;
-    border: none;
-    background: none;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-button--link;
-
-    // Using stylelint-disable as we need to override padding provided by bpk-button--link otherwise it shifts the arrow buttons out of alignment.
-    /* stylelint-disable-next-line order/properties-order, order/order */
-    padding: 0;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    .bpk-pagination-nudger__icon {
-      fill: currentcolor;
-
-      @include bpk-icon--rtl-support;
-    }
-  }
+  display: flex;
+  width: bpk-spacing-xl() + bpk-spacing-sm();
+  height: bpk-spacing-xl() + bpk-spacing-sm();
+  padding: $bpk-one-pixel-rem * 10;
 
   &__text {
     &--hidden {

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -23,18 +23,37 @@ $bpk-spacing-v2: true;
 .bpk-pagination-page {
   min-width: $bpk-button-height;
   height: $bpk-button-height;
-  padding: 0;
-  border-radius: 50%;
-  color: $bpk-text-link-day;
+  padding: 0 $bpk-one-pixel-rem * 16;
+  border-radius: $bpk-border-radius-xs * 2;
+  color: $bpk-text-primary-day;
 
-  @include bpk-border-lg(
+  @include bpk-border-sm(
     var(--bpk-pagination-selected-background-color, $bpk-line-day)
   );
   @include bpk-label-1;
+
+  @include bpk-hover {
+    background-color: transparent;
+
+    @include bpk-border-sm($bpk-core-primary-day);
+  }
+
+  &:active {
+    background-color: transparent;
+
+    @include bpk-border-sm($bpk-core-primary-day);
+  }
 }
 
 .bpk-pagination-page--selected {
   color: $bpk-text-primary-inverse-day;
   box-shadow: $bpk-button-selected-box-shadow;
-  cursor: auto;
+
+  @include bpk-hover {
+    color: $bpk-text-primary-day;
+  }
+
+  &:active {
+    color: $bpk-text-primary-day;
+  }
 }

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -137,7 +137,7 @@ $dark-background-color: $bpk-surface-contrast-day;
     @include bpk-layer;
 
     &--padded {
-      padding: bpk-spacing-sm() bpk-spacing-md();
+      padding: bpk-spacing-md() bpk-spacing-base();
     }
 
     &--dark {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "17.0.2",
+  "version": "17.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",