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

Merged in chore/sw-3145-move-deprecated-select (pull request #2518)

Browse Source 
chore(SW-3145): Move DeprecatedSelect to design-system

* Move DeprecatedSelect to design-system


Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
2025-07-04 06:34:18 +00:00
parent 923206ee4c
commit 9e1cc66f95
15 changed files with 97 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import styles from "./filter.module.css"

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

@@ -3,11 +3,11 @@ import { useReducer } from "react"
import { useIntl } from "react-intl"
import { type MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import { membershipLevels } from "@/constants/membershipLevels"
import MembershipLevelIcon from "@/components/Levels/Icon"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import LargeTable from "./LargeTable"
import LevelSummary from "./LevelSummary"

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

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import { useDestinationDataStore } from "@/stores/destination-data"
import type { SortOption } from "@scandic-hotels/trpc/enums/destinationFilterAndSort"

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

@@ -4,11 +4,10 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import styles from "./child-selector.module.css"
import type {

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

@@ -13,6 +13,7 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -21,7 +22,6 @@ import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import Button from "@/components/TempDesignSystem/Button"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
import { DEFAULT_SORT } from "../../HotelSorter"

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

@@ -4,7 +4,8 @@ import { usePathname, useSearchParams } from "next/navigation"
import { useCallback } from "react"
import { useIntl } from "react-intl"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import { trackEvent } from "@/utils/tracking/base"
import {

140
apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx
View File

@@ -1,140 +0,0 @@
"use client"
import { useState } from "react"
import {
Button,
type Key,
ListBox,
ListBoxItem,
Popover,
Select as ReactAriaSelect,
SelectValue,
} from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body"
import { Label } from "@scandic-hotels/design-system/Label"
import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
import SelectChevron from "../Form/SelectChevron"
import styles from "./select.module.css"
import type {
SelectPortalContainer,
SelectPortalContainerArgs,
SelectProps,
} from "./select"
export default function Select({
className = "",
"aria-label": ariaLabel,
defaultSelectedKey,
items,
label,
name,
onSelect,
disabled,
required = false,
tabIndex,
value,
maxHeight,
showRadioButton = false,
discreet = false,
isNestedInModal = false,
optionsIcon,
}: SelectProps) {
const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal)
function setRef(node: SelectPortalContainerArgs) {
if (node) {
setRootDiv(node)
}
}
function handleOnSelect(key: Key) {
onSelect(key)
}
let chevronProps = {}
if (discreet) {
chevronProps = { color: "baseButtonTextOnFillNormal" }
} else if (disabled) {
chevronProps = { color: "disabled" }
}
return (
<div className={`${styles.container} ${className}`} ref={setRef}>
<ReactAriaSelect
aria-label={ariaLabel}
className={`${styles.select} ${discreet ? styles.discreet : ""} select-container`}
defaultSelectedKey={defaultSelectedKey}
name={name}
onSelectionChange={handleOnSelect}
selectedKey={value as Key}
onOpenChange={setOverflowVisible}
isDisabled={disabled}
>
<Body asChild fontOnly>
<Button
className={`${styles.input} select-button`}
data-testid={name}
>
<SelectValue tabIndex={tabIndex}>
{({ selectedText }) => (
<>
<Label
required={required}
size={discreet ? "discreet" : "regular"}
>
{label}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{discreet && `:`}
</Label>
{selectedText && (
<Body className={optionsIcon ? styles.iconLabel : ""}>
{optionsIcon ? optionsIcon : null}
{selectedText}
</Body>
)}
</>
)}
</SelectValue>
<SelectChevron {...chevronProps} />
</Button>
</Body>
<Body asChild fontOnly>
<Popover
className={styles.popover}
placement="bottom"
shouldFlip={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={rootDiv}
maxHeight={maxHeight}
>
<ListBox className={styles.listBox}>
{items.map((item) => (
<ListBoxItem
aria-label={item.label}
className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton} ${optionsIcon && styles.iconLabel}`}
id={item.value}
key={`${item.value}_${item.label}`}
data-testid={item.label}
>
{optionsIcon ? optionsIcon : null}
{item.label}
</ListBoxItem>
))}
</ListBox>
</Popover>
</Body>
</ReactAriaSelect>
</div>
)
}

125
apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
View File

@@ -1,125 +0,0 @@
.container {
position: relative;
}
.select {
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
}
.select[data-focused="true"] {
border: 1px solid var(--Border-Interactive-Focus);
outline: none;
}
.select[data-focused="true"].discreet {
border: 1px solid transparent;
outline: none;
}
.select[data-focus-visible="true"].discreet {
border: 1px solid var(--Border-Interactive-Focus);
}
.select.discreet {
border: 1px solid transparent;
}
.select.discreet .input {
background-color: unset;
color: var(--Base-Text-High-contrast);
gap: var(--Spacing-x1);
}
.select[data-disabled],
.select[data-disabled] .input {
background-color: var(--UI-Input-Controls-Surface-Disabled);
border: none;
pointer-events: none;
}
.iconLabel {
display: flex;
gap: var(--Spacing-x-half);
}
.input {
align-items: center;
background-color: var(--UI-Opacity-White-100);
border: none;
border-radius: var(--Corner-radius-md);
color: var(--UI-Text-High-contrast);
display: flex;
gap: var(--Spacing-x-half);
height: 60px;
outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
text-align: left;
justify-content: space-between;
}
.input :global(.react-aria-SelectValue) {
align-items: flex-start;
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.select.discreet :global(.react-aria-SelectValue) {
align-items: center;
justify-content: flex-end;
flex-direction: row;
font-weight: 500;
gap: var(--Spacing-x-half);
}
.popover {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-md);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
gap: var(--Spacing-x1);
overflow: auto;
width: 100%;
}
.listBox {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
}
.listBoxItem {
padding: var(--Spacing-x1);
}
.listBoxItem[data-focused="true"],
.listBoxItem[data-selected="true"] {
background: var(--UI-Input-Controls-Surface-Hover);
border-radius: var(--Corner-radius-md);
outline: none;
}
.listBoxItem.showRadioButton {
display: flex;
align-items: center;
}
.listBoxItem.showRadioButton:before {
flex-shrink: 0;
content: "";
margin-right: var(--Spacing-x-one-and-half);
background-color: white;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
}
.listBoxItem[data-selected="true"].showRadioButton:before {
box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
}

20
apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts
View File

@@ -1,20 +0,0 @@
import type { ReactElement } from "react"
import type { Key } from "react-aria-components"
export interface SelectProps
extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
defaultSelectedKey?: Key
items: { label: string; value: Key }[]
label: string
name: string
onSelect: (key: Key) => void
value?: string | number
maxHeight?: number
showRadioButton?: boolean
discreet?: boolean
isNestedInModal?: boolean
optionsIcon?: ReactElement<any>
}
export type SelectPortalContainer = HTMLDivElement | undefined
export type SelectPortalContainerArgs = HTMLDivElement | null

2
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 DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
import type { SelectProps } from "./select"

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

@@ -1,12 +1,28 @@
import type { ReactElement } from "react"
import type { Key } from "react-aria-components"
import type { RegisterOptions } from "react-hook-form"
import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/DeprecatedSelect/select"
interface ReactAriaSelectProps
extends Omit<
React.SelectHTMLAttributes<HTMLSelectElement>,
"onSelect" | "value"
> {
defaultSelectedKey?: Key
items: { label: string; value: Key }[]
label: string
name: string
maxHeight?: number
showRadioButton?: boolean
discreet?: boolean
isNestedInModal?: boolean
optionsIcon?: ReactElement<any>
}
export interface SelectProps
extends Omit<
React.SelectHTMLAttributes<HTMLSelectElement>,
"name" | "onSelect" | "placeholder"
>,
Omit<ReactAriaSelectProps, "onSelect" | "ref" | "value"> {
Omit<ReactAriaSelectProps, "ref" | "value"> {
registerOptions?: RegisterOptions
}

7
apps/scandic-web/components/TempDesignSystem/Form/SelectChevron/chevron.module.css
View File

@@ -1,7 +0,0 @@
.chevron {
display: flex;
}
div[data-rac][data-open="true"] .chevron {
transform: rotate(180deg);
}

16
apps/scandic-web/components/TempDesignSystem/Form/SelectChevron/index.tsx
View File

@@ -1,16 +0,0 @@
import { type IconProps } from "@scandic-hotels/design-system/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import styles from "./chevron.module.css"
export default function SelectChevron(props: IconProps) {
return (
<span aria-hidden="true" className={styles.chevron}>
<MaterialIcon
icon="keyboard_arrow_down"
color={props.color ?? "Icon/Default"}
size={20}
/>
</span>
)
}