fix(number-input): add number input disabled styles back in (carbon-d…

…esign-system#447) * fix(number-input): add number input disabled styles back in * fix(number-input): add support for invalid number input * fix(number-input): change example text
j1mie · Nov 30, 2017 · 8ca3986 · 8ca3986
1 parent 546a7e4
commit 8ca3986
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
@@ -30,6 +30,17 @@
     &:focus {
       @include focus-outline('border');
     }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .bx--number__controls {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
   }
 
   .bx--number input[type='number'] {
@@ -87,3 +98,12 @@
     }
   }
 }
+
+.bx--number[data-invalid] {
+  input[type='number'] {
+    box-shadow: 0 2px 0px 0px $support-01;
+  }
+  ~ .bx--form-requirement {
+    max-height: rem(200px);
+  }
+}
diff --git a/src/components/number-input/number-input.html b/src/components/number-input/number-input.html
@@ -16,3 +16,25 @@
     </div>
   </div>
 </div>
+
+<div class="bx--form-item">
+  <label for="number-input" class="bx--label">Number Input label</label>
+  <div data-invalid data-numberinput class="bx--number">
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <div class="bx--number__controls">
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div class="bx--form-requirement">
+    Invalid number
+  </div>
+</div>