fix(components): fixed some issues with the inputs (#960)

* fix(components): fixed some order issues on the inputs

* fix(package): reverted back to version

* fix(number-input): arrows being off on invalid

* fix(number-input): fixed failing test

* fix(number-inputs): actually fixed tests

Author: marijohannessen

src/components/DatePickerInput/DatePickerInput.js

@@ -97,9 +97,9 @@ export default class DatePickerInput extends Component {
 
     return (
       <div className="bx--date-picker-container">
-        {label}
         {datePickerIcon}
         {input}
+        {label}
         {error}
       </div>
     );

src/components/NumberInput/NumberInput-test.js

@@ -191,8 +191,8 @@ describe('NumberInput', () => {
       );
 
       const input = wrapper.find('input');
-      const upArrow = wrapper.find('.up-icon').parent();
-      const downArrow = wrapper.find('.down-icon').parent();
+      const upArrow = wrapper.find('button.up-icon');
+      const downArrow = wrapper.find('button.down-icon');
 
       it('should be disabled when numberInput is disabled', () => {
         expect(upArrow.prop('disabled')).toEqual(true);

src/components/NumberInput/NumberInput.js

@@ -149,7 +149,6 @@ export default class NumberInput extends Component {
     const buttonProps = {
       disabled,
       type: 'button',
-      className: 'bx--number__control-btn',
     };
 
     const inputWrapperProps = {};
@@ -161,41 +160,43 @@ export default class NumberInput extends Component {
 
     return (
       <div className="bx--form-item">
-        <label htmlFor={id} className="bx--label">
-          {label}
-        </label>
         <div className={numberInputClasses} {...inputWrapperProps}>
-          <input
-            type="number"
-            pattern="[0-9]*"
-            {...other}
-            {...props}
-            ref={this._handleInputRef}
-          />
           <div className="bx--number__controls">
             <button
+              className="bx--number__control-btn up-icon"
               {...buttonProps}
               onClick={evt => this.handleArrowClick(evt, 'up')}>
               <Icon
                 className="up-icon"
                 name="caret--up"
                 description={this.props.iconDescription}
-                viewBox="0 2 10 5"
+                viewBox="0 0 10 5"
               />
             </button>
             <button
+              className="bx--number__control-btn down-icon"
               {...buttonProps}
               onClick={evt => this.handleArrowClick(evt, 'down')}>
               <Icon
                 className="down-icon"
                 name="caret--down"
-                viewBox="0 2 10 5"
+                viewBox="0 0 10 5"
                 description={this.props.iconDescription}
               />
             </button>
           </div>
+          <input
+            type="number"
+            pattern="[0-9]*"
+            {...other}
+            {...props}
+            ref={this._handleInputRef}
+          />
+          <label htmlFor={id} className="bx--label">
+            {label}
+          </label>
+          {error}
         </div>
-        {error}
       </div>
     );
   }

src/components/TextArea/TextArea.js

@@ -58,8 +58,8 @@ const TextArea = ({
 
   return (
     <div className="bx--form-item">
-      {label}
       {input}
+      {label}
       {error}
     </div>
   );

src/components/TextInput/TextInput.js

@@ -67,8 +67,8 @@ const TextInput = ({
 
   return (
     <div className="bx--form-item">
-      {label}
       {input}
+      {label}
       {error}
     </div>
   );

src/components/TimePicker/TimePicker.js

@@ -129,7 +129,6 @@ export default class TimePicker extends Component {
 
     return (
       <div className="bx--form-item">
-        {label}
         <div className={timePickerClasses}>
           <div className="bx--time-picker__input">
             <input
@@ -138,6 +137,7 @@ export default class TimePicker extends Component {
               data-invalid={invalid ? invalid : undefined}
               className="bx--time-picker__input-field"
             />
+            {label}
             {error}
           </div>
           {children}

yarn.lock

@@ -2761,9 +2761,8 @@ caniuse-lite@^1.0.30000791, caniuse-lite@^1.0.30000792:
   version "1.0.30000792"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332"
 
-carbon-components@^8.20.0:
-  version "8.23.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-8.23.0.tgz#928a6b600d705b1a9a746de4739074f5599aa271"
+"carbon-components@file:../carbon-components":
+  version "7.2.1"
   dependencies:
     carbon-icons "^6.0.4"
     flatpickr "2.6.3"