refactor: move input and label to design system

correct variables according to design system spec various cleanup
2025-05-26 16:09:22 +02:00
parent 8b5e8aecae
commit f6be4f275e
22 changed files with 257 additions and 164 deletions
@@ -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
@@ -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);
-}
@@ -1,4 +0,0 @@
-export interface AriaInputWithLabelProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label: string
-}
@@ -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}