fix: fix disabled #date-picker input

dnbexperience · Jun 5, 2019 · 701a82e · 701a82e
1 parent cc90475
commit 701a82e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/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
@@ -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 {