From ec1cedacc326aee1c541854a2741c415165f8c12 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 17 Apr 2024 13:09:38 +0300
Subject: [PATCH] refactor(BaseInput): only use has for supported browsers,
 otherwise use class for wrapper

---
 .../BaseInput/BaseInput.module.scss           | 102 +++++++++++++-----
 .../src/components/BaseInput/BaseInput.tsx    |   7 +-
 .../components/BaseInput/BaseInput.types.ts   |   1 -
 3 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/packages/core/src/components/BaseInput/BaseInput.module.scss b/packages/core/src/components/BaseInput/BaseInput.module.scss
index 7776bbb9b3..7156aa630c 100644
--- a/packages/core/src/components/BaseInput/BaseInput.module.scss
+++ b/packages/core/src/components/BaseInput/BaseInput.module.scss
@@ -43,49 +43,101 @@
     border-color: var(--primary-text-color);
   }
 
-  &:has(.input:active, .input:focus) {
-    border-color: var(--primary-color);
+  @supports selector(:has(*)) {
+    &:has(.input:active, .input:focus) {
+      border-color: var(--primary-color);
+    }
+
+    &:has(.input:read-only) {
+      background-color: var(--allgrey-background-color);
+      border: none;
+
+      .input {
+        background-color: var(--allgrey-background-color);
+      }
+    }
+
+    &:has(.input:disabled) {
+      cursor: not-allowed;
+      user-select: none;
+      border: none;
+      pointer-events: none;
+      background-color: var(--disabled-background-color);
+    }
   }
 
-  // TODO in next major remove withReadOnlyStyle, should only be determined by read-only existence on input
-  &:has(.input:read-only).withReadOnlyStyle {
-    background-color: var(--allgrey-background-color);
-    border: none;
+  @supports not selector(:has(*)) {
+    &:focus-within {
+      border-color: var(--primary-color);
+    }
 
-    .input {
+    &.readOnly {
       background-color: var(--allgrey-background-color);
+      border: none;
+
+      .input {
+        background-color: var(--allgrey-background-color);
+      }
     }
-  }
 
-  &:has(.input:disabled) {
-    cursor: not-allowed;
-    user-select: none;
-    border: none;
-    pointer-events: none;
-    background-color: var(--disabled-background-color);
+    &.disabled {
+      cursor: not-allowed;
+      user-select: none;
+      border: none;
+      pointer-events: none;
+      background-color: var(--disabled-background-color);
+    }
   }
 
-  &.success {
-    border-color: var(--positive-color);
-
-    &:hover {
+  @supports selector(:has(*)) {
+    &.success {
       border-color: var(--positive-color);
+
+      &:hover {
+        border-color: var(--positive-color);
+      }
+
+      &:has(.input:active, .input:focus) {
+        border-color: var(--positive-color);
+      }
     }
 
-    &:has(.input:active, .input:focus) {
-      border-color: var(--positive-color);
+    &:has(.input[aria-invalid="true"]) {
+      border-color: var(--negative-color);
+
+      &:hover {
+        border-color: var(--negative-color);
+      }
+
+      &:has(.input:active, .input:focus) {
+        border-color: var(--negative-color);
+      }
     }
   }
 
-  &:has(.input[aria-invalid="true"]) {
-    border-color: var(--negative-color);
+  @supports not selector(:has(*)) {
+    &.success {
+      border-color: var(--positive-color);
+
+      &:hover {
+        border-color: var(--positive-color);
+      }
 
-    &:hover {
-      border-color: var(--negative-color);
+      &:focus-within {
+        border-color: var(--positive-color);
+      }
     }
 
-    &:has(.input:active, .input:focus) {
+    &.error {
       border-color: var(--negative-color);
+
+      &:hover {
+        border-color: var(--negative-color);
+      }
+
+      &:focus-within {
+        border-color: var(--negative-color);
+      }
     }
   }
 
diff --git a/packages/core/src/components/BaseInput/BaseInput.tsx b/packages/core/src/components/BaseInput/BaseInput.tsx
index fc0242dd80..186dab93a1 100644
--- a/packages/core/src/components/BaseInput/BaseInput.tsx
+++ b/packages/core/src/components/BaseInput/BaseInput.tsx
@@ -10,7 +10,6 @@ const BaseInput: BaseInputComponent = forwardRef(
       size = "medium",
       leftRender,
       rightRender,
-      withReadOnlyStyle,
       success,
       error,
       wrapperRole,
@@ -25,8 +24,10 @@ const BaseInput: BaseInputComponent = forwardRef(
       styles.wrapper,
       {
         [styles.rightThinnerPadding]: !rightRender,
-        [styles.withReadOnlyStyle]: withReadOnlyStyle,
-        [styles.success]: success
+        [styles.error]: error,
+        [styles.success]: success,
+        [styles.readOnly]: props.readOnly,
+        [styles.disabled]: props.disabled
       },
       getStyle(styles, size),
       wrapperClassName
diff --git a/packages/core/src/components/BaseInput/BaseInput.types.ts b/packages/core/src/components/BaseInput/BaseInput.types.ts
index 4ec530a2ec..bca33d94e7 100644
--- a/packages/core/src/components/BaseInput/BaseInput.types.ts
+++ b/packages/core/src/components/BaseInput/BaseInput.types.ts
@@ -11,7 +11,6 @@ export interface BaseInputProps extends BaseInputNativeInputProps, VibeComponent
   size?: InputSize;
   leftRender?: Renderer;
   rightRender?: Renderer;
-  withReadOnlyStyle?: boolean;
   success?: boolean;
   error?: boolean;
   wrapperRole?: AriaRole;