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

fix: restore old select selectors for label to still support the temp design select

Browse Source 
deprecated the temp design select in favor of the new one
This commit is contained in:
Christian Andolf
2025-06-12 12:05:13 +02:00
parent 7ee711bb43
commit 73884aa428
12 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
View File

@@ -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({

6
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
View File

@@ -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",
})}

4
apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx
View File

@@ -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({

6
apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
View File

@@ -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}

4
apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
View File

@@ -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

4
apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx
View File

@@ -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({

0
apps/scandic-web/components/TempDesignSystem/Select/index.tsx → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx
View File

17
apps/scandic-web/components/TempDesignSystem/Select/select.module.css → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
View File

@@ -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;
}

0
apps/scandic-web/components/TempDesignSystem/Select/select.ts → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts
View File

4
apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx
View File

@@ -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}

2
apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts
View File

@@ -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<

14
packages/design-system/lib/components/Label/label.module.css
View File

@@ -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;
}