Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)

Fix/book 149 incorrect onfocus behaviour booking widget * fix(BOOK-149): fixed labels shifting * fix(BOOK-149): reintroduced sticky position * fix(BOOK-149): added missing border to "where" text field * added overflow to datepicker * comment fixes * removed separate typography declaration * changed to onPress * fix(BOOK-149): moved components to separate files * fix(BOOK-149): removed desktop & mobile specific css classes * fix(BOOK-149): new implementation of date and room modals * dependencies update * fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height * updated info button to new variant * fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode * fixed overlay issue and added focus indicator on mobile * fixed missing space in css * rebase and fixed icon buttons after update * simplified to use explicit boolean * PR comments fixes * more PR comment fixes * PR comment fixes * fixed setIsOpen((prev) => !prev) * fixed issues with room error not showing properly on mobile * fixing pr comments * fixed flickering on GuestRoomModal Approved-by: Erik Tiekstra
2026-01-12 14:18:51 +00:00
parent 0c6a4cf186
commit 6a008ba342
38 changed files with 1117 additions and 743 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
@@ -0,0 +1,33 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./validationError.module.css"
+
+export default function ValidationError() {
+  const intl = useIntl()
+
+  const errorMessage = intl.formatMessage({
+    id: "bookingWidget.child.ageRequiredError",
+    defaultMessage: "Child age is required",
+  })
+
+  return (
+    <div className={styles.container}>
+      <Typography
+        className={styles.title}
+        variant="Body/Supporting text (caption)/smBold"
+      >
+        <span>
+          <MaterialIcon
+            icon="error_circle_rounded"
+            color="Icon/Feedback/Error"
+            size={20}
+          />
+          {errorMessage}
+        </span>
+      </Typography>
+    </div>
+  )
+}
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
@@ -0,0 +1,38 @@
+.container {
+  position: absolute;
+  top: calc(100% + var(--Space-x2));
+  background: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-lg);
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  padding: var(--Space-x15);
+  max-width: min(100vw, calc(360px - var(--Space-x2)));
+  width: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--Space-x15);
+  align-items: flex-start;
+  gap: var(--Space-x05);
+  z-index: var(--dialog-z-index);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
+}
+
+.message {
+  text-wrap: auto;
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    top: calc(100% + var(--Space-x1) + var(--Space-x2));
+    left: calc(var(--Space-x1) * -1);
+    padding: var(--Space-x2);
+    max-width: 360px;
+    width: fit-content;
+  }
+}