From 701a82e89655ff0727da590da238711a8b029718 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Wed, 5 Jun 2019 10:18:58 +0200
Subject: [PATCH] fix: fix `disabled` #date-picker input

---
 .../src/components/date-picker/DatePickerInput.js    |  2 +-
 .../__tests__/__snapshots__/DatePicker.test.js.snap  | 12 ++++++++++++
 .../style/themes/dnb-date-picker-theme-ui.scss       |  4 ++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
index 6a2c06010b2..1be72b4472b 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
+++ b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
@@ -512,7 +512,7 @@ export default class DatePickerInput extends PureComponent {
     return (
       <Input
         id={`${id}__input`}
-        input_state={focusState}
+        input_state={disabled ? 'disabled' : focusState}
         inputElement={this.renderInputElement}
         disabled={disabled}
         status={!opened ? status : null}
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
index f943c02a4dc..3c5535de8e6 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -840,6 +840,18 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = `
   .dnb-date-picker__input[value*='8'] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='9'],
   .dnb-date-picker__input[value*='9'] ~ .dnb-date-picker--separator {
     color: var(--color-emerald-green); }
+  .dnb-date-picker__input[value*='0'][disabled],
+  .dnb-date-picker__input[value*='0'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='1'][disabled],
+  .dnb-date-picker__input[value*='1'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='2'][disabled],
+  .dnb-date-picker__input[value*='2'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='3'][disabled],
+  .dnb-date-picker__input[value*='3'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='4'][disabled],
+  .dnb-date-picker__input[value*='4'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='5'][disabled],
+  .dnb-date-picker__input[value*='5'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='6'][disabled],
+  .dnb-date-picker__input[value*='6'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='7'][disabled],
+  .dnb-date-picker__input[value*='7'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='8'][disabled],
+  .dnb-date-picker__input[value*='8'][disabled] ~ .dnb-date-picker--separator, .dnb-date-picker__input[value*='9'][disabled],
+  .dnb-date-picker__input[value*='9'][disabled] ~ .dnb-date-picker--separator {
+    color: var(--input-text-color--disabled); }
   .dnb-date-picker__container {
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
     border-radius: 0.25rem;
diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss b/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss
index 857ec027f91..56a85615ced 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss
@@ -29,6 +29,10 @@
     & ~ .dnb-date-picker--separator {
       color: var(--color-emerald-green);
     }
+    &[disabled],
+    &[disabled] ~ .dnb-date-picker--separator {
+      color: var(--input-text-color--disabled);
+    }
   }
 
   &__container {