fix(input, select, combobox): Unifying placeholder color

Fixes #866 Signed-off-by: Bartosz Bobin <bartosz.bobin@dynatrace.com>
dynatrace-oss · Jul 17, 2020 · 95f3b7d · 95f3b7d
1 parent 356026e
commit 95f3b7d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/libs/barista-components/core/src/style/_form-control.scss b/libs/barista-components/core/src/style/_form-control.scss
@@ -66,3 +66,12 @@
   box-sizing: border-box;
   white-space: normal;
 }
+
+@mixin dt-form-control-placeholder() {
+  opacity: 1; // Because it's different in eg.: Firefox
+  color: $placeholdercolor;
+}
+
+@mixin dt-form-control-disabled-placeholder() {
+  color: $disabledcolor;
+}
diff --git a/libs/barista-components/core/src/style/_variables.scss b/libs/barista-components/core/src/style/_variables.scss
@@ -16,6 +16,7 @@ $textcolor: $gray-700;
 $focuscolor: $gray-300;
 $linkcolor: $turquoise-600;
 $disabledcolor: $gray-300;
+$placeholdercolor: $gray-500;
 
 $border-radius: 3px;
 $focus-outline-width: 2px;

diff --git a/libs/barista-components/experimental/combobox/src/combobox.scss b/libs/barista-components/experimental/combobox/src/combobox.scss
@@ -41,7 +41,7 @@
 
   .dt-combobox-input,
   .dt-combobox-input::placeholder {
-    color: $disabledcolor;
+    @include dt-form-control-disabled-placeholder();
   }
 }
 
@@ -77,6 +77,7 @@
 
 .dt-combobox-input::placeholder {
   @include dt-main-font();
+  @include dt-form-control-placeholder();
 }
 
 .dt-combobox-postfix {

diff --git a/libs/barista-components/input/src/input.scss b/libs/barista-components/input/src/input.scss
@@ -23,6 +23,14 @@
   outline: none;
   @include dt-form-control();
 
+  &::placeholder {
+    @include dt-form-control-placeholder();
+  }
+
+  &[disabled]::placeholder {
+    @include dt-form-control-disabled-placeholder();
+  }
+
   &:hover:not([disabled]) {
     border-color: $gray-500;
   }

diff --git a/libs/barista-components/select/src/select.scss b/libs/barista-components/select/src/select.scss
@@ -23,8 +23,12 @@ $dt-select-panel-min-width: 112px !default;
   }
 
   &.dt-select-disabled {
-    background-color: $gray-100;
+    background-color: $gray-130;
     color: $disabledcolor;
+
+    .dt-select-value .dt-select-placeholder {
+      @include dt-form-control-disabled-placeholder();
+    }
   }
 
   &.dt-select-open {
@@ -56,6 +60,10 @@ $dt-select-panel-min-width: 112px !default;
   // 29px to give the text a bit more room to breath. Safari breaks line with
   // 30 px (30px is the trigger size)
   width: calc(100% - 29px);
+
+  .dt-select-placeholder {
+    @include dt-form-control-placeholder();
+  }
 }
 
 .dt-select-value-text {