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

feat: loosen up the zod validations and return null instead of throwing

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 5c50ac060d
commit aca9221ea6
89 changed files with 1117 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/TempDesignSystem/Form/Select/index.tsx
View File

@@ -11,6 +11,8 @@ import {
SelectValue,
} from "react-aria-components"
import Body from "../../Text/Body"
import Footnote from "../../Text/Footnote"
import SelectChevron from "../SelectChevron"
import styles from "./select.module.css"
@@ -48,38 +50,44 @@ export default function Select({
placeholder={placeholder}
selectedKey={value as Key}
>
<Button className={styles.input}>
<div className={styles.inputContentWrapper}>
<Label className={styles.label}>{label}</Label>
<SelectValue />
</div>
<SelectChevron />
</Button>
<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 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>
)

12
components/TempDesignSystem/Form/Select/select.module.css
View File

@@ -4,10 +4,6 @@
.label {
color: var(--Base-Text-UI-Placeholder);
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.select {
@@ -32,11 +28,6 @@
display: flex;
gap: var(--Spacing-x-half);
height: 56px;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
text-align: left;
@@ -56,7 +47,6 @@
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
font-size: var(--typography-Body-Regular-fontSize);
gap: var(--Spacing-x1);
overflow: auto;
width: 100%;
@@ -79,4 +69,4 @@
.listBoxItem[data-selected="true"] {
font-weight: 500;
}
}