From b8592c0854992fdbb2f8f9b8474f62697bcb46e4 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Thu, 24 Oct 2024 10:05:03 +0530
Subject: [PATCH] fix: disabled background color for textfield

affects: @medly-components/core
---
 .../__snapshots__/SingleSelect.test.tsx.snap  | 20 ++++++
 .../Styled/InnerWrapper/outlined.styled.tsx   |  3 +
 .../__snapshots__/TextField.test.tsx.snap     | 65 +++++++++++++++++++
 3 files changed, 88 insertions(+)

diff --git a/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
index 18544353a..8d07027ec 100644
--- a/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
+++ b/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
@@ -7053,6 +7053,11 @@ exports[`SingleSelect component with outlined variant should render disabled sta
   color: #C7D0D8;
 }
 
+.c3 input:disabled,
+.c3 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c3::after {
   content: '';
   box-sizing: border-box;
@@ -7561,6 +7566,11 @@ exports[`SingleSelect component with outlined variant should render properly 1`]
   color: #C7D0D8;
 }
 
+.c3 input:disabled,
+.c3 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c3::after {
   content: '';
   box-sizing: border-box;
@@ -8034,6 +8044,11 @@ exports[`SingleSelect component with outlined variant should render properly whe
   color: #C7D0D8;
 }
 
+.c3 input:disabled,
+.c3 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c3::after {
   content: '';
   box-sizing: border-box;
@@ -8711,6 +8726,11 @@ exports[`SingleSelect component with outlined variant should render with label p
   color: #C7D0D8;
 }
 
+.c3 input:disabled,
+.c3 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c3::after {
   content: '';
   box-sizing: border-box;
diff --git a/packages/core/src/components/TextField/Styled/InnerWrapper/outlined.styled.tsx b/packages/core/src/components/TextField/Styled/InnerWrapper/outlined.styled.tsx
index 00be10b4e..8a7c7e53e 100644
--- a/packages/core/src/components/TextField/Styled/InnerWrapper/outlined.styled.tsx
+++ b/packages/core/src/components/TextField/Styled/InnerWrapper/outlined.styled.tsx
@@ -12,6 +12,9 @@ export const outlinedStyle = ({ outlined, disabled, isErrorPresent }: InnerWrapp
             &::placeholder {
                 color: ${outlined.default.placeholderColor};
             }
+            &:disabled {
+                box-shadow: 0 0 0 100000px ${outlined.disabled.bgColor} inset;
+            }
         }
         &::after {
             content: '';
diff --git a/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 5550372a6..04a23042a 100644
--- a/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -12234,6 +12234,11 @@ exports[`TextField with outlined variant and with label should render default st
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -12572,6 +12577,11 @@ exports[`TextField with outlined variant and with label should render disabled s
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -12886,6 +12896,11 @@ exports[`TextField with outlined variant and with label should render focus stat
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -13184,6 +13199,11 @@ exports[`TextField with outlined variant and without label should render default
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -13475,6 +13495,11 @@ exports[`TextField with outlined variant and without label should render disable
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -13742,6 +13767,11 @@ exports[`TextField with outlined variant and without label should render focus s
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -14080,6 +14110,11 @@ exports[`TextField with outlined variant should render error state properly 1`]
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -14455,6 +14490,11 @@ exports[`TextField with outlined variant should render error state properly with
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -14908,6 +14948,11 @@ exports[`TextField with outlined variant should render properly with custom bord
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -15269,6 +15314,11 @@ exports[`TextField with outlined variant should render properly with custom disa
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -15596,6 +15646,11 @@ exports[`TextField with outlined variant should render properly with multiline 1
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -15956,6 +16011,11 @@ exports[`TextField with outlined variant should render properly with prefix 1`]
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;
@@ -16333,6 +16393,11 @@ exports[`TextField with outlined variant should render properly with suffix 1`]
   color: #C7D0D8;
 }
 
+.c1 input:disabled,
+.c1 textarea:disabled {
+  box-shadow: 0 0 0 100000px #ffffff inset;
+}
+
 .c1::after {
   content: '';
   box-sizing: border-box;