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

refactor: move input and label to design system

Browse Source 
correct variables according to design system spec

various cleanup
This commit is contained in:
Christian Andolf
2025-05-26 16:09:22 +02:00
parent 8b5e8aecae
commit f6be4f275e
22 changed files with 257 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
View File

@@ -1,47 +0,0 @@
import { cx } from "class-variance-authority"
import {
type ForwardedRef,
forwardRef,
useId,
useImperativeHandle,
useRef,
} from "react"
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./input.module.css"
import type { AriaInputWithLabelProps } from "./input"
const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
{ label, ...props }: AriaInputWithLabelProps,
forwardedRef: ForwardedRef<HTMLInputElement>
) {
const ref = useRef<HTMLInputElement>(null)
// Unique id is required for multiple inputs of same name appearing multiple times
// on same page. This will inherited by parent label element.
// Shouldn't really be needed if we don't set id though.
const uniqueId = useId()
const inputId = `${uniqueId}-${props.name}`
useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
return (
<AriaLabel className={styles.container}>
<Body asChild fontOnly>
<AriaInput
{...props}
className={cx(styles.input, props.className)}
ref={ref}
id={inputId}
/>
</Body>
<Label required={props.required}>{label}</Label>
</AriaLabel>
)
})
export default AriaInputWithLabel

55
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
View File

@@ -1,55 +0,0 @@
.container {
align-content: center;
background-color: var(--Surface-Primary-Default);
border-color: var(--Border-Interactive-Default);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
min-width: 0; /* allow shrinkage */
height: 60px;
padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease;
}
.container:has(.input:focus) {
border-color: var(--Border-Interactive-Focus);
}
.container:has(.input:disabled) {
background-color: var(--Surface-Primary-Disabled);
border: none;
color: var(--Text-Interactive-Disabled);
}
.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
border-color: var(--Border-Interactive-Error);
&:focus-within {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Error);
}
}
.input {
background: none;
border: none;
color: var(--Text-Default);
height: 1px;
margin: 0;
order: 2;
overflow: visible;
padding: 0;
transition: height 150ms ease;
}
.input:focus,
.input:placeholder-shown,
.input[value]:not([value=""]) {
height: 18px;
outline: none;
}
.input:disabled {
color: var(--Text-Interactive-Disabled);
}

4
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts
View File

@@ -1,4 +0,0 @@
export interface AriaInputWithLabelProps
extends React.InputHTMLAttributes<HTMLInputElement> {
label: string
}

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

@@ -6,8 +6,8 @@ import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getErrorMessage } from "./errors"
@@ -63,7 +63,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
validationBehavior="aria"
value={field.value}
>
<AriaInputWithLabel
<InputWithLabel
{...field}
ref={ref}
aria-labelledby={field.name}

18
apps/scandic-web/components/TempDesignSystem/Form/Label/index.tsx
View File

@@ -1,18 +0,0 @@
import { labelVariants } from "./variants"
import type { LabelProps } from "./label"
export default function Label({
children,
className,
required,
size,
}: LabelProps) {
const classNames = labelVariants({
className,
size,
required,
})
return <span className={classNames}>{children}</span>
}

57
apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css
View File

@@ -1,57 +0,0 @@
.label {
color: var(--Text-Interactive-Placeholder);
font-family: "fira sans";
font-weight: 400;
letter-spacing: 0.03px;
line-height: 120%;
text-align: left;
transition: font-size 100ms ease;
user-select: none;
}
span.small {
display: block;
font-size: 12px;
}
span.regular {
font-size: 16px;
order: 1;
}
span.discreet {
color: var(--Text-Interactive-Default);
font-weight: 500;
order: unset;
}
span.required:after {
content: " *";
}
/* Handle input and textarea fields */
input:focus ~ .label,
input:placeholder-shown ~ .label,
input[value]:not([value=""]) ~ .label,
textarea:focus ~ .label textarea:placeholder-shown ~ .label,
textarea[value]:not([value=""]) ~ .label {
font-size: 12px;
margin-bottom: var(--Space-x05);
}
input:disabled ~ .label,
textarea:disabled ~ .label,
:global(.select-container)[data-disabled] .label {
color: var(--Text-Interactive-Disabled);
}
/* Handle select fields */
: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;
margin-bottom: var(--Space-x05);
}

9
apps/scandic-web/components/TempDesignSystem/Form/Label/label.ts
View File

@@ -1,9 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { labelVariants } from "./variants"
export interface LabelProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
VariantProps<typeof labelVariants> {
required?: boolean
}

21
apps/scandic-web/components/TempDesignSystem/Form/Label/variants.ts
View File

@@ -1,21 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./label.module.css"
export const labelVariants = cva(styles.label, {
variants: {
size: {
small: styles.small,
regular: styles.regular,
discreet: styles.discreet,
},
required: {
true: styles.required,
false: "",
},
},
defaultVariants: {
size: "regular",
required: false,
},
})

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

@@ -6,9 +6,9 @@ import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import Button from "@/components/TempDesignSystem/Button"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { passwordValidators } from "@/utils/zod/passwordValidator"
@@ -62,7 +62,7 @@ export default function PasswordInput({
}
>
<div className={styles.inputWrapper}>
<AriaInputWithLabel
<Input
{...field}
aria-labelledby={field.name}
id={field.name}

6
apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -12,12 +12,12 @@ import {
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Label } from "@scandic-hotels/design-system/Label"
import { getDefaultCountryFromLang } from "@/constants/languages"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"
@@ -114,7 +114,7 @@ export default function Phone({
type="tel"
value={phoneNumber}
>
<AriaInputWithLabel
<Input
{...register(name, registerOptions)}
autoComplete="tel-national"
label={label}

2
apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
View File

@@ -9,8 +9,8 @@ import {
import { Controller, useFormContext } from "react-hook-form"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Label } from "@scandic-hotels/design-system/Label"
import Label from "@/components/TempDesignSystem/Form/Label"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Body from "../../Text/Body"