pebble-web 2.11.0 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.11.0"
+    "pebble-shared": "^2.12.0"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "01d98aa328798929a0c1bf72ea073863271777ce"
+  "gitHead": "de48b77f535067ed0a9c6577c3cef146e5c65114"
 }

package/src/components/Input.tsx

@@ -6,6 +6,7 @@ import {
   labelStyle,
   wrapperStyle,
   messageStyle,
+  inputWrapperStyle,
   inputStyle,
   inputReadOnlyStyle,
   inputDisabledStyle,
@@ -67,6 +68,7 @@ class Input extends React.PureComponent<InputProps, InputState> {
       type,
       placeholder,
       className,
+      inputWrapperClassName,
       inputClassName,
       highlightClassName,
       loadingClassName,
@@ -80,12 +82,16 @@ class Input extends React.PureComponent<InputProps, InputState> {
       textArea,
       required,
       onClick,
-      loading
+      loading,
+      leftElement,
+      rightElement
     } = this.props;
     const { isFocused } = this.state;
 
     const _message = errorMessage || successMessage || message;
 
+    const _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
+
     const _inputClassName = cx(
       inputStyle,
       {
@@ -117,7 +123,12 @@ class Input extends React.PureComponent<InputProps, InputState> {
     );
 
     const labelClassName = cx(labelStyle, {
-      _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
+      _pebble_input_label_focused: !!(
+        isFocused ||
+        value ||
+        fixLabelAtTop ||
+        leftElement
+      )
     });
 
     const _wrapperStyle = cx(
@@ -137,11 +148,25 @@ class Input extends React.PureComponent<InputProps, InputState> {
         onBlur={this.removeFocus}
         onClick={onClick}
       >
-        {this.props.textArea ? (
-          <textarea {..._inputProps} {...this.props.inputProps} />
-        ) : (
-          <input type={type} {..._inputProps} {...this.props.inputProps} />
-        )}
+        <div className={_inputWrapperClassName}>
+          {leftElement?.()}
+
+          {this.props.textArea ? (
+            <textarea {..._inputProps} {...this.props.inputProps} />
+          ) : (
+            <input type={type} {..._inputProps} {...this.props.inputProps} />
+          )}
+
+          {loading && (
+            <Loader
+              color={colors.violet.base}
+              scale={0.6}
+              className={_loadingStyle}
+            />
+          )}
+
+          {rightElement?.()}
+        </div>
 
         {!!placeholder && (
           <label className={labelClassName}>
@@ -159,14 +184,6 @@ class Input extends React.PureComponent<InputProps, InputState> {
           }}
         />
 
-        {loading && (
-          <Loader
-            color={colors.violet.base}
-            scale={0.6}
-            className={_loadingStyle}
-          />
-        )}
-
         {_message && (
           <div
             className={messageStyle}

package/src/components/__tests__/__snapshots__/phonenumberinput.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component: Select default snapshot 1`] = `
-.emotion-10 {
+.emotion-12 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -16,14 +16,25 @@ exports[`Component: Select default snapshot 1`] = `
   height: 68px;
 }
 
-.emotion-10._pebble_input_wrapper_textarea {
+.emotion-12._pebble_input_wrapper_textarea {
   height: 110px;
 }
 
-.emotion-8 {
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  border-bottom: 1px solid #EDEDED;
+}
+
+.emotion-9 {
   outline: 0;
   border: 0;
-  border-bottom: 1px solid #EDEDED;
   padding: 24px 0 12px 0;
   height: 48px;
   border-radius: 0;
@@ -36,43 +47,43 @@ exports[`Component: Select default snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-8:disabled {
+.emotion-9:disabled {
   background-color: #ffffff;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8:-moz-placeholder {
+.emotion-9:-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #E0E0E0;
 }
 
-.emotion-2 {
+.emotion-3 {
   height: 2px;
   background-color: #6161FF;
   margin-top: -2px;
@@ -83,21 +94,21 @@ exports[`Component: Select default snapshot 1`] = `
   z-index: 9;
 }
 
-.emotion-2._pebble_input_highlight_state,
-.emotion-2._pebble_input_highlight_focused {
+.emotion-3._pebble_input_highlight_state,
+.emotion-3._pebble_input_highlight_focused {
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-7 {
   position: relative;
 }
 
-.emotion-5 {
+.emotion-6 {
   cursor: pointer;
   position: relative;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -108,13 +119,13 @@ exports[`Component: Select default snapshot 1`] = `
   font-size: 10px;
 }
 
-.emotion-4.__pebble__select__open {
+.emotion-5.__pebble__select__open {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.emotion-11 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -144,7 +155,7 @@ exports[`Component: Select default snapshot 1`] = `
   color: #6B7785;
 }
 
-.emotion-7 {
+.emotion-8 {
   margin-bottom: 20px;
   width: 80px;
   margin-bottom: 0;
@@ -153,7 +164,6 @@ exports[`Component: Select default snapshot 1`] = `
 .emotion-1 {
   outline: 0;
   border: 0;
-  border-bottom: 1px solid #EDEDED;
   padding: 24px 0 12px 0;
   height: 48px;
   border-radius: 0;
@@ -205,7 +215,7 @@ exports[`Component: Select default snapshot 1`] = `
   color: #E0E0E0;
 }
 
-.emotion-3 {
+.emotion-4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -222,12 +232,12 @@ exports[`Component: Select default snapshot 1`] = `
   margin-bottom: 0;
 }
 
-.emotion-3._pebble_input_wrapper_textarea {
+.emotion-4._pebble_input_wrapper_textarea {
   height: 110px;
 }
 
 <div
-  className="emotion-11"
+  className="emotion-13"
 >
   <label
     className="_pebble_input_label_focused emotion-0"
@@ -235,10 +245,10 @@ exports[`Component: Select default snapshot 1`] = `
     Phone No.
   </label>
   <div
-    className="emotion-7"
+    className="emotion-8"
   >
     <div
-      className="emotion-6"
+      className="emotion-7"
     >
       <div
         style={
@@ -249,23 +259,27 @@ exports[`Component: Select default snapshot 1`] = `
         }
       >
         <div
-          className="emotion-5"
+          className="emotion-6"
           onClick={[Function]}
         >
           <div
-            className="emotion-3"
+            className="emotion-4"
             onBlur={[Function]}
             onFocus={[Function]}
           >
-            <input
-              className="emotion-1"
-              id="phone-select-input-test"
-              onChange={[Function]}
-              readOnly={true}
-              value="+1"
-            />
             <div
-              className="emotion-2 _pebble_input_highlight_read_only"
+              className="emotion-2"
+            >
+              <input
+                className="emotion-1"
+                id="phone-select-input-test"
+                onChange={[Function]}
+                readOnly={true}
+                value="+1"
+              />
+            </div>
+            <div
+              className="emotion-3 _pebble_input_highlight_read_only"
               style={
                 Object {
                   "backgroundColor": "#6161FF",
@@ -275,26 +289,30 @@ exports[`Component: Select default snapshot 1`] = `
             
           </div>
           <i
-            className="emotion-4 pi pi-arrow-drop-down"
+            className="emotion-5 pi pi-arrow-drop-down"
           />
         </div>
       </div>
     </div>
   </div>
   <div
-    className="emotion-10"
+    className="emotion-12"
     onBlur={[Function]}
     onFocus={[Function]}
   >
-    <input
-      className="emotion-8"
-      id="phone-test-input-test"
-      onChange={[Function]}
-      readOnly={false}
-      value=""
-    />
     <div
       className="emotion-2"
+    >
+      <input
+        className="emotion-9"
+        id="phone-test-input-test"
+        onChange={[Function]}
+        readOnly={false}
+        value=""
+      />
+    </div>
+    <div
+      className="emotion-3"
       style={
         Object {
           "backgroundColor": "#6161FF",