From f14983037ec582666ef01d20bf34981a99e8103b Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 18 May 2020 21:48:21 -0400
Subject: [PATCH 01/14] re-align RadioListItem button to top of component

---
 src/components/Radio/RadioListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Radio/RadioListItem.js b/src/components/Radio/RadioListItem.js
index ab1d07238..71df9550d 100644
--- a/src/components/Radio/RadioListItem.js
+++ b/src/components/Radio/RadioListItem.js
@@ -25,7 +25,7 @@ const RadioListItem = React.memo(function RadioListItem({
         id={index}
         css={`
           flex-shrink: 0;
-          margin-top: ${2 * GU}px;
+          margin-top: 1px;
         `}
       />
       <div

From 036f642d1c8ec4b26aa4dc92133ebf765b23cedc Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Fri, 22 May 2020 10:47:28 -0400
Subject: [PATCH 02/14] remove margin-top on RadioListItem Radio button

---
 src/components/Radio/RadioListItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Radio/RadioListItem.js b/src/components/Radio/RadioListItem.js
index 71df9550d..92f84ba11 100644
--- a/src/components/Radio/RadioListItem.js
+++ b/src/components/Radio/RadioListItem.js
@@ -25,7 +25,6 @@ const RadioListItem = React.memo(function RadioListItem({
         id={index}
         css={`
           flex-shrink: 0;
-          margin-top: 1px;
         `}
       />
       <div

From e88a74a600844d136ef376ab748e1ff0e524bf81 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Sat, 23 May 2020 22:31:33 -0400
Subject: [PATCH 03/14] Update TextInput API

---
 devbox/apps/Input.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/devbox/apps/Input.js b/devbox/apps/Input.js
index a547e6491..6a2cf8087 100644
--- a/devbox/apps/Input.js
+++ b/devbox/apps/Input.js
@@ -27,25 +27,23 @@ function App() {
         </form>
         <TextInput
           css="width: 80px"
-          adornment="ETH"
-          adornmentPosition="end"
-          adornmentSettings={{
-            width: 55,
-            padding: 8,
+          adornment={{
+            end: 'ETH',
+            endWidth: 55,
+            endPadding: 8,
           }}
         />
         <TextInput
           css="width: 80px"
-          adornment="$"
-          adornmentPosition="start"
-          adornmentSettings={{
-            width: 36,
-            padding: 8,
+          adornment={{
+            start: '$',
+            startWidth: 36,
+            startPadding: 8,
           }}
         />
         <TextInput />
-        <TextInput adornment={<IconBlank />} adornmentPosition="start" />
-        <TextInput adornment={<IconBlank />} adornmentPosition="end" />
+        <TextInput adornment={{ start: <IconBlank /> }} />
+        <TextInput adornment={{ end: <IconBlank /> }} />
         <TextInput.Multiline />
         <SearchInput
           value={searchTerm}

From a37a38ac720f8fd5f7277eb40e8163ddf7e488ef Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Sat, 23 May 2020 22:35:44 -0400
Subject: [PATCH 04/14] Update TextInput API

---
 src/components/Input/SearchInput.js |  40 ++++----
 src/components/Input/TextInput.js   | 142 ++++++++++++++++------------
 src/components/TextCopy/TextCopy.js |  25 +++--
 3 files changed, 120 insertions(+), 87 deletions(-)

diff --git a/src/components/Input/SearchInput.js b/src/components/Input/SearchInput.js
index b6b716afe..cad9a7fc5 100644
--- a/src/components/Input/SearchInput.js
+++ b/src/components/Input/SearchInput.js
@@ -32,26 +32,26 @@ const SearchInput = React.forwardRef(({ onChange, ...props }, ref) => {
   return (
     <TextInput
       ref={_ref}
-      adornment={
-        (props.value || '') === EMPTY ? (
-          <IconSearch
-            css={`
-              color: ${theme.surfaceIcon};
-            `}
-          />
-        ) : (
-          <ButtonIcon
-            onClick={handleClearClick}
-            label="Clear search input"
-            css={`
-              color: ${theme.surfaceIcon};
-            `}
-          >
-            <IconCross />
-          </ButtonIcon>
-        )
-      }
-      adornmentPosition="end"
+      adornment={{
+        end:
+          (props.value || '') === EMPTY ? (
+            <IconSearch
+              css={`
+                color: ${theme.surfaceIcon};
+              `}
+            />
+          ) : (
+            <ButtonIcon
+              onClick={handleClearClick}
+              label="Clear search input"
+              css={`
+                color: ${theme.surfaceIcon};
+              `}
+            >
+              <IconCross />
+            </ButtonIcon>
+          ),
+      }}
       onChange={handleChange}
       {...props}
     />
diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 6f3c3bcc9..05e87d7fb 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -84,78 +84,98 @@ TextInput.defaultProps = {
   type: 'text',
 }
 
+const Adornment = ({ adornment, position, padding }) => {
+  const theme = useTheme()
+  return (
+    <div
+      css={`
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        ${position === 'end' ? 'right' : 'left'}: ${padding}px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${theme.surfaceContentSecondary};
+      `}
+    >
+      {adornment}
+    </div>
+  )
+}
+Adornment.PropTypes = {
+  adornment: PropTypes.node,
+  position: PropTypes.oneOf(['start', 'end']),
+  padding: PropTypes.number,
+}
+
+Adornment.defaultProps = {
+  padding: 4,
+  position: 'start',
+}
+
 // Text input wrapped to allow adornments
-const WrapperTextInput = React.forwardRef(
-  (
-    {
-      adornment,
-      adornmentPosition,
-      adornmentSettings: {
-        width: adornmentWidth = 36,
-        padding: adornmentPadding = 4,
-      },
-      ...props
-    },
-    ref
-  ) => {
-    const theme = useTheme()
-    if (!adornment) {
-      return <TextInput ref={ref} {...props} />
-    }
-    return (
-      <div
+const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
+  if (!adornment) {
+    return <TextInput ref={ref} {...props} />
+  }
+
+  const hasAdornmentConfig =
+    typeof adornment === 'object' &&
+    adornment.constructor === Object &&
+    !React.isValidElement(adornment)
+  const {
+    start,
+    startPadding,
+    startWidth = 36,
+    end,
+    endPadding,
+    endWidth = 36,
+  } = hasAdornmentConfig ? adornment : { start: adornment }
+
+  return (
+    <div
+      css={`
+        display: inline-flex;
+        position: relative;
+        width: ${props.wide ? '100%' : 'max-content'};
+      `}
+    >
+      <TextInput
+        ref={ref}
         css={`
-          display: inline-flex;
-          position: relative;
-          width: ${props.wide ? '100%' : 'max-content'};
+          ${start && `padding-left: ${startWidth}`}
+          ${end && `padding-right: ${endWidth}`}
         `}
-      >
-        <TextInput
-          ref={ref}
-          css={`
-            ${adornmentPosition === 'end'
-              ? 'padding-right'
-              : 'padding-left'}: ${adornmentWidth - adornmentPadding * 2}px;
-          `}
-          {...props}
-        />
-        <div
-          css={`
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            height: 100%;
-            ${adornmentPosition === 'end'
-              ? 'right'
-              : 'left'}: ${adornmentPadding}px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: ${theme.surfaceContentSecondary};
-          `}
-        >
-          {adornment}
-        </div>
-      </div>
-    )
-  }
-)
+        {...props}
+      />
+      {start && (
+        <Adornment adornment={start} padding={startPadding} position="start" />
+      )}
+      {end && <Adornment adornment={end} padding={endPadding} position="end" />}
+    </div>
+  )
+})
 
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
-  adornment: PropTypes.node,
-  adornmentPosition: PropTypes.oneOf(['start', 'end']),
-  adornmentSettings: PropTypes.shape({
-    width: PropTypes.number,
-    padding: PropTypes.number,
-  }),
+  adornment: PropTypes.oneOf([
+    PropTypes.node,
+    PropTypes.shape({
+      start: PropTypes.node,
+      startWidth: PropTypes.number,
+      startPadding: PropTypes.number,
+      end: PropTypes.node,
+      endWidth: PropTypes.number,
+      endPadding: PropTypes.number,
+    }),
+  ]),
 }
 
 WrapperTextInput.defaultProps = {
   ...TextInput.defaultProps,
   adornment: null,
-  adornmentPosition: 'start',
-  adornmentSettings: {},
 }
 
 // <input type=number> (only for compat)
diff --git a/src/components/TextCopy/TextCopy.js b/src/components/TextCopy/TextCopy.js
index e7fa6fd9e..7e07c27c3 100644
--- a/src/components/TextCopy/TextCopy.js
+++ b/src/components/TextCopy/TextCopy.js
@@ -92,6 +92,25 @@ const TextCopy = React.memo(
         )}
         <TextInput
           ref={inputRef}
+          adornment={{
+            end: (
+              <ButtonIcon
+                onClick={handleCopy}
+                label="Copy"
+                css={`
+                  width: ${HEIGHT - 2}px;
+                  height: ${HEIGHT - 2}px;
+                  border-radius: 0;
+                  color: ${theme.surfaceIcon};
+                `}
+              >
+                <IconCopy />
+              </ButtonIcon>
+            ),
+            // Keep the button square
+            endWidth: HEIGHT - 2,
+            endPadding: 0,
+          }}
           adornment={
             <ButtonIcon
               onClick={handleCopy}
@@ -106,12 +125,6 @@ const TextCopy = React.memo(
               <IconCopy />
             </ButtonIcon>
           }
-          adornmentPosition="end"
-          adornmentSettings={{
-            // Keep the button square
-            width: HEIGHT - 2,
-            padding: 0,
-          }}
           autofocus={autofocus}
           onFocus={handleFocus}
           readOnly

From 4d417c100ee8cfc47889fa3559c5ddc09a93fa8c Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Sat, 23 May 2020 23:10:08 -0400
Subject: [PATCH 05/14] fix linting errors related to changes for #656

---
 src/components/Input/TextInput.js   |  6 +++---
 src/components/TextCopy/TextCopy.js | 14 --------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 05e87d7fb..2c3cc5c6f 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -84,7 +84,7 @@ TextInput.defaultProps = {
   type: 'text',
 }
 
-const Adornment = ({ adornment, position, padding }) => {
+const Adornment = React.memo(({ adornment, position, padding }) => {
   const theme = useTheme()
   return (
     <div
@@ -103,8 +103,8 @@ const Adornment = ({ adornment, position, padding }) => {
       {adornment}
     </div>
   )
-}
-Adornment.PropTypes = {
+})
+Adornment.propTypes = {
   adornment: PropTypes.node,
   position: PropTypes.oneOf(['start', 'end']),
   padding: PropTypes.number,
diff --git a/src/components/TextCopy/TextCopy.js b/src/components/TextCopy/TextCopy.js
index 7e07c27c3..51e05e640 100644
--- a/src/components/TextCopy/TextCopy.js
+++ b/src/components/TextCopy/TextCopy.js
@@ -111,20 +111,6 @@ const TextCopy = React.memo(
             endWidth: HEIGHT - 2,
             endPadding: 0,
           }}
-          adornment={
-            <ButtonIcon
-              onClick={handleCopy}
-              label="Copy"
-              css={`
-                width: ${HEIGHT - 2}px;
-                height: ${HEIGHT - 2}px;
-                border-radius: 0;
-                color: ${theme.surfaceIcon};
-              `}
-            >
-              <IconCopy />
-            </ButtonIcon>
-          }
           autofocus={autofocus}
           onFocus={handleFocus}
           readOnly

From e13e5fdc45f3c2317c08c134f2435682823cf9bd Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Sat, 23 May 2020 23:19:42 -0400
Subject: [PATCH 06/14] remove excessive type checking in TextInput component

---
 src/components/Input/TextInput.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 2c3cc5c6f..a4f442930 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -121,10 +121,6 @@ const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
     return <TextInput ref={ref} {...props} />
   }
 
-  const hasAdornmentConfig =
-    typeof adornment === 'object' &&
-    adornment.constructor === Object &&
-    !React.isValidElement(adornment)
   const {
     start,
     startPadding,
@@ -132,7 +128,7 @@ const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
     end,
     endPadding,
     endWidth = 36,
-  } = hasAdornmentConfig ? adornment : { start: adornment }
+  } = React.isValidElement(adornment) ? { start: adornment } : adornment
 
   return (
     <div

From 82d8a351e84d456341844b6d46ea329ec966c100 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 25 May 2020 22:03:32 -0400
Subject: [PATCH 07/14] make TextInput API backward compatible with old version

---
 src/components/Input/TextInput.js | 90 +++++++++++++++++++------------
 1 file changed, 55 insertions(+), 35 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index a4f442930..daa95dad5 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -104,6 +104,7 @@ const Adornment = React.memo(({ adornment, position, padding }) => {
     </div>
   )
 })
+
 Adornment.propTypes = {
   adornment: PropTypes.node,
   position: PropTypes.oneOf(['start', 'end']),
@@ -112,47 +113,60 @@ Adornment.propTypes = {
 
 Adornment.defaultProps = {
   padding: 4,
-  position: 'start',
 }
 
 // Text input wrapped to allow adornments
-const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
-  if (!adornment) {
-    return <TextInput ref={ref} {...props} />
-  }
-
-  const {
-    start,
-    startPadding,
-    startWidth = 36,
-    end,
-    endPadding,
-    endWidth = 36,
-  } = React.isValidElement(adornment) ? { start: adornment } : adornment
+const WrapperTextInput = React.forwardRef(
+  ({ adornment, adornmentPosition, adornmentSettings, ...props }, ref) => {
+    if (!adornment) {
+      return <TextInput ref={ref} {...props} />
+    }
+
+    const {
+      start,
+      startPadding,
+      startWidth = 36,
+      end,
+      endPadding,
+      endWidth = 36,
+    } = React.isValidElement(adornment)
+      ? {
+          start: adornment,
+          startPadding: adornmentSettings.padding,
+          startWidth: adornmentSettings.width,
+        }
+      : adornment
 
-  return (
-    <div
-      css={`
-        display: inline-flex;
-        position: relative;
-        width: ${props.wide ? '100%' : 'max-content'};
-      `}
-    >
-      <TextInput
-        ref={ref}
+    return (
+      <div
         css={`
-          ${start && `padding-left: ${startWidth}`}
-          ${end && `padding-right: ${endWidth}`}
+          display: inline-flex;
+          position: relative;
+          width: ${props.wide ? '100%' : 'max-content'};
         `}
-        {...props}
-      />
-      {start && (
-        <Adornment adornment={start} padding={startPadding} position="start" />
-      )}
-      {end && <Adornment adornment={end} padding={endPadding} position="end" />}
-    </div>
-  )
-})
+      >
+        <TextInput
+          ref={ref}
+          css={`
+            ${start && `padding-left: ${startWidth}`}
+            ${end && `padding-right: ${endWidth}`}
+          `}
+          {...props}
+        />
+        {start && (
+          <Adornment
+            adornment={start}
+            padding={startPadding}
+            position="start"
+          />
+        )}
+        {end && (
+          <Adornment adornment={end} padding={endPadding} position="end" />
+        )}
+      </div>
+    )
+  }
+)
 
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
@@ -167,11 +181,17 @@ WrapperTextInput.propTypes = {
       endPadding: PropTypes.number,
     }),
   ]),
+  adornmentPosition: PropTypes.oneOf(['start', 'end']),
+  adornmentSettings: PropTypes.shape({
+    width: PropTypes.number,
+    padding: PropTypes.number,
+  }),
 }
 
 WrapperTextInput.defaultProps = {
   ...TextInput.defaultProps,
   adornment: null,
+  adornmentSettings: {},
 }
 
 // <input type=number> (only for compat)

From 02328fa6c58f399ab992bad34c8f52bd9b6279d7 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 25 May 2020 22:15:45 -0400
Subject: [PATCH 08/14] add dynamic adornment position compatibility with
 deprecated TextInput API

---
 src/components/Input/TextInput.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index daa95dad5..4ed49e283 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -131,9 +131,9 @@ const WrapperTextInput = React.forwardRef(
       endWidth = 36,
     } = React.isValidElement(adornment)
       ? {
-          start: adornment,
-          startPadding: adornmentSettings.padding,
-          startWidth: adornmentSettings.width,
+          [adornmentPosition]: adornment,
+          [`${adornmentPosition}Padding`]: adornmentSettings.padding,
+          [`${adornmentPosition}Width`]: adornmentSettings.width,
         }
       : adornment
 
@@ -191,6 +191,7 @@ WrapperTextInput.propTypes = {
 WrapperTextInput.defaultProps = {
   ...TextInput.defaultProps,
   adornment: null,
+  adornmentPosition: 'start',
   adornmentSettings: {},
 }
 

From 588e90ba6136758107439d6fd4c483557f5ef215 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 25 May 2020 23:25:38 -0400
Subject: [PATCH 09/14] re-add deprecated examples in Input.js and fix backward
 compatibility bugs and add deprecation warnings for TextInput

---
 devbox/apps/Input.js              |  21 ++++++
 src/components/Input/TextInput.js | 114 +++++++++++++++++-------------
 src/utils/environment.js          |   1 +
 3 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/devbox/apps/Input.js b/devbox/apps/Input.js
index 6a2cf8087..68eb5fbcb 100644
--- a/devbox/apps/Input.js
+++ b/devbox/apps/Input.js
@@ -44,6 +44,27 @@ function App() {
         <TextInput />
         <TextInput adornment={{ start: <IconBlank /> }} />
         <TextInput adornment={{ end: <IconBlank /> }} />
+        <TextInput
+          css="width: 80px"
+          adornment="ETH"
+          adornmentPosition="end"
+          adornmentSettings={{
+            width: 55,
+            padding: 8,
+          }}
+        />
+        <TextInput
+          css="width: 80px"
+          adornment="$"
+          adornmentPosition="start"
+          adornmentSettings={{
+            width: 36,
+            padding: 8,
+          }}
+        />
+        <TextInput />
+        <TextInput adornment={<IconBlank />} adornmentPosition="start" />
+        <TextInput adornment={<IconBlank />} adornmentPosition="end" />
         <TextInput.Multiline />
         <SearchInput
           value={searchTerm}
diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 4ed49e283..5d640112b 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTheme } from '../../theme'
-import { warnOnce } from '../../utils'
+import { warn } from '../../utils'
 import { textStyle, GU, RADIUS } from '../../style'
 
 // Simple text input
@@ -115,58 +115,76 @@ Adornment.defaultProps = {
   padding: 4,
 }
 
+const deprecationWarning = (adornmentPosition, adornmentSettings) => {
+  const warnings = []
+  if (adornmentPosition) {
+    warn(
+      'TextInput: The "adornmentPosition" prop is deprecated. Please use the "adornment" prop instead.'
+    )
+  }
+  if (adornmentSettings) {
+    warn(
+      'TextInput: The "adornmentSettings" props is deprecated. Please use the "adornment" prop instead.'
+    )
+  }
+}
+
 // Text input wrapped to allow adornments
-const WrapperTextInput = React.forwardRef(
-  ({ adornment, adornmentPosition, adornmentSettings, ...props }, ref) => {
-    if (!adornment) {
-      return <TextInput ref={ref} {...props} />
+const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
+  deprecationWarning(props.adornmentPosition, props.adornmentSettings)
+
+  if (!adornment) {
+    return <TextInput ref={ref} {...props} />
+  }
+
+  let adornmentConfig = adornment
+
+  const usingDeprecatedAPI =
+    React.isValidElement(adornment) ||
+    typeof adornment === 'string' ||
+    (typeof adornment === 'object' && adornment.constructor === Array)
+
+  if (usingDeprecatedAPI) {
+    const { adornmentPosition = 'start', adornmentSettings = {} } = props
+    adornmentConfig = {
+      [adornmentPosition]: adornment,
+      [`${adornmentPosition}Padding`]: adornmentSettings.padding,
+      [`${adornmentPosition}Width`]: adornmentSettings.width,
     }
+  }
 
-    const {
-      start,
-      startPadding,
-      startWidth = 36,
-      end,
-      endPadding,
-      endWidth = 36,
-    } = React.isValidElement(adornment)
-      ? {
-          [adornmentPosition]: adornment,
-          [`${adornmentPosition}Padding`]: adornmentSettings.padding,
-          [`${adornmentPosition}Width`]: adornmentSettings.width,
-        }
-      : adornment
+  const {
+    start,
+    startPadding,
+    startWidth = 36,
+    end,
+    endPadding,
+    endWidth = 36,
+  } = adornmentConfig
 
-    return (
-      <div
+  return (
+    <div
+      css={`
+        display: inline-flex;
+        position: relative;
+        width: ${props.wide ? '100%' : 'max-content'};
+      `}
+    >
+      <TextInput
+        ref={ref}
         css={`
-          display: inline-flex;
-          position: relative;
-          width: ${props.wide ? '100%' : 'max-content'};
+          ${start && `padding-left: ${startWidth}`}
+          ${end && `padding-right: ${endWidth}`}
         `}
-      >
-        <TextInput
-          ref={ref}
-          css={`
-            ${start && `padding-left: ${startWidth}`}
-            ${end && `padding-right: ${endWidth}`}
-          `}
-          {...props}
-        />
-        {start && (
-          <Adornment
-            adornment={start}
-            padding={startPadding}
-            position="start"
-          />
-        )}
-        {end && (
-          <Adornment adornment={end} padding={endPadding} position="end" />
-        )}
-      </div>
-    )
-  }
-)
+        {...props}
+      />
+      {start && (
+        <Adornment adornment={start} padding={startPadding} position="start" />
+      )}
+      {end && <Adornment adornment={end} padding={endPadding} position="end" />}
+    </div>
+  )
+})
 
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
@@ -191,8 +209,6 @@ WrapperTextInput.propTypes = {
 WrapperTextInput.defaultProps = {
   ...TextInput.defaultProps,
   adornment: null,
-  adornmentPosition: 'start',
-  adornmentSettings: {},
 }
 
 // <input type=number> (only for compat)
diff --git a/src/utils/environment.js b/src/utils/environment.js
index 4a7a37cbc..88a68db07 100644
--- a/src/utils/environment.js
+++ b/src/utils/environment.js
@@ -2,6 +2,7 @@ import { noop } from './miscellaneous'
 
 // Return a function that executes `cb` when on the dev environment
 export function devOnly(cb) {
+  return cb
   return process.env.NODE_ENV === 'development' ? cb : noop
 }
 

From fb1f326a420db66a6cc8a9f7e2ed9ff8f1150bd7 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 25 May 2020 23:27:29 -0400
Subject: [PATCH 10/14] fix linting errors

---
 src/components/Input/TextInput.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 5d640112b..73f8d5a31 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTheme } from '../../theme'
-import { warn } from '../../utils'
+import { warn, warnOnce } from '../../utils'
 import { textStyle, GU, RADIUS } from '../../style'
 
 // Simple text input
@@ -116,7 +116,6 @@ Adornment.defaultProps = {
 }
 
 const deprecationWarning = (adornmentPosition, adornmentSettings) => {
-  const warnings = []
   if (adornmentPosition) {
     warn(
       'TextInput: The "adornmentPosition" prop is deprecated. Please use the "adornment" prop instead.'

From 31ed83eb5163881804fb93800f9738348d13be71 Mon Sep 17 00:00:00 2001
From: steven <stvtortora@gmail.com>
Date: Mon, 25 May 2020 23:29:06 -0400
Subject: [PATCH 11/14] remove changes to environment.js

---
 src/utils/environment.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils/environment.js b/src/utils/environment.js
index 88a68db07..4a7a37cbc 100644
--- a/src/utils/environment.js
+++ b/src/utils/environment.js
@@ -2,7 +2,6 @@ import { noop } from './miscellaneous'
 
 // Return a function that executes `cb` when on the dev environment
 export function devOnly(cb) {
-  return cb
   return process.env.NODE_ENV === 'development' ? cb : noop
 }
 

From 4f22c4214819d1364bcbb2ba9dd778384618c428 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <enrique@aragon.one>
Date: Wed, 15 Jul 2020 10:11:41 -0400
Subject: [PATCH 12/14] Mark new deprecated props

Co-authored-by: Brett Sun <qisheng.brett.sun@gmail.com>
---
 src/components/Input/TextInput.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 73f8d5a31..771e732b4 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -188,7 +188,6 @@ const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
   adornment: PropTypes.oneOf([
-    PropTypes.node,
     PropTypes.shape({
       start: PropTypes.node,
       startWidth: PropTypes.number,
@@ -197,7 +196,12 @@ WrapperTextInput.propTypes = {
       endWidth: PropTypes.number,
       endPadding: PropTypes.number,
     }),
+    
+    // deprecated
+    PropTypes.node,
   ]),
+
+  // deprecated
   adornmentPosition: PropTypes.oneOf(['start', 'end']),
   adornmentSettings: PropTypes.shape({
     width: PropTypes.number,

From aa2b33f07f063df32fcb9212ad86339e3ffcebf5 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Wed, 15 Jul 2020 11:20:49 -0400
Subject: [PATCH 13/14] Inline deprecation warning

---
 src/components/Input/TextInput.js | 124 +++++++++++++++---------------
 1 file changed, 64 insertions(+), 60 deletions(-)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 771e732b4..790080492 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -115,75 +115,79 @@ Adornment.defaultProps = {
   padding: 4,
 }
 
-const deprecationWarning = (adornmentPosition, adornmentSettings) => {
-  if (adornmentPosition) {
-    warn(
-      'TextInput: The "adornmentPosition" prop is deprecated. Please use the "adornment" prop instead.'
-    )
-  }
-  if (adornmentSettings) {
-    warn(
-      'TextInput: The "adornmentSettings" props is deprecated. Please use the "adornment" prop instead.'
-    )
-  }
-}
-
 // Text input wrapped to allow adornments
-const WrapperTextInput = React.forwardRef(({ adornment, ...props }, ref) => {
-  deprecationWarning(props.adornmentPosition, props.adornmentSettings)
+const WrapperTextInput = React.forwardRef(
+  ({ adornment, adornmentPosition, adornmentSettings, ...props }, ref) => {
+    if (adornmentPosition) {
+      warn(
+        'TextInput: The "adornmentPosition" prop is deprecated. Please use the "adornment" prop instead.'
+      )
+    }
+    if (adornmentSettings) {
+      warn(
+        'TextInput: The "adornmentSettings" props is deprecated. Please use the "adornment" prop instead.'
+      )
+    }
 
-  if (!adornment) {
-    return <TextInput ref={ref} {...props} />
-  }
+    if (!adornment) {
+      return <TextInput ref={ref} {...props} />
+    }
 
-  let adornmentConfig = adornment
+    let adornmentConfig = adornment
 
-  const usingDeprecatedAPI =
-    React.isValidElement(adornment) ||
-    typeof adornment === 'string' ||
-    (typeof adornment === 'object' && adornment.constructor === Array)
+    const usingDeprecatedAPI =
+      React.isValidElement(adornment) ||
+      typeof adornment === 'string' ||
+      (typeof adornment === 'object' && adornment.constructor === Array)
 
-  if (usingDeprecatedAPI) {
-    const { adornmentPosition = 'start', adornmentSettings = {} } = props
-    adornmentConfig = {
-      [adornmentPosition]: adornment,
-      [`${adornmentPosition}Padding`]: adornmentSettings.padding,
-      [`${adornmentPosition}Width`]: adornmentSettings.width,
+    if (usingDeprecatedAPI) {
+      const { adornmentPosition = 'start', adornmentSettings = {} } = props
+      adornmentConfig = {
+        [adornmentPosition]: adornment,
+        [`${adornmentPosition}Padding`]: adornmentSettings.padding,
+        [`${adornmentPosition}Width`]: adornmentSettings.width,
+      }
     }
-  }
 
-  const {
-    start,
-    startPadding,
-    startWidth = 36,
-    end,
-    endPadding,
-    endWidth = 36,
-  } = adornmentConfig
+    const {
+      start,
+      startPadding,
+      startWidth = 36,
+      end,
+      endPadding,
+      endWidth = 36,
+    } = adornmentConfig
 
-  return (
-    <div
-      css={`
-        display: inline-flex;
-        position: relative;
-        width: ${props.wide ? '100%' : 'max-content'};
-      `}
-    >
-      <TextInput
-        ref={ref}
+    return (
+      <div
         css={`
-          ${start && `padding-left: ${startWidth}`}
-          ${end && `padding-right: ${endWidth}`}
+          display: inline-flex;
+          position: relative;
+          width: ${props.wide ? '100%' : 'max-content'};
         `}
-        {...props}
-      />
-      {start && (
-        <Adornment adornment={start} padding={startPadding} position="start" />
-      )}
-      {end && <Adornment adornment={end} padding={endPadding} position="end" />}
-    </div>
-  )
-})
+      >
+        <TextInput
+          ref={ref}
+          css={`
+            ${start && `padding-left: ${startWidth}`}
+            ${end && `padding-right: ${endWidth}`}
+          `}
+          {...props}
+        />
+        {start && (
+          <Adornment
+            adornment={start}
+            padding={startPadding}
+            position="start"
+          />
+        )}
+        {end && (
+          <Adornment adornment={end} padding={endPadding} position="end" />
+        )}
+      </div>
+    )
+  }
+)
 
 WrapperTextInput.propTypes = {
   ...TextInput.propTypes,
@@ -196,7 +200,7 @@ WrapperTextInput.propTypes = {
       endWidth: PropTypes.number,
       endPadding: PropTypes.number,
     }),
-    
+
     // deprecated
     PropTypes.node,
   ]),

From f259c47d7854826bb39ff2cfd5bd701ce9c035ef Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Wed, 15 Jul 2020 13:10:41 -0400
Subject: [PATCH 14/14] Add null as one of the possible adornment proptypes

---
 src/components/Input/TextInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Input/TextInput.js b/src/components/Input/TextInput.js
index 790080492..be8c8ac1d 100644
--- a/src/components/Input/TextInput.js
+++ b/src/components/Input/TextInput.js
@@ -200,6 +200,7 @@ WrapperTextInput.propTypes = {
       endWidth: PropTypes.number,
       endPadding: PropTypes.number,
     }),
+    PropTypes.oneOf([null]),
 
     // deprecated
     PropTypes.node,