Merged in fix/SW-1330-filter-tooltip-mobile (pull request #1146)

fix(SW-1330): add space and fix touchable tooltip for ipad

* fix(SW-1330): add space and fix touchable tooltip for ipad


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -65,9 +65,6 @@ export default function RoomFilter({
   const tooltipText = intl.formatMessage({
     id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
   })
-
-  const showTooltip = isAboveMobile && petFriendly
-
   const submitFilter = useCallback(() => {
     const data = getValues()
     onFilter(data)
@@ -94,19 +91,14 @@ export default function RoomFilter({
       </div>
       <div className={styles.infoMobile}>
         <div className={styles.filterInfo}>
-          {!isAboveMobile ? (
-            <Tooltip
-              text={tooltipText}
-              position="bottom"
-              arrow="left"
-              isTouchable
-            >
-              <InfoCircleIcon
-                color="uiTextHighContrast"
-                height={20}
-                width={20}
-              />
-
+          <Tooltip
+            text={tooltipText}
+            position="bottom"
+            arrow="left"
+            isTouchable
+          >
+            <InfoCircleIcon color="uiTextHighContrast" height={20} width={20} />
+            <div className={styles.filter}>
               <Caption
                 type="label"
                 color="baseTextMediumContrast"
@@ -114,30 +106,14 @@ export default function RoomFilter({
               >
                 {intl.formatMessage({ id: "Filter" })}
               </Caption>
-              <Caption type="label" color="baseTextMediumContrast">
+              <Caption type="regular" color="baseTextMediumContrast">
                 {Object.entries(selectedFilters)
                   .filter(([_, value]) => value)
                   .map(([key]) => intl.formatMessage({ id: key }))
                   .join(", ")}
               </Caption>
-            </Tooltip>
-          ) : (
-            <>
-              <Caption
-                type="label"
-                color="baseTextMediumContrast"
-                textTransform="uppercase"
-              >
-                {intl.formatMessage({ id: "Filter" })}
-              </Caption>
-              <Caption type="label" color="baseTextMediumContrast">
-                {Object.entries(selectedFilters)
-                  .filter(([_, value]) => value)
-                  .map(([key]) => intl.formatMessage({ id: key }))
-                  .join(", ")}
-              </Caption>
-            </>
-          )}
+            </div>
+          </Tooltip>
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
@@ -170,12 +146,13 @@ export default function RoomFilter({
                 />
               )
 
-              return showTooltip ? (
+              return isPetRoom && isAboveMobile ? (
                 <Tooltip
                   key={option.code}
                   text={tooltipText}
                   position="bottom"
                   arrow="right"
+                  isTouchable
                 >
                   {checkboxChip}
                 </Tooltip>

components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css

@@ -12,6 +12,13 @@
   align-items: center;
 }
 
+.filter {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin-left: var(--Spacing-x-half);
+  align-items: baseline;
+}
+
 .filterInfo {
   display: flex;
   flex-direction: row;