fix(styles): input and select disabled placeholder [ci visual]

SAP · Oct 27, 2023 · 004b2c1 · 004b2c1
1 parent 7b9fc95
commit 004b2c1
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">