feat(textarea): Prevent width resizing to avoid edge cases with the a…

…bsolutely positioned icons

src/components/Textarea/Textarea.jsx

@@ -2,19 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { childrenOfType } from 'airbnb-prop-types'
 
-import Tooltip from '../Tooltip/Tooltip'
+import joinClassNames from '../../utils/joinClassNames'
 
+import Tooltip from '../Tooltip/Tooltip'
 import FormField from '../FormField/FormField'
 import FeedbackIcon from '../FormField/FeedbackIcon'
 
 import styles from './Textarea.modules.scss'
 import positionStyles from '../Position.modules.scss'
 
-const Textarea = ({ ...props }) => (
+const Textarea = props => (
   <FormField {...props}>
-    {(textareaProps, showIcon, feedback) => (
-      <div className={positionStyles.relative}>
-        <textarea {...textareaProps} />
+    {({ className, ...textareaProps }, showIcon, feedback) => (
+      <div className={joinClassNames(positionStyles.relative, styles.preventWidthResizing)}>
+        <textarea
+          {...textareaProps}
+          className={joinClassNames(className, styles.preventWidthResizing)}
+        />
 
         <div className={styles.feedbackIconPosition}>
           <FeedbackIcon showIcon={showIcon} feedback={feedback} />

src/components/Textarea/Textarea.modules.scss

@@ -1,3 +1,13 @@
+.preventWidthResizing {
+  // Set max width to prevent the textarea from being resized beyond it's container.
+  // Set min width to prevent the textarea from being resized smaller, making the absolutely positioned icon have to be repositioned.
+
+  // Another option here can be to wrap the textarea in an "inline-block" div, which will adapt to the bounds of the child textarea.
+  // - I chose to prevent resizing the width to avoid edge cases due to the absolutely positioned icon.
+  max-width: 100%;
+  min-width: 100%;
+}
+
 .feedbackIconPosition {
   composes: absolute from '../Position.modules.scss';
 

src/components/Textarea/__tests__/__snapshots__/Textarea.spec.jsx.snap

@@ -23,11 +23,11 @@ exports[`Textarea renders 1`] = `
     </label>
   </div>
   <div
-    class="relative"
+    class="relative preventWidthResizing"
   >
     <textarea
       aria-invalid="false"
-      class="default"
+      class="default preventWidthResizing"
       data-no-global-styles="true"
       id="the-textarea"
     />
@@ -61,11 +61,11 @@ exports[`Textarea renders with a feedback state and icon 1`] = `
     </label>
   </div>
   <div
-    class="relative"
+    class="relative preventWidthResizing"
   >
     <textarea
       aria-invalid="true"
-      class="error"
+      class="error preventWidthResizing"
       data-no-global-styles="true"
       id="the-textarea"
     />