feat(WEB-162): final design edit profile page
This commit is contained in:
Simon Emanuelsson
committed by
Christel Westerberg
Christel Westerberg
parent
5f3e417593
commit
d84efcbb0f
@@ -1,94 +1,35 @@
|
||||
"use client"
|
||||
import { useState } from "react"
|
||||
import {
|
||||
Button,
|
||||
type Key,
|
||||
Label,
|
||||
ListBox,
|
||||
ListBoxItem,
|
||||
Popover,
|
||||
Select as ReactAriaSelect,
|
||||
SelectValue,
|
||||
} from "react-aria-components"
|
||||
import { useController, useFormContext } from "react-hook-form"
|
||||
|
||||
import Body from "../../Text/Body"
|
||||
import Footnote from "../../Text/Footnote"
|
||||
import SelectChevron from "../SelectChevron"
|
||||
import ReactAriaSelect from "@/components/TempDesignSystem/Select"
|
||||
|
||||
import styles from "./select.module.css"
|
||||
|
||||
import type { SelectPortalContainer, SelectProps } from "./select"
|
||||
import type { SelectProps } from "./select"
|
||||
|
||||
export default function Select({
|
||||
"aria-label": ariaLabel,
|
||||
items,
|
||||
label,
|
||||
onSelect,
|
||||
name,
|
||||
placeholder,
|
||||
value,
|
||||
defaultSelectedKey,
|
||||
registerOptions = {},
|
||||
}: SelectProps) {
|
||||
const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(null)
|
||||
|
||||
function setRef(node: SelectPortalContainer) {
|
||||
if (node) {
|
||||
setRootDiv(node)
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnSelect(key: Key) {
|
||||
onSelect(key)
|
||||
}
|
||||
const { control } = useFormContext()
|
||||
const { field } = useController({
|
||||
control,
|
||||
name,
|
||||
rules: registerOptions,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={styles.container} ref={setRef}>
|
||||
<ReactAriaSelect
|
||||
defaultSelectedKey={defaultSelectedKey}
|
||||
aria-label={ariaLabel}
|
||||
className={styles.select}
|
||||
onSelectionChange={handleOnSelect}
|
||||
placeholder={placeholder}
|
||||
selectedKey={value as Key}
|
||||
>
|
||||
<Body asChild fontOnly>
|
||||
<Button className={styles.input}>
|
||||
<div className={styles.inputContentWrapper}>
|
||||
<Footnote asChild fontOnly>
|
||||
<Label className={styles.label}>{label}</Label>
|
||||
</Footnote>
|
||||
<SelectValue />
|
||||
</div>
|
||||
<SelectChevron />
|
||||
</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 ?? undefined}
|
||||
>
|
||||
<ListBox className={styles.listBox}>
|
||||
{items.map((item) => (
|
||||
<ListBoxItem
|
||||
aria-label={String(item)}
|
||||
className={styles.listBoxItem}
|
||||
id={item.value}
|
||||
key={item.label}
|
||||
>
|
||||
{item.label}
|
||||
</ListBoxItem>
|
||||
))}
|
||||
</ListBox>
|
||||
</Popover>
|
||||
</Body>
|
||||
</ReactAriaSelect>
|
||||
</div>
|
||||
<ReactAriaSelect
|
||||
defaultSelectedKey={field.value}
|
||||
disabled={field.disabled}
|
||||
items={items}
|
||||
label={label}
|
||||
name={field.name}
|
||||
onBlur={field.onBlur}
|
||||
onSelect={field.onChange}
|
||||
placeholder={placeholder}
|
||||
value={field.value}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--Base-Text-UI-Placeholder);
|
||||
}
|
||||
|
||||
.select {
|
||||
border: 1px solid var(--Base-Border-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.select[data-focused="true"] {
|
||||
border: 1px solid var(--Scandic-Blue-90);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
align-items: center;
|
||||
background-color: var(--Scandic-Opacity-White-100);
|
||||
border: none;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
color: var(--Base-Text-UI-High-contrast);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
height: 56px;
|
||||
outline: none;
|
||||
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.inputContentWrapper {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.popover {
|
||||
background-color: var(--Main-Grey-White);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
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);
|
||||
}
|
||||
|
||||
.listBoxItem {
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.listBoxItem[data-focused="true"] {
|
||||
background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.listBoxItem[data-selected="true"] {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
import type { Key } from "react-aria-components"
|
||||
import type { RegisterOptions } from "react-hook-form"
|
||||
|
||||
import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/Select/select"
|
||||
|
||||
export interface SelectProps
|
||||
extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
|
||||
items: { label: string; value: Key }[]
|
||||
label: string
|
||||
name: string
|
||||
onSelect: (key: Key) => void
|
||||
placeholder?: string
|
||||
defaultSelectedKey?: Key
|
||||
extends Omit<
|
||||
React.SelectHTMLAttributes<HTMLSelectElement>,
|
||||
"name" | "onSelect"
|
||||
>,
|
||||
Omit<ReactAriaSelectProps, "onSelect" | "ref" | "value"> {
|
||||
registerOptions?: RegisterOptions
|
||||
}
|
||||
|
||||
export type SelectPortalContainer = HTMLDivElement | null
|
||||
|
||||
Reference in New Issue
Block a user