From 73884aa428b180060ffe40ec9f72ff737e0d39a7 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 12 Jun 2025 12:05:13 +0200
Subject: [PATCH] fix: restore old select selectors for label to still support
 the temp design select

deprecated the temp design select in favor of the new one
---
 .../JobylonFeed/JobList/Filter/index.tsx        | 10 +++++-----
 .../DynamicContent/OverviewTable/Client.tsx     |  6 +++---
 .../DestinationFilterAndSort/Sort/index.tsx     |  4 ++--
 .../ChildSelector/ChildInfoSelector.tsx         |  6 +++---
 .../Filters/FilterAndSortModal/index.tsx        |  4 ++--
 .../SelectHotel/HotelSorter/index.tsx           |  4 ++--
 .../{Select => DeprecatedSelect}/index.tsx      |  0
 .../select.module.css                           | 17 -----------------
 .../{Select => DeprecatedSelect}/select.ts      |  0
 .../TempDesignSystem/Form/Select/index.tsx      |  4 ++--
 .../TempDesignSystem/Form/Select/select.ts      |  2 +-
 .../lib/components/Label/label.module.css       | 14 ++++++++++++++
 12 files changed, 34 insertions(+), 37 deletions(-)
 rename apps/scandic-web/components/TempDesignSystem/{Select => DeprecatedSelect}/index.tsx (100%)
 rename apps/scandic-web/components/TempDesignSystem/{Select => DeprecatedSelect}/select.module.css (85%)
 rename apps/scandic-web/components/TempDesignSystem/{Select => DeprecatedSelect}/select.ts (100%)

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
index 47f2b6fac..1a1e33309 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import styles from "./filter.module.css"
 
@@ -30,7 +30,7 @@ export default function Filter({
 
   return (
     <form className={styles.filterForm}>
-      <Select
+      <DeprecatedSelect
         items={countryFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -42,7 +42,7 @@ export default function Filter({
         name="country"
         onSelect={(value) => onFilterChange(JobylonFilterKey.country, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={cityFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -54,7 +54,7 @@ export default function Filter({
         name="city"
         onSelect={(value) => onFilterChange(JobylonFilterKey.city, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={departmentFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -66,7 +66,7 @@ export default function Filter({
         name="department"
         onSelect={(value) => onFilterChange(JobylonFilterKey.department, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={categoryFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
index 6dd73e3d3..5ddf7e825 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/constants/membershipLevels"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
@@ -98,7 +98,7 @@ export default function OverviewTableClient({
           }
           showDescription={false}
         />
-        <Select
+        <DeprecatedSelect
           aria-label={intl.formatMessage({
             defaultMessage: "Level",
           })}
@@ -137,7 +137,7 @@ export default function OverviewTableClient({
         return null
     }
     return (
-      <Select
+      <DeprecatedSelect
         aria-label={intl.formatMessage({
           defaultMessage: "Level",
         })}
diff --git a/apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx b/apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx
index 02a73504e..410eef6ff 100644
--- a/apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx
@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import type { SortItem } from "@/types/components/destinationFilterAndSort"
 import type { SortOption } from "@/types/enums/destinationFilterAndSort"
@@ -21,7 +21,7 @@ export default function Sort({ sortItems }: SortProps) {
   }))
 
   return (
-    <Select
+    <DeprecatedSelect
       items={sortItems}
       defaultSelectedKey={pendingSort}
       label={intl.formatMessage({
diff --git a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index 355a41db4..1fc2030b4 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./child-selector.module.css"
@@ -100,7 +100,7 @@ export default function ChildInfoSelector({
     <>
       <div key={index} className={styles.childInfoContainer}>
         <div>
-          <Select
+          <DeprecatedSelect
             required={true}
             items={ageList}
             label={ageLabel}
@@ -116,7 +116,7 @@ export default function ChildInfoSelector({
         </div>
         <div>
           {child.age >= 0 ? (
-            <Select
+            <DeprecatedSelect
               items={getAvailableBeds(child.age)}
               label={bedLabel}
               aria-label={bedLabel}
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
index 59f999c9a..5b3fadf85 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
@@ -19,7 +19,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
@@ -167,7 +167,7 @@ export default function FilterAndSortModal({
                     </Subtitle>
                   </header>
                   <div className={styles.sorter}>
-                    <Select
+                    <DeprecatedSelect
                       items={sortItems}
                       defaultSelectedKey={
                         searchParams.get("sort") ?? DEFAULT_SORT
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx
index ab81ddb37..6e8d25e89 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx
@@ -4,7 +4,7 @@ import { usePathname, useSearchParams } from "next/navigation"
 import { useCallback } from "react"
 import { useIntl } from "react-intl"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import { trackEvent } from "@/utils/tracking/base"
 
 import {
@@ -71,7 +71,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) {
   ]
 
   return (
-    <Select
+    <DeprecatedSelect
       items={sortItems}
       defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
       label={intl.formatMessage({
diff --git a/apps/scandic-web/components/TempDesignSystem/Select/index.tsx b/apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/Select/index.tsx
rename to apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx
diff --git a/apps/scandic-web/components/TempDesignSystem/Select/select.module.css b/apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
similarity index 85%
rename from apps/scandic-web/components/TempDesignSystem/Select/select.module.css
rename to apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
index 38b0a153b..f48e27337 100644
--- a/apps/scandic-web/components/TempDesignSystem/Select/select.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
@@ -123,20 +123,3 @@
 .listBoxItem[data-selected="true"].showRadioButton:before {
   box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
 }
-
-/* Use global react aria classnames here since setting a css modules classname overrides
-   the class set by react aria.We use that class to style the child label component. */
-.select:not(.discreet) :global(.react-aria-SelectValue) {
-  display: grid;
-  transition: height 200ms ease;
-}
-
-.input :global(.react-aria-SelectValue) {
-  height: 18px;
-  overflow: hidden;
-}
-
-.input :global(.react-aria-SelectValue):has(:nth-child(2)) {
-  height: 38px;
-  overflow: visible;
-}
diff --git a/apps/scandic-web/components/TempDesignSystem/Select/select.ts b/apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/Select/select.ts
rename to apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx
index 32550b0e6..6fef3451d 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { useController, useFormContext } from "react-hook-form"
 
-import ReactAriaSelect from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import type { SelectProps } from "./select"
 
@@ -22,7 +22,7 @@ export default function Select({
   })
 
   return (
-    <ReactAriaSelect
+    <DeprecatedSelect
       className={className}
       defaultSelectedKey={field.value}
       disabled={disabled || field.disabled}
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts b/apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts
index 2d55cef99..d28316886 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts
@@ -1,6 +1,6 @@
 import type { RegisterOptions } from "react-hook-form"
 
-import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/Select/select"
+import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/DeprecatedSelect/select"
 
 export interface SelectProps
   extends Omit<
diff --git a/packages/design-system/lib/components/Label/label.module.css b/packages/design-system/lib/components/Label/label.module.css
index c5e6e97bb..6f3c4049a 100644
--- a/packages/design-system/lib/components/Label/label.module.css
+++ b/packages/design-system/lib/components/Label/label.module.css
@@ -82,3 +82,17 @@ textarea:disabled {
     margin-bottom: var(--Space-x05);
   }
 }
+
+/* Legacy selector for deprecated select component */
+:global(.select-container)[data-disabled] .label {
+  color: var(--Text-Interactive-Disabled);
+}
+
+:global(.select-button) .label {
+  order: unset;
+}
+
+:global(.select-container)[data-open='true'] .label:not(.discreet),
+:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
+  font-size: 12px;
+}