feat(WEB-163): edit profile field validation

2024-07-01 15:37:12 +02:00
parent 2a71a45d3d
commit 56bfbc3b71
30 changed files with 588 additions and 134 deletions
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -31,6 +31,8 @@ export default function Select({
  name,
  onSelect,
  placeholder,
+  required = false,
+  tabIndex,
  value,
 }: SelectProps) {
  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
@@ -58,8 +60,10 @@ export default function Select({
      >
        <Body asChild fontOnly>
          <Button className={styles.input}>
-            <div className={styles.inputContentWrapper}>
-              <Label size="small">{label}</Label>
+            <div className={styles.inputContentWrapper} tabIndex={tabIndex}>
+              <Label required={required} size="small">
+                {label}
+              </Label>
              <SelectValue />
            </div>
            <SelectChevron />
--- a/components/TempDesignSystem/Select/select.module.css
+++ b/components/TempDesignSystem/Select/select.module.css
@@ -58,7 +58,8 @@
  padding: var(--Spacing-x2);
 }

-.listBoxItem[data-focused="true"] {
+.listBoxItem[data-focused="true"],
+.listBoxItem[data-selected="true"] {
  background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
  outline: none;
 }
--- a/components/TempDesignSystem/Select/select.ts
+++ b/components/TempDesignSystem/Select/select.ts
@@ -1,4 +1,4 @@
-import type { Key } from "react-aria-components"
+import type { Key, SelectProps as AriaSelectProps } from "react-aria-components"

 export interface SelectProps
  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {