Merged in fix/book-769-booking-widget-ui-bugs (pull request #3524)

Fix/book 769 booking widget ui bugs

* fixed text in serachList not wrapping properly

* fixed spacing on mobile searchList

* fixed close button icon color

* fix for issues with fixed vs sticky elements on scroll lock

Approved-by: Linus Flood

apps/partner-sas/globals.css

@@ -158,6 +158,11 @@ body.partner-sas {
   white-space: nowrap;
   border-width: 0;
 }
+/* When a select in the booking widget is open, react-aria sets overflow:hidden
+   which breaks sticky positioning. Override with clip which doesn't break sticky. */
+body:has([data-booking-widget-open] [data-open]) {
+  overflow: clip !important;
+}
 
 @media screen and (min-width: 768px) {
   :root {

apps/scandic-web/app/globals.css

@@ -88,6 +88,12 @@ body:has([data-booking-widget-open="true"]) #kindly-chat-api {
   z-index: -1 !important;
 }
 
+/* When a select in the booking widget is open, react-aria sets overflow:hidden
+   which breaks sticky positioning. Override with clip which doesn't break sticky. */
+body:has([data-booking-widget-open] [data-open]) {
+  overflow: clip !important;
+}
+
 @media screen and (min-width: 768px) {
   :root {
     --max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min);

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css

@@ -9,7 +9,7 @@
   overflow-y: auto;
   padding: var(--Space-x2) var(--Space-x3);
   position: fixed;
-  top: calc(140px + max(var(--sitewide-alert-sticky-height), 25px));
+  top: calc(140px + max(var(--sitewide-alert-sticky-height), 15px));
   width: 100%;
   height: calc(100% - 200px);
   z-index: 10010;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -33,6 +33,7 @@
 
 .text {
   padding: 0 var(--Space-x1);
+  white-space: normal;
 }
 .textPlaceholderColor {
   color: var(--UI-Text-Placeholder);

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -5,6 +5,7 @@ import { cx } from "class-variance-authority"
 import { useSearchParams } from "next/navigation"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
@@ -12,7 +13,7 @@ import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import isValidJson from "@scandic-hotels/common/utils/isValidJson"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
@@ -66,6 +67,7 @@ export default function BookingWidgetClient({
     autoLock: false,
   })
   const shouldFetchAutoComplete = !!data.hotelId || !!data.city
+  const intl = useIntl()
 
   const { data: destinationsData, isPending } =
     trpc.autocomplete.destinations.useQuery(
@@ -257,13 +259,17 @@ export default function BookingWidgetClient({
         />
         <div className={styles.backdrop} onClick={closeMobileSearch} />
         <div className={formContainerClassNames}>
-          <button
+          <IconButton
             className={styles.close}
-            onClick={closeMobileSearch}
+            variant="Muted"
-            type="button"
+            emphasis
-          >
+            aria-label={intl.formatMessage({
-            <MaterialIcon icon="close" />
+              id: "common.close",
-          </button>
+              defaultMessage: "Close",
+            })}
+            onPress={closeMobileSearch}
+            iconName="close"
+          />
           <Form
             type={type}
             onClose={closeMobileSearch}

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -72,9 +72,17 @@ export default function DatePickerRangeMobile({
   return (
     <div className={styles.container} ref={monthsRef}>
       <header className={styles.header}>
-        <button className={styles.close} onClick={close} type="button">
+        <IconButton
-          <MaterialIcon icon="close" />
+          className={styles.close}
-        </button>
+          variant="Muted"
+          emphasis
+          aria-label={intl.formatMessage({
+            id: "common.close",
+            defaultMessage: "Close",
+          })}
+          onPress={close}
+          iconName="close"
+        />
       </header>
       <DayPicker
         classNames={{

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

@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -114,9 +115,17 @@ export default function GuestsRoomsPickerDialog({
     <>
       <section className={styles.contentWrapper}>
         <header className={styles.header}>
-          <button type="button" className={styles.close} onClick={onClose}>
+          <IconButton
-            <MaterialIcon icon="close" />
+            className={styles.close}
-          </button>
+            variant="Muted"
+            emphasis
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+            onPress={onClose}
+            iconName="close"
+          />
         </header>
 
         <div className={styles.contentContainer}>