scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Matilda Haneling
2026-01-12 14:18:51 +00:00
parent 0c6a4cf186
commit 6a008ba342
38 changed files with 1117 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +1,17 @@
.triggerDesktop {
display: none;
}
.errorContainer {
display: flex;
padding: var(--Space-x2);
padding: var(--Space-x15);
border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-md);
justify-content: center;
}
.error {
display: flex;
gap: var(--Space-x1);
color: var(--UI-Text-Error);
}
.pickerContainerMobile {
--header-height: 72px;
--sticky-button-height: 140px;
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: calc(max(var(--sitewide-alert-sticky-height), 20px));
transition: top 300ms ease;
z-index: 100;
color: var(--Text-Feedback-Error);
text-wrap: wrap;
align-items: center;
}
.contentWrapper {
@@ -35,10 +22,6 @@
grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
}
.pickerContainerDesktop {
display: none;
}
.roomContainer {
display: grid;
gap: var(--Space-x2);
@@ -69,6 +52,7 @@
bottom: 0;
right: 0;
padding: 20px var(--Space-x15) 0;
border-radius: var(--Corner-radius-lg);
}
.guestsAndRooms {
@@ -77,10 +61,18 @@
.footer {
display: flex;
flex-direction: row;
gap: var(--Space-x1);
flex-direction: column;
gap: var(--Space-x2);
}
.addRoomBtnContainer {
display: flex;
justify-content: center;
}
.footerButtons {
display: flex;
justify-content: space-between;
}
.roomContainer {
padding: var(--Space-x2);
}
@@ -97,15 +89,27 @@
width: 100%;
}
.contentWrapper
.addRoomMobileContainer
.addRoomBtn:is(:focus, :focus-visible, :focus-within),
.footer .hideOnMobile .addRoomBtn:is(:focus, :focus-visible, :focus-within),
.contentWrapper .addRoomBtn:is(:focus, :focus-visible, :focus-within),
.footer .addRoomBtn:is(:focus, :focus-visible, :focus-within),
.roomActionsButton:is(:focus, :focus-visible, :focus-within) {
outline: var(--Border-Interactive-Focus) auto 1px;
text-decoration: none;
}
.pickerContainer {
--header-height: 72px;
--sticky-button-height: 140px;
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
position: fixed;
top: calc(max(var(--sitewide-alert-sticky-height), 20px));
right: 0;
bottom: 0;
left: 0;
transition: top 300ms ease;
z-index: var(--booking-widget-z-index);
overflow: scroll;
}
@media screen and (max-width: 1366px) {
.contentContainer {
grid-area: content;
@@ -140,43 +144,52 @@
width: 100%;
}
.footer .hideOnMobile {
display: none;
}
.addRoomMobileContainer {
display: grid;
padding-bottom: calc(var(--sticky-button-height) + 20px);
padding-bottom: var(--Space-x3);
}
.errorContainer {
margin: var(--Space-x2);
}
.addRoomMobileContainer button {
width: 150px;
margin: 0 auto;
}
.addRoomMobileContainer .addRoomMobileDisabledText {
padding: var(--Space-x1) var(--Space-x2);
background-color: var(--Background-Primary);
margin: 0 var(--Space-x2);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Space-x1);
}
}
@media screen and (min-width: 1367px) {
.container {
height: 24px;
}
.pickerContainerMobile {
display: none;
}
.contentWrapper {
grid-template-rows: auto;
}
.footerButtons {
max-height: 40px;
}
.doneButton {
min-width: 125px;
}
.pickerContainer {
position: absolute;
display: grid;
bottom: auto;
left: auto;
right: auto;
border-radius: var(--Corner-radius-lg);
box-shadow: var(--popup-box-shadow);
min-width: 360px;
max-width: calc(100vw - 20px);
padding: var(--Space-x2) var(--Space-x3);
top: calc(100% + 36px);
max-height: none;
overflow-y: auto;
overflow-x: hidden;
}
.roomContainer {
padding: var(--Space-x2) 0 0 0;
}
@@ -193,34 +206,13 @@
overflow-y: visible;
}
.triggerMobile {
display: none;
}
.triggerDesktop {
display: block;
}
.triggerDesktop > span {
.trigger > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.pickerContainerDesktop {
--header-height: 72px;
--sticky-button-height: 140px;
background-color: var(--Main-Grey-White);
display: grid;
border-radius: var(--Corner-radius-lg);
box-shadow: var(--popup-box-shadow);
max-width: calc(100vw - 20px);
padding: var(--Space-x2) var(--Space-x3);
width: 360px;
}
.pickerContainerDesktop:focus-visible {
.pickerContainer:focus-visible {
outline: none;
}
@@ -229,18 +221,13 @@
}
.footer {
grid-template-columns: auto auto;
display: flex;
justify-content: space-between;
padding-top: var(--Space-x2);
height: fit-content;
}
.footer button {
margin-left: auto;
width: auto;
min-width: 125px;
}
.footer .hideOnDesktop,
.addRoomMobileContainer {
display: none;
}
}