refactor(BaseInput): only use has for supported browsers, otherwise u…

…se class for wrapper
mondaycom · Apr 17, 2024 · 82d9597 · 82d9597
1 parent b5ecf9f
commit 82d9597
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 31 deletions.
diff --git a/packages/core/src/components/BaseInput/BaseInput.module.scss b/packages/core/src/components/BaseInput/BaseInput.module.scss
@@ -43,49 +43,105 @@
     border-color: var(--primary-text-color);
   }
 
-  &:has(.input:active, .input:focus) {
-    border-color: var(--primary-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 selector(:has(*)) {
+    &:has(.input:active, .input:focus) {
+      border-color: var(--primary-color);
+    }
 
-    .input {
+    &: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);
-  }
+    &:has(.input:disabled) {
+      cursor: not-allowed;
+      user-select: none;
+      border: none;
+      pointer-events: none;
+      background-color: var(--disabled-background-color);
 
-  &.success {
-    border-color: var(--positive-color);
+      .input {
+        background-color: var(--disabled-background-color);
+      }
+    }
 
-    &:hover {
+    &.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(*)) {
+    &:focus-within {
+      border-color: var(--primary-color);
+    }
 
-    &:hover {
-      border-color: var(--negative-color);
+    &.readOnly {
+      background-color: var(--allgrey-background-color);
+      border: none;
+
+      .input {
+        background-color: var(--allgrey-background-color);
+      }
     }
 
-    &:has(.input:active, .input:focus) {
+    &.disabled {
+      cursor: not-allowed;
+      user-select: none;
+      border: none;
+      pointer-events: none;
+      background-color: var(--disabled-background-color);
+
+      .input {
+        background-color: var(--disabled-background-color);
+      }
+    }
+
+    &.success {
+      border-color: var(--positive-color);
+
+      &:hover {
+        border-color: var(--positive-color);
+      }
+
+      &:focus-within {
+        border-color: var(--positive-color);
+      }
+    }
+
+    &.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
@@ -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
@@ -11,7 +11,6 @@ export interface BaseInputProps extends BaseInputNativeInputProps, VibeComponent
   size?: InputSize;
   leftRender?: Renderer;
   rightRender?: Renderer;
-  withReadOnlyStyle?: boolean;
   success?: boolean;
   error?: boolean;
   wrapperRole?: AriaRole;