From 9a4fe47f700a5e32ccf444ac3288b3c3b3b27867 Mon Sep 17 00:00:00 2001
From: N1XUS <denis.severin@valor-software.com>
Date: Fri, 27 Oct 2023 21:22:53 +0300
Subject: [PATCH] fix(styles): input and select disabled placeholder [ci
 visual] (#4932)

---
 config/bundlesize.json                             |  2 +-
 packages/styles/src/mixins/_forms.scss             |  2 ++
 packages/styles/src/select.scss                    | 14 ++++++++++++++
 .../Components/Forms/input/primary.example.html    |  2 +-
 .../stories/Components/select/cozy.example.html    |  4 ++--
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/config/bundlesize.json b/config/bundlesize.json
index 60612df555..54be665e4e 100644
--- a/config/bundlesize.json
+++ b/config/bundlesize.json
@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/packages/styles/dist/fundamental-styles.css",
-            "maxSize": "140 kB"
+            "maxSize": "150 kB"
         }
     ]
 }
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 7a980dea13..ecf269b154 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -239,6 +239,7 @@ $fd-input-field-height--compact: 1.625rem;
 
     @if ($supportsText) {
       &::placeholder {
+        opacity: 0;
         color: var(--fdInput_Non_Interactive_State_Placeholder_Color);
       }
     }
@@ -249,6 +250,7 @@ $fd-input-field-height--compact: 1.625rem;
 
     @if ($supportsText) {
       &::placeholder {
+        opacity: 0;
         color: var(--fdInput_Non_Interactive_State_Placeholder_Color);
       }
     }
diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
index e049d6f25a..eacc17aa55 100644
--- a/packages/styles/src/select.scss
+++ b/packages/styles/src/select.scss
@@ -63,11 +63,25 @@ $fd-select-padding-x-compact: 0.5rem;
         --fdSelect_Min_Width: 5rem;
       }
 
+      &[aria-selected='false'] {
+        .#{$block}__text-content {
+          visibility: hidden;
+        }
+      }
+
       .#{$block}__button {
         opacity: 0;
       }
     }
 
+    @include fd-disabled() {
+      &[aria-selected='false'] {
+        .#{$block}__text-content {
+          visibility: hidden;
+        }
+      }
+    }
+
     &[aria-selected='false'] {
       .#{$block}__text-content {
         font-style: italic;
diff --git a/packages/styles/stories/Components/Forms/input/primary.example.html b/packages/styles/stories/Components/Forms/input/primary.example.html
index 24f05a3381..f693af57f8 100644
--- a/packages/styles/stories/Components/Forms/input/primary.example.html
+++ b/packages/styles/stories/Components/Forms/input/primary.example.html
@@ -86,7 +86,7 @@
     <br />
     <div class="fd-form-item">
         <label class="fd-form-label" for="input-05">Disabled Input:</label>
-        <input class="fd-input" type="text" id="input-05" disabled value="Field placeholder text" placeholder="Field placeholder text">
+        <input class="fd-input" type="text" id="input-05" disabled placeholder="Field placeholder text">
     </div>
     <br />
     <div class="fd-form-item">
diff --git a/packages/styles/stories/Components/select/cozy.example.html b/packages/styles/stories/Components/select/cozy.example.html
index fb2ec2fb8b..eb5108159c 100644
--- a/packages/styles/stories/Components/select/cozy.example.html
+++ b/packages/styles/stories/Components/select/cozy.example.html
@@ -114,7 +114,7 @@
 </div>
 
 <div style="height: 100px">
-    <label class="fd-form-label" id="cozySelectLabel">Disabled, Placeholder text</label><br />
+    <label class="fd-form-label" id="cozySelectLabel">In disabled state placeholder should not be visible</label><br />
     <div class="fd-popover">
         <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
             <div class="fd-select">
@@ -137,7 +137,7 @@
 </div>
 
 <div style="height: 100px">
-    <label class="fd-form-label" id="cozySelectLabel">Read Only, Placeholder text</label><br />
+    <label class="fd-form-label" id="cozySelectLabel">In read-only state placeholder should not be visible</label><br />
     <div class="fd-popover">
         <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
             <div class="fd-select">