Wrap-multiline (#1651)

Author: MadeByMike

.changeset/neat-beans-fix/changes.json

@@ -0,0 +1,55 @@
+{
+  "releases": [{ "name": "@arch-ui/input", "type": "minor" }],
+  "dependents": [
+    {
+      "name": "@keystone-alpha/app-admin-ui",
+      "type": "patch",
+      "dependencies": ["@arch-ui/controls", "@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    {
+      "name": "@arch-ui/docs",
+      "type": "patch",
+      "dependencies": ["@arch-ui/controls", "@arch-ui/input"]
+    },
+    { "name": "@arch-ui/controls", "type": "patch", "dependencies": ["@arch-ui/input"] },
+    { "name": "@arch-ui/day-picker", "type": "patch", "dependencies": ["@arch-ui/input"] },
+    {
+      "name": "@keystone-alpha/field-content",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    {
+      "name": "@keystone-alpha/fields",
+      "type": "patch",
+      "dependencies": [
+        "@arch-ui/controls",
+        "@arch-ui/day-picker",
+        "@keystone-alpha/field-content",
+        "@arch-ui/filters",
+        "@arch-ui/input"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/fields-markdown",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    {
+      "name": "@keystone-alpha/fields-mongoid",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    {
+      "name": "@keystone-alpha/fields-wysiwyg-tinymce",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    {
+      "name": "@keystone-alpha/cypress-project-social-login",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/app-admin-ui", "@keystone-alpha/fields", "@arch-ui/input"]
+    },
+    { "name": "@keystone-alpha/website", "type": "patch", "dependencies": ["@arch-ui/input"] },
+    { "name": "@arch-ui/filters", "type": "patch", "dependencies": ["@arch-ui/controls"] }
+  ]
+}

.changeset/neat-beans-fix/changes.md

@@ -0,0 +1 @@
+Allows multiline input content to wrap

packages/arch/packages/input/src/Input.js

@@ -14,7 +14,6 @@ export const inputStyles = (props: InputProps = {}) => ({
   ...uniformHeight,
   backgroundColor: props.disabled ? colors.N10 : 'white',
   borderColor: colors.N20,
-  // boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
   color: 'inherit',
   width: '100%',
 
@@ -24,19 +23,18 @@ export const inputStyles = (props: InputProps = {}) => ({
   },
   ':focus': {
     borderColor: colors.primary,
-    // boxShadow: `inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px ${alpha(colors.primary, 0.2)}`,
     outline: 0,
   },
   '&[disabled]': {
     borderColor: colors.N15,
-    // boxShadow: 'none',
     backgroundColor: colors.N05,
   },
   ...(props.isMultiline
     ? {
         lineHeight: 'inherit',
         minHeight: 100,
         resize: 'vertical',
+        whiteSpace: 'wrap',
       }
     : undefined),
 });