From 9ef292709b81eebedb34e1f318683c3b916b4434 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 9 Apr 2025 17:33:44 +0200
Subject: [PATCH] feat(SW-1509): enable support for more react aria props

fix invalid border

corrected default border
---
 .../design-system/lib/components/Select/Select.tsx    |  8 ++++----
 .../lib/components/Select/select.module.css           | 11 +++++++----
 packages/design-system/lib/components/Select/types.ts |  2 --
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index 299d542de..9a3d67998 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -20,11 +20,11 @@ export function Select({
   name,
   label,
   items,
-  isRequired,
   isDisabled,
   icon,
   itemIcon,
   enableFiltering,
+  ...props
 }: SelectProps) {
   if (enableFiltering) {
     return (
@@ -32,10 +32,10 @@ export function Select({
         name={name}
         label={label}
         items={items}
-        isRequired={isRequired}
-        isDisabled={isDisabled}
         icon={icon}
         itemIcon={itemIcon}
+        isDisabled={isDisabled}
+        {...props}
       />
     )
   }
@@ -46,8 +46,8 @@ export function Select({
       className={styles.select}
       name={name}
       aria-label={label}
-      isRequired={isRequired}
       isDisabled={isDisabled}
+      {...props}
     >
       <Button className={cx(styles.inner, styles.button)}>
         {icon ? (
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index a4eefbebf..842953373 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -1,18 +1,18 @@
 .select {
   position: relative;
   background-color: var(--Surface-UI-Fill-Default);
-  border: 1px solid var(--Border-Default);
+  border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   max-width: 300px;
 
   &[data-required] .label::after {
-    content: '*';
+    content: ' *';
   }
   &[data-open] .chevron {
     rotate: -90deg;
   }
   &[data-focused] {
-    border: 1px solid var(--Border-Interactive-Focus);
+    border-color: var(--Border-Interactive-Focus);
 
     .button,
     .input {
@@ -37,6 +37,9 @@
       color: var(--Text-Interactive-Disabled);
     }
   }
+  &[data-invalid] {
+    border-color: var(--Border-Interactive-Error);
+  }
 }
 
 .chevron {
@@ -49,7 +52,7 @@
   gap: var(--Space-x1);
   width: 100%;
   height: 56px;
-  padding: var(--Space-x1);
+  padding: var(--Space-x15);
   box-sizing: border-box;
 
   .button {
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index 78708943d..29ded498a 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -15,8 +15,6 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   items: (Key | Item)[]
   name: string
   label: string
-  isRequired?: boolean
-  isDisabled?: boolean
   enableFiltering?: boolean
 }