fix(NumberInput): correct disabled input and text styles (#6742)

* fix(number-input): set light disabled number input background color * fix(NumberInput): add disabled label and helper text classes Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 28, 2020 · 91d8159 · 91d8159
1 parent 3d937a0
commit 91d8159
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -157,6 +157,13 @@
     background-color: $field-02;
   }
 
+  .#{$prefix}--number--light input[type='number']:disabled,
+  .#{$prefix}--number--light
+    .#{$prefix}--number--readonly
+    input[type='number'] {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--number--mobile {
     width: auto;
     min-width: rem(144px);

diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
@@ -355,11 +355,16 @@ class NumberInput extends Component {
       );
     }
 
+    const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+      [`${prefix}--form__helper-text--disabled`]: disabled,
+    });
+
     const helper = helperText ? (
-      <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+      <div className={helperTextClasses}>{helperText}</div>
     ) : null;
 
     const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--label--disabled`]: disabled,
       [`${prefix}--visually-hidden`]: hideLabel,
     });