Merged in fix/SW-2790-room-picker-buttons (pull request #2667)

fix(SW-2790): update ui room picker buttons * fix(SW-2790): update ui room picker buttons * fix(SW-2790 Approved-by: Matilda Landström
2025-08-20 06:38:18 +00:00
parent deaba8b5c4
commit aa7a7a8c2f
4 changed files with 47 additions and 47 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/counter.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/counter.module.css
@@ -3,6 +3,7 @@
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
+  color: var(--Text-Interactive-Default);
 }
 .counterBtn {
  width: 40px;
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/index.tsx
@@ -1,10 +1,10 @@
 "use client"

-import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"

 import styles from "./counter.module.css"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 type CounterProps = {
  count: number
@@ -23,33 +23,27 @@ export default function Counter({
 }: CounterProps) {
  return (
    <div className={styles.counterContainer}>
-      <Button
+      <IconButton
        className={styles.counterBtn}
-        intent="inverted"
        onClick={handleOnDecrease}
-        size="small"
-        theme="base"
-        variant="icon"
-        wrapping={true}
-        disabled={disableDecrease}
+        theme="Inverted"
+        style="Elevated"
+        isDisabled={disableDecrease}
      >
        <MaterialIcon icon="remove" color="CurrentColor" />
-      </Button>
-      <Body color="baseTextHighContrast" textAlign="center">
-        {count}
-      </Body>
-      <Button
+      </IconButton>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>{count}</p>
+      </Typography>
+      <IconButton
        className={styles.counterBtn}
        onClick={handleOnIncrease}
-        intent="inverted"
-        variant="icon"
-        theme="base"
-        wrapping={true}
-        size="small"
-        disabled={disableIncrease}
+        theme="Inverted"
+        style="Elevated"
+        isDisabled={disableIncrease}
      >
        <MaterialIcon icon="add" color="CurrentColor" />
-      </Button>
+      </IconButton>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
@@ -5,7 +5,6 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -16,6 +15,7 @@ import styles from "./guests-rooms-picker.module.css"

 import type { GuestsRoom as TGuestsRoom } from ".."
 import type { BookingWidgetSchema } from "../Client"
+import { Button } from "@scandic-hotels/design-system/Button"

 const MAX_ROOMS = 4

@@ -114,13 +114,13 @@ export default function GuestsRoomsPickerDialog({
          {addRoomDisabledTextForSpecialRate ? (
            <div className={styles.addRoomMobileContainer}>
              <Button
-                intent="text"
-                variant="icon"
+                variant="Text"
+                color="Primary"
                wrapping
-                theme="base"
-                fullWidth
                onPress={handleAddRoom}
-                disabled
+                isDisabled
+                size="Small"
+                typography="Body/Supporting text (caption)/smBold"
              >
                <MaterialIcon icon="add" color="CurrentColor" />
                {addRoomLabel}
@@ -147,12 +147,12 @@ export default function GuestsRoomsPickerDialog({
              <div className={styles.addRoomMobileContainer}>
                <Button
                  className={styles.addRoomBtn}
-                  intent="text"
-                  variant="icon"
+                  variant="Text"
                  wrapping
-                  theme="base"
-                  fullWidth
+                  color="Primary"
                  onPress={handleAddRoom}
+                  size="Small"
+                  typography="Body/Supporting text (caption)/smBold"
                >
                  <MaterialIcon icon="add" color="CurrentColor" />
                  {addRoomLabel}
@@ -171,12 +171,13 @@ export default function GuestsRoomsPickerDialog({
              arrow="left"
            >
              <Button
-                intent="text"
-                variant="icon"
+                variant="Text"
                wrapping
-                theme="base"
-                disabled
+                color="Primary"
+                isDisabled
+                size="Small"
                onPress={handleAddRoom}
+                typography="Body/Supporting text (caption)/smBold"
              >
                <MaterialIcon icon="add_circle" color="CurrentColor" />
                {addRoomLabel}
@@ -188,11 +189,12 @@ export default function GuestsRoomsPickerDialog({
            <div className={styles.hideOnMobile}>
              <Button
                className={styles.addRoomBtn}
-                intent="text"
-                variant="icon"
+                variant="Text"
                wrapping
-                theme="base"
+                color="Primary"
+                size="Small"
                onPress={handleAddRoom}
+                typography="Body/Supporting text (caption)/smBold"
              >
                <MaterialIcon icon="add_circle" color="CurrentColor" />
                {addRoomLabel}
@@ -202,21 +204,23 @@ export default function GuestsRoomsPickerDialog({
        )}
        <Button
          onPress={handleClose}
-          disabled={isInvalid}
+          isDisabled={isInvalid}
          className={styles.hideOnDesktop}
-          intent="tertiary"
-          theme="base"
-          size="large"
+          variant="Tertiary"
+          color="Primary"
+          size="Small"
+          typography="Body/Supporting text (caption)/smBold"
        >
          {doneLabel}
        </Button>
        <Button
          onPress={handleClose}
-          disabled={isInvalid}
+          isDisabled={isInvalid}
          className={styles.hideOnMobile}
-          intent="tertiary"
-          theme="base"
-          size="small"
+          variant="Tertiary"
+          color="Primary"
+          size="Small"
+          typography="Body/Supporting text (caption)/smBold"
        >
          {doneLabel}
        </Button>
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -236,7 +236,8 @@

  .footer button {
    margin-left: auto;
-    width: 125px;
+    width: auto;
+    min-width: 125px;
  }

  .footer .hideOnDesktop,