Merged in fix/book-149-datepicker-overflowing (pull request #3433)

Fix/optimizations and cleanup of booking widget

* fix(BOOK-149):fixed issue with datepicker overflowing on months spanning more weeks

* fix(BOOK-149): added smooth scroll to age selector to avoid clipping the selector

* cleanup in trigger and css

* update to new Button componenet to fix missing focus indicator

* included color token in triggerbutton class instead


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css

@@ -58,7 +58,7 @@
     box-shadow: var(--popup-box-shadow);
     padding: var(--Space-x2) var(--Space-x3);
     max-width: calc(100vw - 20px);
-    max-height: 440px;
+    min-height: 440px;
     top: calc(100% + 36px);
     left: auto;
     right: auto;

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -30,6 +31,7 @@ export default function ChildSelector({
     defaultMessage: "Children (0–12 years)",
   })
   const { setValue } = useFormContext()
+  const agePickerRef = useRef<HTMLDivElement | null>(null)
 
   function increaseChildrenCount(roomIndex: number) {
     if (currentChildren.length < 5) {
@@ -67,12 +69,19 @@ export default function ChildSelector({
             decreaseChildrenCount(roomIndex)
           }}
           handleOnIncrease={() => {
+            requestAnimationFrame(() => {
+              agePickerRef.current?.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              })
+            })
             increaseChildrenCount(roomIndex)
           }}
           disableDecrease={currentChildren.length == 0}
           disableIncrease={currentChildren.length == 5}
         />
       </section>
+      <span ref={agePickerRef} />
       {currentChildren.map((child, index) => (
         <ChildInfoSelector
           roomIndex={roomIndex}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -1,8 +1,8 @@
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
@@ -52,13 +52,12 @@ export function GuestsRoom({
         />
         {index !== 0 && (
           <Button
-            intent="text"
-            variant="icon"
-            wrapping
-            theme="secondaryLight"
+            variant="Text"
             onPress={() => onRemove(index)}
-            size="small"
+            size="sm"
+            color="Primary"
             className={styles.roomActionsButton}
+            wrapping
           >
             <MaterialIcon icon="delete" color="CurrentColor" />
             {intl.formatMessage({

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -38,7 +38,7 @@
   margin-bottom: var(--Space-x1);
 }
 
-.btn {
+.triggerButton {
   background: none;
   border: none;
   color: var(--Text-Default);
@@ -54,9 +54,9 @@
   right: 0;
   padding: 20px var(--Space-x15) 0;
   border-radius: var(--Corner-radius-lg);
-}
-
-.guestsAndRooms {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--Text-Default);
 }
 
@@ -207,12 +207,6 @@
     overflow-y: visible;
   }
 
-  .trigger > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .pickerContainer:focus-visible {
     outline: none;
   }

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/index.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react"
 import { FocusScope, useOverlay } from "react-aria"
-import { Button } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
@@ -148,8 +148,7 @@ export default function GuestsRoomsPickerForm({
       <div className={styles.container}>
         <Trigger
           rooms={rooms}
-          className={styles.trigger}
-          triggerFn={() => {
+          onPress={() => {
             setIsOpen((prev) => !prev)
             if (!isDesktop && !isOpen) {
               lockScroll()
@@ -197,13 +196,11 @@ export default function GuestsRoomsPickerForm({
 
 function Trigger({
   rooms,
-  className,
-  triggerFn,
+  onPress,
   ariaLabelledBy,
 }: {
   rooms: GuestsRoom[]
-  className: string
-  triggerFn?: () => void
+  onPress?: () => void
   ariaLabelledBy?: string
 }) {
   const intl = useIntl()
@@ -244,15 +241,15 @@ function Trigger({
   }
 
   return (
-    <Button
-      className={`${className} ${styles.btn}`}
-      type="button"
-      onPress={triggerFn}
-      aria-labelledby={ariaLabelledBy}
-    >
-      <Typography variant="Body/Paragraph/mdRegular">
-        <span className={styles.guestsAndRooms}>{parts.join(", ")}</span>
-      </Typography>
-    </Button>
+    <Typography variant="Body/Paragraph/mdRegular">
+      <ButtonRAC
+        className={styles.triggerButton}
+        type="button"
+        onPress={onPress}
+        aria-labelledby={ariaLabelledBy}
+      >
+        {parts.join(", ")}
+      </ButtonRAC>
+    </Typography>
   )
 }